- 浏览: 954720 次
文章分类
- 全部博客 (428)
- Hadoop (2)
- HBase (1)
- ELK (1)
- ActiveMQ (13)
- Kafka (5)
- Redis (14)
- Dubbo (1)
- Memcached (5)
- Netty (56)
- Mina (34)
- NIO (51)
- JUC (53)
- Spring (13)
- Mybatis (17)
- MySQL (21)
- JDBC (12)
- C3P0 (5)
- Tomcat (13)
- SLF4J-log4j (9)
- P6Spy (4)
- Quartz (12)
- Zabbix (7)
- JAVA (9)
- Linux (15)
- HTML (9)
- Lucene (0)
- JS (2)
- WebService (1)
- Maven (4)
- Oracle&MSSQL (14)
- iText (11)
- Development Tools (8)
- UTILS (4)
- LIFE (8)
最新评论
-
Donald_Draper:
Donald_Draper 写道刘落落cici 写道能给我发一 ...
DatagramChannelImpl 解析三(多播) -
Donald_Draper:
刘落落cici 写道能给我发一份这个类的源码吗Datagram ...
DatagramChannelImpl 解析三(多播) -
lyfyouyun:
请问楼主,执行消息发送的时候,报错:Transport sch ...
ActiveMQ连接工厂、连接详解 -
ezlhq:
关于 PollArrayWrapper 状态含义猜测:参考 S ...
WindowsSelectorImpl解析一(FdMap,PollArrayWrapper) -
flyfeifei66:
打算使用xmemcache作为memcache的客户端,由于x ...
Memcached分布式客户端(Xmemcached)
bootstrap-multiselect:https://github.com/davidstutz/bootstrap-multiselect
bootstrap-multiselect doc:http://davidstutz.github.io/bootstrap-multiselect/
项目中要用到下拉多选框,搜了一下,感觉bootstrap-multiselect,不错,今天来简单介绍一下:
测试页面:
效果如下:
使用过程中发现与<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方法中,修改
测试发现:
我们想要的是after产生的效果,
但通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
修改
为
添加如下样式:
使用!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来指定
测试页面:
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>
- bootstrap-multiselect-master_cn.rar (355.2 KB)
- 下载次数: 120
发表评论
-
ajaxFileUpload的使用
2017-02-27 16:06 903artDialog官网:http://www.daimajia ... -
BootStrap五星评分插件使用详解
2017-01-12 15:14 10472插件:http://www.jq22.com/jquery-i ... -
如何阻止Form表单中的Button自动提交
2016-07-26 18:37 3719在Form表单中加button的话,点击事件触发会自动提交表单 ... -
JavaScript正则表达式实例
2016-06-15 17:43 489JS正则基础知识:http://w ... -
FusionChartsFree在JSP中的用法
2016-05-31 11:14 840FusionCharts简单教程(四)-----基本数字格式: ... -
js-repalace&Regexp
2016-04-25 15:56 490<html> <head> < ... -
CKEditor 用法
2016-03-18 16:32 742<script type="text/java ... -
textarea使用注意的事项
2016-03-17 09:08 4651.disabled 和 readonly的区别 ...
相关推荐
bootstrap-multiselect,使用了bootstrap风格实现下拉框的条件检索、多选、单选控制
bootstrap-multiselect.css,bootstrap-multiselect.js,bootstrap-multiselect.less,bootstrap-multiselect详细文档及demo
bootstrap-multiselect控件的简单使用示例
好用的bootstrap多选select控件,完美切合bootstrap样式
bootstrap-select插件,jquery实现的下拉选择。
依存关系Bootstrap CSS 3或4 真棒字体(可选)安装使用安装: npm install ngx-bootstrap-multiselect --save 。用法将NgxBootstrapMultiselectModule导入您的@NgModule。 import { NgxBootstrapMultiselectModule }...
bootstrap-multiselect组件主要解决了前端页面下拉选框动态加载数据,下拉框多选的问题
内含完整版代码,css文件。js文件,bootstrap的多选下拉框
去官网上下载过来的bootstrap-multiselect,经过精简,去除多余的文件和代码,提供给大家使用。里面的test.html可以参考调用。
Bootsrap好看的下拉多选列表,bootstrap-multiselect-master(借鉴)
赠送jar包:swagger-bootstrap-ui-1.9.6.jar; 赠送原API文档:swagger-bootstrap-ui-1.9.6-javadoc.jar; 赠送源代码:swagger-bootstrap-ui-1.9.6-sources.jar; 赠送Maven依赖信息文件:swagger-bootstrap-ui-...
bootstrap-table插件:bootstrap-editable,可编辑下拉框,以及代码实例,
可编辑bootstrap-table及相关组件:bootstrap3、bootstrap-table相关、bootstrap-table-editable.js、bootstrap-editable.js、bootstrap-editable.css; 配合起来,可以实现可编辑bootstrap-table列表。代码实现: ...
压缩包里面有: 1.bootstrap-table-editable.js 2.bootstrap-editable.js 3.bootstrap-editable.css 用于bootstrap table实现x-editable的行单元格编辑
Bootstrap Multiselect Pentaho过滤器 ...将文件夹bootstrap-multiselect-pentaho-filter压缩到该文件夹的zip文件中,然后导入到您的实例,以下示例考虑路径public / bootstrap-multiselect-pentaho-filter 。
FastAdmin使用bootstrap-table作为前端表格的基础组件库,通常列表交互展示已经够用了,包括通用搜索、排序、分页、导出、合并相同行/列等等。最近需要对表头进行冻结,找到了bootstrap-table-fixed-columns组件(也...
bootstrap-table实现 行拖拽 插件 jquery.tablednd.js bootstrap-table-reorder-rows.js bootstrap-table-reorder-rows.css