bootstrap multiselect两大组件
2016-03-20 12:18
706 查看
组件说明以及API
1、第一个组件——multiple-select。这个组件风格简单、文档全、功能强大。但是觉得它选中的效果不太好。关于它的效果展示,我们放在后面。
2、第二个组件——bootstrap-multiselect。这个组件风格和第一个非常相似,文档也挺全面。
既然是bootstrap的组件,肯定需要bootstrap的支持。我们来看看需要引用的js
Bootstrap-multiselect组件
效果:
multiple-select组件:
组件效果:
比较重要的参数说明:
是否打开下拉列表。
默认值为
显示默认的提示信息。
默认值为
是否显示全选复选框。
默认值为
全选复选框的显示内容。
默认值为
是否在一行中显示多个选项。
默认值为
一行中每个选项的宽度。
默认值为
是否只允许你选择一行。
默认值为
定义下拉列表的位置,只能是
默认值为
是否开启过滤功能。
默认值为
定义下拉列表的宽度。
默认值为
下拉列表的最大高度。
默认值为
常用事件:
常用方法:
参数: type
类型: string
选择内容的类型,value 或者 text。
默认值为
参数: values
类型: array
选择框的内容信息。
假如你是通过 AJAX 或者 DOM 来手动添加或者删除 option 选项,可以通过 refresh 方法来重新加载 Multiple Select。
第一个组件是写bootstrap table的主人公 wenzhixin 封装的一个组件—— multiple-select。这个组件风格简单、文档全、功能强大。但是觉得它选中的效果不太好。关于它的效果展示,我们放在后面。还是给出对应的文档API。
Multiple-Select源码主页: https://github.com/wenzhixin/multiple-select
Multiple-Select文档以及Demo: http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN
2、第二个组件也是在github上面找的—— bootstrap-multiselect 。这个组件风格和第一个非常相似,文档也挺全面。
bootstrap-multiselect源码主页: https://github.com/davidstutz/bootstrap-multiselect
bootstrap-multiselect文档以及Demo: http://davidstutz.github.io/bootstrap-multiselect/
Bootstrap-select多选下拉框实现 :http://www.cnblogs.com/anny0404/p/5329960.html
jQuery multiselect: http://loudev.com/
JS组件系列——Bootstrap Select2组件 (http://www.tuicool.com/articles/nYVn22e)
Select2参数文档说明: https://select2.github.io/options.html
Select2源码: https://github.com/select2/select2
1、第一个组件——multiple-select。这个组件风格简单、文档全、功能强大。但是觉得它选中的效果不太好。关于它的效果展示,我们放在后面。
2、第二个组件——bootstrap-multiselect。这个组件风格和第一个非常相似,文档也挺全面。
既然是bootstrap的组件,肯定需要bootstrap的支持。我们来看看需要引用的js
Bootstrap-multiselect组件
<script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Content/bootstrap/js/bootstrap.min.js"></script> <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <script src="~/Content/multiselect_davidstutz/js/bootstrap-multiselect.js"></script> <link href="~/Content/multiselect_davidstutz/css/bootstrap-multiselect.css" rel="stylesheet" />
<form id="formSearch" class="form-horizontal"> <div class="form-group"> <label class="control-label col-xs-1">原始Select</label> <div class="col-xs-2" style="margin-top:7px;"> <select style="width:150px" multiple="multiple"> <option value="0">未排产</option> <option value="5">已排产</option> <option value="10">已锁定</option> <option value="25">在制</option> <option value="20">订单提交</option> <option value="30">订单删除</option> <option value="50">订单报废</option> </select> </div> <label class="control-label col-xs-1" for="sel_search_orderstatus">多选站点</label> <div class="col-xs-2" style="margin-top:7px;"> <select id="sel_search_orderstatus" style="width:150px" multiple="multiple"> <option value="0">未排产</option> <option value="5">已排产</option> <option value="10">已锁定</option> <option value="25">在制</option> <option value="20">订单提交</option> <option value="30">订单删除</option> <option value="50">订单报废</option> </select> </div> <label class="control-label col-xs-1" for="sel_search_orderstatus2">disabled Select</label> <div class="col-xs-2" style="margin-top:7px;"> <select id="sel_search_orderstatus2" style="width:150px" multiple="multiple"> <option value="0">未排产</option> <option value="5" selected="selected">已排产</option> <option value="10" selected="selected">已锁定</option> <option value="25" disabled="disabled">在制</option> <option value="20" disabled="disabled">订单提交</option> <option value="30" disabled="disabled" selected="selected">订单删除</option> <option value="50">订单报废</option> </select> </div> <label class="control-label col-xs-1" for="sel_search_orderstatus3">分组</label> <div class="col-xs-2" style="margin-top:7px;"> <select id="sel_search_orderstatus3" style="width:150px" multiple="multiple"> <optgroup label="未上线"> <option value="0">未排产</option> </optgroup> <optgroup label="已上线"> <option value="5">已排产</option> <option value="10" selected="selected">已锁定</option> <option value="25" disabled="disabled">在制</option> <option value="20">订单提交</option> </optgroup> <optgroup label="异常"> <option value="30">订单删除</option> <option value="50">订单报废</option> </optgroup> </select> </div> </div> <div class="form-group"> <label class="control-label col-xs-1" for="sel_search_orderstatus4">单选</label> <div class="col-xs-2" style="margin-top:7px;"> <select id="sel_search_orderstatus4"> <option value="0">未排产</option> <option value="5">已排产</option> <option value="10">已锁定</option> <option value="25">在制</option> <option value="20">订单提交</option> <option value="30">订单删除</option> <option value="50">订单报废</option> </select> </div> <label class="control-label col-xs-1" for="sel_search_orderstatus5">筛选</label> <div class="col-xs-2" style="margin-top:7px;"> <select id="sel_search_orderstatus5" style="width:150px" multiple="multiple"> <option value="0">未排产</option> <option value="5">已排产</option> <option value="10">已锁定</option> <option value="25">在制</option> <option value="20">订单提交</option> <option value="30">订单删除</option> <option value="50">订单报废</option> </select> </div> <label class="control-label col-xs-1" for="sel_search_orderstatus">设置文本</label> <div class="col-xs-2" style="margin-top:7px;"> <select id="sel_search_orderstatus6" style="width:150px" multiple="multiple"> <option value="0">未排产</option> <option value="5">已排产</option> <option value="10">已锁定</option> <option value="25">在制</option> <option value="20">订单提交</option> <option value="30">订单删除</option> <option value="50">订单报废</option> </select> </div> </div> </form>
$(function () { $('#sel_search_orderstatus').multiselect(); $('#sel_search_orderstatus2').multiselect(); $('#sel_search_orderstatus3').multiselect({ enableCollapsibleOptGroups: true }); $('#sel_search_orderstatus4').multiselect(); $('#sel_search_orderstatus5').multiselect({ enableFiltering: true }); $('#sel_search_orderstatus6').multiselect({ nonSelectedText: '多项选择', nSelectedText: '项', allSelectedText: '所有项', selectAllText: '所有项' }); });
效果:
multiple-select组件:
@*Jquery*@ <script src="~/Scripts/jquery-1.10.2.min.js"></script> @*bootstrap*@ <script src="~/Content/bootstrap/js/bootstrap.min.js"></script> <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> @*multiple-select*@ <script src="~/Content/multiselect_wenzhixin/multiple-select-master/multiple-select.js"></script> <link href="~/Content/multiselect_wenzhixin/multiple-select-master/multiple-select.css" rel="stylesheet" />
<div class="panel-body" style="padding:0px;"> <div class="panel panel-default"> <div class="panel-heading">查询条件</div> <div class="panel-body"> <form id="formSearch" class="form-horizontal"> <div class="form-group"> <label class="control-label col-xs-1">原始Select</label> <div class="col-xs-2" style="margin-top:7px;"> <select style="width:150px" multiple="multiple"> <option value="0">未排产</option> <option value="5">已排产</option> <option value="10">已锁定</option> <option value="25">在制</option> <option value="20">订单提交</option> <option value="30">订单删除</option> <option value="50">订单报废</option> </select> </div> <label class="control-label col-xs-1" for="sel_search_orderstatus">多选站点</label> <div class="col-xs-2" style="margin-top:7px;"> <select id="sel_search_orderstatus" style="width:150px" multiple="multiple"> <option value="0">未排产</option> <option value="5">已排产</option> <option value="10">已锁定</option> <option value="25">在制</option> <option value="20">订单提交</option> <option value="30">订单删除</option> <option value="50">订单报废</option> </select> </div> <label class="control-label col-xs-1" for="sel_search_orderstatus2">disabled Select</label> <div class="col-xs-2" style="margin-top:7px;"> <select id="sel_search_orderstatus2" style="width:150px" multiple="multiple"> <option value="0">未排产</option> <option value="5" selected="selected">已排产</option> <option value="10" selected="selected">已锁定</option> <option value="25" disabled="disabled">在制</option> <option value="20" disabled="disabled">订单提交</option> <option value="30" disabled="disabled" selected="selected">订单删除</option> <option value="50">订单报废</option> </select> </div> <label class="control-label col-xs-1" for="sel_search_orderstatus3">分组</label> <div class="col-xs-2" style="margin-top:7px;"> <select id="sel_search_orderstatus3" style="width:150px" multiple="multiple"> <optgroup label="未上线"> <option value="0">未排产</option> </optgroup> <optgroup label="已上线"> <option value="5">已排产</option> <option value="10">已锁定</option> <option value="25">在制</option> <option value="20">订单提交</option> </optgroup> <optgroup label="异常"> <option value="30">订单删除</option> <option value="50">订单报废</option> </optgroup> </select> </div> </div> <div class="form-group"> <label class="control-label col-xs-1" for="sel_search_orderstatus4">单选</label> <div class="col-xs-2" style="margin-top:7px;"> <select id="sel_search_orderstatus4" style="width:150px" multiple="multiple"> <option value="0">未排产</option> <option value="5">已排产</option> <option value="10">已锁定</option> <option value="25">在制</option> <option value="20">订单提交</option> <option value="30">订单删除</option> <option value="50">订单报废</option> </select> </div> <label class="control-label col-xs-1" for="sel_search_orderstatus5">筛选</label> <div class="col-xs-2" style="margin-top:7px;"> <select id="sel_search_orderstatus5" style="width:150px" multiple="multiple"> <option value="0">未排产</option> <option value="5">已排产</option> <option value="10">已锁定</option> <option value="25">在制</option> <option value="20">订单提交</option> <option value="30">订单删除</option> <option value="50">订单报废</option> </select> </div> </div> </form> </div> </div> </div>
$(function () { $('#sel_search_orderstatus').multipleSelect(); $('#sel_search_orderstatus2').multipleSelect(); $('#sel_search_orderstatus3').multipleSelect({ placeholder: "请选择" }); $('#sel_search_orderstatus4').multipleSelect({ placeholder: "请选择", single: true }); $('#sel_search_orderstatus5').multipleSelect({ placeholder: "请选择", filter: true }); })
组件效果:
比较重要的参数说明:
isOpen
类型: boolean是否打开下拉列表。
默认值为
false。
placeholder
类型: string显示默认的提示信息。
默认值为
''。
selectAll
类型: boolean是否显示全选复选框。
默认值为
true。
selectAllText
类型: string全选复选框的显示内容。
默认值为
Select all。
multiple
类型: boolean是否在一行中显示多个选项。
默认值为
false。
multipleWidth
类型: integer一行中每个选项的宽度。
默认值为
80。
single
类型: boolean是否只允许你选择一行。
默认值为
false。
position
类型: string定义下拉列表的位置,只能是
bottom或者
top。
默认值为
bottom.
filter
类型: boolean是否开启过滤功能。
默认值为
false。
width
类型: integer定义下拉列表的宽度。
默认值为
undefined。 默认与 select 的宽度相同。
maxHeight
类型: integer下拉列表的最大高度。
默认值为
250。
常用事件:
onOpen
当下拉列表被打开时触发。onClose
当下拉列表被关闭时触发。onCheckAll
点击全选或者调用 “checkall” 方法时触发。onUncheckAll
点击全不选或者调用 “uncheckall” 方法时触发。onOptgroupClick
点击分组时触发。onClick
点击一个复选框时触发常用方法:
getSelects
获取 Multiple Select 选择内容。参数: type
类型: string
选择内容的类型,value 或者 text。
默认值为
value。
setSelects
设置 Multiple Select 的内容。参数: values
类型: array
选择框的内容信息。
enable
启用 Multiple Select。disable
禁用 Multiple Select。在这种模式下,不允许用户操作。checkAll
全选所有的复选框。$('select').multipleSelect('checkAll');
uncheckAll
全不选所有的复选框。$('select').multipleSelect('uncheckAll');
refresh
重新加载 Multiple Select。假如你是通过 AJAX 或者 DOM 来手动添加或者删除 option 选项,可以通过 refresh 方法来重新加载 Multiple Select。
第一个组件是写bootstrap table的主人公 wenzhixin 封装的一个组件—— multiple-select。这个组件风格简单、文档全、功能强大。但是觉得它选中的效果不太好。关于它的效果展示,我们放在后面。还是给出对应的文档API。
Multiple-Select源码主页: https://github.com/wenzhixin/multiple-select
Multiple-Select文档以及Demo: http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN
2、第二个组件也是在github上面找的—— bootstrap-multiselect 。这个组件风格和第一个非常相似,文档也挺全面。
bootstrap-multiselect源码主页: https://github.com/davidstutz/bootstrap-multiselect
bootstrap-multiselect文档以及Demo: http://davidstutz.github.io/bootstrap-multiselect/
Bootstrap-select多选下拉框实现 :http://www.cnblogs.com/anny0404/p/5329960.html
jQuery multiselect: http://loudev.com/
JS组件系列——Bootstrap Select2组件 (http://www.tuicool.com/articles/nYVn22e)
一、组件说明以及API说明
Select2使用示例地址: https://select2.github.io/examples.htmlSelect2参数文档说明: https://select2.github.io/options.html
Select2源码: https://github.com/select2/select2
相关文章推荐
- bootstrap兼容IE8的一些注意
- knockout+bootstrap--一些复杂的应用合集
- 引用bootstrap框架
- Bootstrap之表单控件状态
- 每日一bootstrap 按钮
- 修复bootstrap daterangepicker不能清空日期的问题
- 手把手教你制作easyUI+bootstrap工作站,主要学习tabs方法
- Bootstrap时间控件
- 十二.通过bootstrap的modal.js来完成删除功能
- WEB-laydate兼容bootstrap样式错误
- bootstrap数字控件
- 关于bootstrap datetimepicker位置显示错误的bug修复
- Bootstrap:常用的排版风格
- 关于bootstrap datetimepicker 的学习笔记
- JavaEE框架Bootstrap、HTML5、jQuery、SpringMVC
- Bootstrap 旋转轮播
- Bootstrap 折叠
- Bootstrap 网格系统 介绍
- Bootstrap 弹出框
- Bootstrap 提示框