bootstrap-multiselect doc: http://davidstutz.github.io/bootstrap-multiselect/
项目中要用到下拉多选框,搜了一下,感觉bootstrap-multiselect,不错,今天来简单介绍一下:
测试页面:
<html lang="en"> <head> <meta charset="utf-8" /> <!--注意这里jquery的版本和css,js引入的顺序 --> <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" type="text/css"/> <script type="text/javascript" src="./jquery/js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script> <!-- Include the plugin's CSS and JS: --> <!-- <script type="text/javascript" src="./dist/js/bootstrap-multiselect.js"></script> --> <!--无选择提示为中文,只是部分中文 --> <script type="text/javascript" src="./dist/js/bootstrap-multiselect_cn.js"></script> <link rel="stylesheet" href="./dist/css/bootstrap-multiselect.css" type="text/css"/> <script type="text/javascript"> console.log("start"); $(document).ready(function() { $('#example-multiple').multiselect(); $('#example-radio').multiselect(); $('#example-multiple-optgroups').multiselect(); $('#example-radio-optgroups').multiselect(); /* *分组可选,可折叠,全选时不显示,所有option的数量 */ $('#example-enableClickableOptGroups').multiselect({ enableClickableOptGroups: true, selectAllNumber: false }); /* *分组可选,可折叠,可全选,右侧显示下拉选项, *触发选择事件,可搜索,可展示已选择option的数量(numberDisplayed) */ $('#example-all').multiselect({ enableClickableOptGroups: true, enableCollapsibleOptGroups: true, includeSelectAllOption: true, buttonWidth: '400px', dropRight: true, maxHeight: 200, onChange: function(option, checked) { alert($(option).val()); /*if(条件) { this.clearSelection();//清除所有选择及显示 }*/ }, nonSelectedText: '请选择', numberDisplayed: 10, enableFiltering: true, allSelectedText:'全部', }); }); </script> </head> <body style="margin-left:10;"> 1.多选下拉框: <select id="example-multiple" multiple="multiple"> <option value="cheese">Cheese</option> <option value="tomatoes">Tomatoes</option> <option value="mozarella">Mozzarella</option> <option value="mushrooms">Mushrooms</option> <option value="pepperoni">Pepperoni</option> <option value="onions">Onions</option> </select> <BR/> 2.单选下拉框: <select id="example-radio"> <option value="cheese">Cheese</option> <option value="tomatoes">Tomatoes</option> <option value="mozarella">Mozzarella</option> <option value="mushrooms">Mushrooms</option> <option value="pepperoni">Pepperoni</option> <option value="onions">Onions</option> </select> <BR/> 从上面两个来看,能不能多选,主要是multiple="multiple"属性配置... 3.多选分组下拉框: <select id="example-multiple-optgroups" multiple="multiple"> <optgroup label="Group 1" class="group-1"> <option value="1-1">Option 1.1</option> <option value="1-2" selected="selected">Option 1.2</option> <option value="1-3" selected="selected">Option 1.3</option> </optgroup> <optgroup label="Group 2" class="group-2"> <option value="2-1">Option 2.1</option> <option value="2-2">Option 2.2</option> <option value="2-3">Option 2.3</option> </optgroup> </select> <BR/> 4.单选分组下拉框: <select id="example-radio-optgroups"> <optgroup label="Group 1" class="group-1"> <option value="1-1">Option 1.1</option> <option value="1-2" selected="selected">Option 1.2</option> <option value="1-3" selected="selected">Option 1.3</option> </optgroup> <optgroup label="Group 2" class="group-2"> <option value="2-1">Option 2.1</option> <option value="2-2">Option 2.2</option> <option value="2-3">Option 2.3</option> </optgroup> </select> <BR/> 5.分组多选下拉框: <select id="example-enableClickableOptGroups" multiple="multiple"> <optgroup label="Group 1" class="group-1"> <option value="1-1">Option 1.1</option> <option value="1-2">Option 1.2</option> <option value="1-3">Option 1.3</option> </optgroup> <optgroup label="Group 2" class="group-2"> <option value="2-1" disabled="disabled">Option 2.1</option> <option value="2-2">Option 2.2</option> <option value="2-3">Option 2.3</option> </optgroup> </select> 6.分组多选,可折叠,可全选下拉框: <select id="example-all" multiple="multiple"> <optgroup label="Group 1" class="group-1"> <option value="1-1">Option 1.1</option> <option value="1-2" selected="selected">Option 1.2</option> <option value="1-3" selected="selected">Option 1.3</option> </optgroup> <optgroup label="Group 2" class="group-2"> <option value="2-1">Option 2.1</option> <option value="2-2">Option 2.2</option> <option value="2-3">Option 2.3</option> </optgroup> </select> </body> </html>
效果如下:
使用过程中发现与<link rel="stylesheet" href="static/css/ace.min.css" />的ace.min.css样式单冲突,multiselect下拉框checkbox不显示,
查看下拉框与页面中的checkbox有什么不同,
发现页面中checkbox多了一个<span class="lbl"/>,而multiSelect 下拉框中的checkbox中没有,看看能不能,修改JS,bootstrap-multiselect_cn.js;在脚本中createOptionValue方法中,修改
<script type="text/javascript" src="./dist/js/bootstrap-multiselect_cn.js"></script> /** * Create an option using the given select option. * * @param {jQuery} element */ createOptionValue: function(element) { var $element = $(element); if ($element.is(':selected')) { $element.prop('selected', true); } // Support the label attribute on options. var label = this.options.optionLabel(element); var classes = this.options.optionClass(element); var value = $element.val(); var inputType = this.options.multiple ? "checkbox" : "radio"; var $li = $(this.options.templates.li); var $label = $('label', $li); $label.addClass(inputType); $li.addClass(classes); if (this.options.enableHTML) { $label.html(" " + label); } else { $label.text(" " + label); } //var $checkbox = $('<input/>').attr('type', inputType); var $checkbox = $('<input/>').attr('type', inputType); //测试修改如下 //$checkbox.append('<span class="lbl"/>'); //$checkbox.after('<span class="lbl"/>'); //$('<input>').append('<span class="lbl"/>'); //var $checkbox = $('<input/>').attr('type', 'radio')); //solve the ace-admin-min.css,input type is checkbox css collision //var $checkbox = $('<input/>').attr('class', "lbl"); //.append('<span class="lbl"> 信用证</span>' var name = this.options.checkboxName($element); if (name) { $checkbox.attr('name', name); } $label.prepend($checkbox); ... }
测试发现:
$checkbox.append('<span class="lbl"/>');//这个不是我们想要的
我们想要的是after产生的效果,
$checkbox.after('<span class="lbl"/>');//无效,jquery,找不到,
但通id可以,调用after可以产生效果,而$('<input/>').after和通过class找不到。
至于问什么,没能解决,知道可以给我留言,谢谢。
参考:
JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove的使用: http://www.cnblogs.com/wx1993/p/4806873.html
放弃修改Js,修改css,bootstrap-multiselect
修改
<link rel="stylesheet" href="./dist/css/bootstrap-multiselect.css" type="text/css"/> .multiselect-container>li>a>label>input[type=checkbox] { margin-bottom: 5px }
为
.multiselect-container>li>a>label>input[type=checkbox] { margin-bottom: 5px; margin-left: 20px; opacity:1;/*checkbox透明度*/ position:relative }
添加如下样式:
.multiselect.dropdown-toggle.btn.btn-default { background-color: #dbd8d8 !important; color: black !important; border: #c92727 !important; box-shadow: none !important; text-shadow: 0 -1px 0 #d8c8c8 !important; } .btn.btn-default.multiselect-clear-filter { background-color: #fff9f9 !important; border: #c34e4e !important; }
使用!important主要是,主要让样式的优先级变高,可以来指定,不让ace.min.css覆盖:。
参考:
css样式加载顺序及覆盖顺序深入理解: http://www.jb51.net/css/124992.html
html、css、js文件加载顺序及执行情况: http://www.cnblogs.com/Walker-lyl/p/5262075.html
CSS样式加载顺序:
1.<head>标签内有一个<link>标签引用外部CSS文件
2.内部css样式
3.标签style样式
即按在html中css出现的顺序;但这些样式是有优先级的如下,
CSS样式覆盖顺序深入理解:
1. 样式表的元素选择器选择越精确,则其中的样式优先级越高:
id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式
2. 对于相同类型选择器制定的样式,在样式表文件中,越靠后的优先级越高
注意,这里是样式表文件中越靠后的优先级越高,而不是在元素class出现的顺序。
3. 如果要让某个样式的优先级变高,可以使用!important来指定
测试页面:
<html> <head> <meta charset="utf-8"> <script type="text/javascript" src="./bootstrap-multiselect-master/jquery/js/jquery-1.9.1.min.js"></script> <script type="text/javascript"> console.log("start"); $(document).ready(function() { //$('<input/>').append('<span class="lbl"/>'); //var $input = $('<input/>').attr('type', 'checkbox'); // $('<input>')创建一个input标签 var $input = $('<input>').attr('type', 'checkbox'); $input.val("c"); $input.addClass("multiselect-ace") $(".multiselect-ace").after('<span class="lbl"/>'); //$input.append('<span class="lbl"/>'); //$input.after('<span class="lbl"/>');//无效,jquery,找不到, $('<span class="lbl"/>').insertAfter($input); //$('<span class="lbl"/>').appendTo($input); //$input.appendTo('<span class="lbl"/>'); //var $input = $('<input/>').append('<span class="lbl"/>'); $("#test").append($input); //$("#test").after('<span class="lbl"/>'); //alert( $('<input/>').val()); }); </script> </head> <body> <select> <option>test</option> </select> <BR/> <input id="test" type="radio" name="test" value="v"/> <BR/> <!-- <input type="checkbox"/> --> </body> </html>