bootstrap-multiselect:[url]https://github.com/davidstutz/bootstrap-multiselect[/url]
bootstrap-multiselect doc:[url]http://davidstutz.github.io/bootstrap-multiselect/[/url]
项目中要用到下拉多选框,搜了一下,感觉bootstrap-multiselect,不错,今天来简单介绍一下:
测试页面:
效果如下:
[img]http://dl2.iteye.com/upload/attachment/0124/7857/ba9e83e0-a8f7-328b-947f-beee5aacc8eb.png[/img]
[img]http://dl2.iteye.com/upload/attachment/0124/7859/6f29cacd-4ab4-308a-93c8-6ac88150917a.png[/img]
[img]http://dl2.iteye.com/upload/attachment/0124/7861/7bbe84a8-f82f-3386-bc5a-f1ae73ec4571.png[/img]
[img]http://dl2.iteye.com/upload/attachment/0124/7863/12e67095-6a8c-3ca3-b404-a5fab051cf38.png[/img]
[img]http://dl2.iteye.com/upload/attachment/0124/7865/0552de3c-bb5c-3d90-8093-c0115a43a3bf.png[/img]
[img]http://dl2.iteye.com/upload/attachment/0124/7867/f696cf33-fe22-3e3a-a72f-aa54960d3057.png[/img]
使用过程中发现与<link rel="stylesheet" href="static/css/ace.min.css" />的ace.min.css样式单冲突,multiselect下拉框checkbox不显示,
[img]http://dl2.iteye.com/upload/attachment/0124/8082/dee7f39e-ec71-3f87-b733-a47bec4efe73.png[/img]
查看下拉框与页面中的checkbox有什么不同,
发现页面中checkbox多了一个<span class="lbl"/>,而multiSelect 下拉框中的checkbox中没有,看看能不能,修改JS,bootstrap-multiselect_cn.js;在脚本中createOptionValue方法中,修改
测试发现:
我们想要的是after产生的效果,
但通id可以,调用after可以产生效果,而$('<input/>').after和通过class找不到。
至于问什么,没能解决,知道可以给我留言,谢谢。
参考:
JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove的使用:[url]http://www.cnblogs.com/wx1993/p/4806873.html[/url]
放弃修改Js,修改css,bootstrap-multiselect
修改
为
添加如下样式:
使用!important主要是,主要让样式的优先级变高,可以来指定,不让ace.min.css覆盖:。
参考:
css样式加载顺序及覆盖顺序深入理解:[url]http://www.jb51.net/css/124992.html[/url]
html、css、js文件加载顺序及执行情况:[url]http://www.cnblogs.com/Walker-lyl/p/5262075.html[/url]
[size=medium][b]CSS样式加载顺序:[/b][/size]
1.<head>标签内有一个<link>标签引用外部CSS文件
2.内部css样式
3.标签style样式
即按在html中css出现的顺序;但这些样式是有优先级的如下,
[size=medium][b]CSS样式覆盖顺序深入理解:[/b][/size]
1. 样式表的元素选择器选择越精确,则其中的样式优先级越高:
id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式
2. 对于相同类型选择器制定的样式,在样式表文件中,越靠后的优先级越高
注意,这里是样式表文件中越靠后的优先级越高,而不是在元素class出现的顺序。
3. 如果要让某个样式的优先级变高,可以使用!important来指定
测试页面:
bootstrap-multiselect doc:[url]http://davidstutz.github.io/bootstrap-multiselect/[/url]
项目中要用到下拉多选框,搜了一下,感觉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>
效果如下:
[img]http://dl2.iteye.com/upload/attachment/0124/7857/ba9e83e0-a8f7-328b-947f-beee5aacc8eb.png[/img]
[img]http://dl2.iteye.com/upload/attachment/0124/7859/6f29cacd-4ab4-308a-93c8-6ac88150917a.png[/img]
[img]http://dl2.iteye.com/upload/attachment/0124/7861/7bbe84a8-f82f-3386-bc5a-f1ae73ec4571.png[/img]
[img]http://dl2.iteye.com/upload/attachment/0124/7863/12e67095-6a8c-3ca3-b404-a5fab051cf38.png[/img]
[img]http://dl2.iteye.com/upload/attachment/0124/7865/0552de3c-bb5c-3d90-8093-c0115a43a3bf.png[/img]
[img]http://dl2.iteye.com/upload/attachment/0124/7867/f696cf33-fe22-3e3a-a72f-aa54960d3057.png[/img]
使用过程中发现与<link rel="stylesheet" href="static/css/ace.min.css" />的ace.min.css样式单冲突,multiselect下拉框checkbox不显示,
[img]http://dl2.iteye.com/upload/attachment/0124/8082/dee7f39e-ec71-3f87-b733-a47bec4efe73.png[/img]
查看下拉框与页面中的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的使用:[url]http://www.cnblogs.com/wx1993/p/4806873.html[/url]
放弃修改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样式加载顺序及覆盖顺序深入理解:[url]http://www.jb51.net/css/124992.html[/url]
html、css、js文件加载顺序及执行情况:[url]http://www.cnblogs.com/Walker-lyl/p/5262075.html[/url]
[size=medium][b]CSS样式加载顺序:[/b][/size]
1.<head>标签内有一个<link>标签引用外部CSS文件
2.内部css样式
3.标签style样式
即按在html中css出现的顺序;但这些样式是有优先级的如下,
[size=medium][b]CSS样式覆盖顺序深入理解:[/b][/size]
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>