- 浏览: 984478 次
文章分类
- 全部博客 (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)
- 下载次数: 122
发表评论
-
ajaxFileUpload的使用
2017-02-27 16:06 943artDialog官网:http://www.daimajia ... -
BootStrap五星评分插件使用详解
2017-01-12 15:14 10634插件:http://www.jq22.com/jquery-i ... -
如何阻止Form表单中的Button自动提交
2016-07-26 18:37 3782在Form表单中加button的话,点击事件触发会自动提交表单 ... -
JavaScript正则表达式实例
2016-06-15 17:43 537JS正则基础知识:http://w ... -
FusionChartsFree在JSP中的用法
2016-05-31 11:14 886FusionCharts简单教程(四)-----基本数字格式: ... -
js-repalace&Regexp
2016-04-25 15:56 530<html> <head> < ... -
CKEditor 用法
2016-03-18 16:32 772<script type="text/java ... -
textarea使用注意的事项
2016-03-17 09:08 5271.disabled 和 readonly的区别 ...
相关推荐
Bootstrap Multiselect是一款基于Bootstrap框架的插件,专为创建功能丰富的多选下拉菜单而设计。这个插件扩展了HTML `<select>` 元素,使其能够以美观且用户友好的方式呈现多选选项。在本文中,我们将深入探讨...
如果你想改变多选框的样式,可以使用`buttonClass`选项等。查看官方文档了解更多详细信息。 此外,插件还支持事件监听,你可以监听用户的操作并作出响应。例如,当用户的选择发生变化时,可以监听`changed`事件: ...
6. **自定义样式**:可定制多选框的样式,与Bootstrap主题保持一致。 **二、使用步骤** 1. **引入依赖**:确保项目中已经包含了Bootstrap的CSS和JS文件,以及jQuery库。如果没有,需要先下载并引入。 2. **下载...
例如,如果你想在运行时动态改变多选框的配置,可以先`destroy`再重新`multiselect`: ```javascript // 销毁多选框 $('#example-get-selected-values').multiselect('destroy'); // 重新初始化,使用新的配置 $('...
依存关系Bootstrap CSS 3或4 真棒字体(可选)安装使用安装: npm install ngx-bootstrap-multiselect --save 。用法将NgxBootstrapMultiselectModule导入您的@NgModule。 import { NgxBootstrapMultiselectModule }...
本篇将详细介绍如何在Bootstrap中创建美观且功能完善的下拉多选框,以"bootstrap-multiselect-master"为例。 "bootstrap-multiselect-master"是一个基于Bootstrap的多选下拉框插件,它提供了一个直观且易于使用的...
Bootstrap 左右多选多Multiselect插件是一种基于流行的前端框架Bootstrap开发的组件,它极大地扩展了Bootstrap原生的下拉选择框功能。这个插件允许用户在两个独立的列表之间进行选择,使得多选操作更加直观和高效,...
Bootstrap Multiselect 是一个基于 Bootstrap 框架的插件,用于创建美观且功能丰富的下拉多选框。这个插件提供了许多自定义选项和功能,使得在网页表单中实现多选功能变得更加简单和直观。以下是对这个插件的详细...
这是Bootstrap Multiselect的核心功能,用户可以同时选择多个选项,通过复选框或者全选/全取消按钮进行操作。 8. **分组选择**: 选项可以按组分隔,每组有自己的标题,方便用户管理和浏览。 9. **搜索功能**: ...
Bootstrap Multiselect是一款基于Bootstrap框架的插件,用于创建功能丰富的多选和单选下拉选择控件。这个插件极大地增强了原生HTML `<select>` 元素的功能,提供了美观且用户友好的界面,使得在网页设计中处理复选...
这个插件通过提供一个可定制的界面,使得用户可以通过复选框来选择多个选项,而不仅仅是传统的单击选择。下面我们将详细讲解如何使用 Bootstrap Multiselect 实现下拉框多选功能,并在点击事件中获取选中的 option ...
`bootstrap-multiselect`插件还提供了一些配置选项和方法,例如自定义按钮文本、禁用选项、获取已选值等,这使得我们可以根据项目需求进一步定制多选下拉框的行为。同时,它也支持事件监听,以便在用户操作时执行...
除了基础的多选下拉框,`jquery_multiselect` 还可以与其他 jQuery 插件结合使用,如 DataTables、Bootstrap 等,实现更复杂的数据展示和交互。例如,可以将其应用于表格列的过滤条件,或者作为表单组件,用于用户...
下面介绍两种常见的动态生成多选框的方式: 1. JavaBean 方式: 在JSP页面中,你可以嵌入Java代码来生成多选框。首先定义一个Product JavaBean,包含基本属性如id和name,以及对应的getter和setter方法。接着,从...
在IT界,下拉多选框(Dropdown Multiselect)是一种常见的用户界面元素,它允许用户在下拉菜单中选择一个或多个选项。这种组件在网页设计、应用开发以及各种交互式软件中广泛应用,因为它能够有效地节省空间并提供...
下拉选择树的实现通常基于JavaScript库,如jQuery,以及可能的插件,例如Bootstrap Select2、Bootstrap Multiselect、jqTree等。这些插件扩展了原生的Bootstrap下拉菜单功能,增加了树状结构的显示和交互。例如,...
- `css`目录:存放插件的CSS样式文件,用于定义多选框的外观。 - `js`目录:包含主要的JavaScript源码文件,如`multi-select.js`是核心插件脚本。 - `img`目录:存放插件所需的图片资源。 - `demo`目录:提供...