[置顶] Bootstrap Multiselect插件使用步骤以及常见参数配置介绍
2017-07-08 16:16
681 查看
Multiselect是基于jQuery插件的,它可以以下拉列表的形式为用户提供选择内容,能进行单选或者多选。它应用的主要步骤如下:
一,引入需要的相关js和css文件
既然是Bootstrap插件,又是基于jQuery的,很明显主要就导入这两个类型的文件
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>
二,创建一个下拉列表
创建的下拉列表格式如下:
<select id="test" multiple="multiple">
<option value="1">Cheese</option>
<option value="2">Tomatoes</option>
<option value="3">Mozzarella</option>
<option value="4">Mushrooms</option>
<option value="5">Pepperoni</option>
<option value="6">Onions</option>
</select>
三,应用这个插件
<script type="text/javascript">
$(document).ready(function() {
$('#test').multiselect();
});
</script>
得到的结果如下图所示:
这样就可以进行选择了。当然如果去掉属性multiple="multiple",那么 就变成了一个单选的下拉列表
<script type="text/javascript">
$('#example-single').multiselect();
</script>
<!-- Note the missing multiple attribute! -->
<select id="example-single">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
得到的效果如下:
以上这些是最基本的情况。如果想要深入的知道该如何应用,那么我们就需要知道它的一些相应的参数配置。
四,参数配置说明
1 multiple
当有这个属性的时候,下拉列表可以进行多选,反之,则只能进行单选
2 enableClickableOptGroups
当配置这个属性后,则可以进行分类别或者说分组
只需要配置如下:
<script type="text/javascript">
$(document).ready(function() {
$('#example-enableClickableOptGroups').multiselect({
enableClickableOptGroups: true
});
});
</script>
注:example-enableClickableOptGroups表示的是,这个select的id。后面的亦然。
3 enableCollapsibleOptGroups
设置这个属性后,下拉列表就可以进行折叠使用。
需要配置为:
<script type="text/javascript">
$(document).ready(function() {
$('#example-enableClickableOptGroups').multiselect({
enableCollapsibleOptGroups: true
});
});
</script>
4 maxHeight 设置最大高度
这个的话,用来设置下拉列表的最大高度,当超过这个最大高度的话,那么就会出现滚动条
5 nonSelectedText 设置选择下拉列表的提示语
当下拉列表没有进行选择的时候,可以使用该属性来设置提示语。
例如上图中,设置提示语为Check an option!
6 numberDisplayed 设置输入框中展示下拉列表中的内容个数
在这个插件里面,默认展示的个数是3
7 enableFiltering 在下拉列表上设置一个搜索框
当设置enableFiltering 为true时,下拉列表会出现一个搜索输入框,能进行内容的搜索
8 includeSelectAllOption 设置全选
9 selectAllName 设置全选名 默认为select-all
8和9一般是联合起来使用,使用效果如下所示:
一,引入需要的相关js和css文件
既然是Bootstrap插件,又是基于jQuery的,很明显主要就导入这两个类型的文件
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>
二,创建一个下拉列表
创建的下拉列表格式如下:
<select id="test" multiple="multiple">
<option value="1">Cheese</option>
<option value="2">Tomatoes</option>
<option value="3">Mozzarella</option>
<option value="4">Mushrooms</option>
<option value="5">Pepperoni</option>
<option value="6">Onions</option>
</select>
三,应用这个插件
<script type="text/javascript">
$(document).ready(function() {
$('#test').multiselect();
});
</script>
得到的结果如下图所示:
这样就可以进行选择了。当然如果去掉属性multiple="multiple",那么 就变成了一个单选的下拉列表
<script type="text/javascript">
$('#example-single').multiselect();
</script>
<!-- Note the missing multiple attribute! -->
<select id="example-single">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
得到的效果如下:
以上这些是最基本的情况。如果想要深入的知道该如何应用,那么我们就需要知道它的一些相应的参数配置。
四,参数配置说明
1 multiple
当有这个属性的时候,下拉列表可以进行多选,反之,则只能进行单选
2 enableClickableOptGroups
当配置这个属性后,则可以进行分类别或者说分组
只需要配置如下:
<script type="text/javascript">
$(document).ready(function() {
$('#example-enableClickableOptGroups').multiselect({
enableClickableOptGroups: true
});
});
</script>
注:example-enableClickableOptGroups表示的是,这个select的id。后面的亦然。
3 enableCollapsibleOptGroups
设置这个属性后,下拉列表就可以进行折叠使用。
需要配置为:
<script type="text/javascript">
$(document).ready(function() {
$('#example-enableClickableOptGroups').multiselect({
enableCollapsibleOptGroups: true
});
});
</script>
4 maxHeight 设置最大高度
这个的话,用来设置下拉列表的最大高度,当超过这个最大高度的话,那么就会出现滚动条
5 nonSelectedText 设置选择下拉列表的提示语
当下拉列表没有进行选择的时候,可以使用该属性来设置提示语。
例如上图中,设置提示语为Check an option!
6 numberDisplayed 设置输入框中展示下拉列表中的内容个数
在这个插件里面,默认展示的个数是3
7 enableFiltering 在下拉列表上设置一个搜索框
当设置enableFiltering 为true时,下拉列表会出现一个搜索输入框,能进行内容的搜索
8 includeSelectAllOption 设置全选
9 selectAllName 设置全选名 默认为select-all
8和9一般是联合起来使用,使用效果如下所示:
相关文章推荐
- eclipse 使用maven插件的配置,以及常见问题的结局方式
- jQuery 插件取url参数[jquery.url.js]的使用以及文件下载
- (转)eclipse 启动参数介绍(如添加插件时,如果不显示,则使用eclipse -clean启动)
- DBCP,C3P0,Proxool,BoneCP详细参数介绍 以及 Hibernate配置数据库连接池的三种方式介绍
- Tomcat服务器的介绍以及配置、使用
- log4j配置文件内容详解,以及使用步骤
- 交换机Vlan介绍 以太网端口链路类型介绍 交换机trunk属性使用介绍 数据配置步骤
- PaodingAnalyzer使用方法以及配置步骤
- gvim插件以及使用配置文件
- [置顶] 在MyEclipse中制作和使用SSH配置文件提示插件
- (转)eclipse 启动参数介绍(如添加插件时,如果不显示,则使用eclipse -clean启动)
- python 装饰器功能以及函数参数使用介绍
- nginx 常见参数以及重定向参数配置
- Vs2012配置库路径以及插件的使用
- svn服务安装和配置 以及搭配Eclips插件使用(总结)
- Tomcat7.0中配置DBCP连接池以及连接池参数介绍
- CKEditor 的使用方法以及参数配置
- 如何配置基于eclipse的easy structs插件,并介绍了如何结合使用easy structs和eclipes来开发struts的应用
- jQuery 插件取url参数[jquery.url.js]的使用以及文件下载
- nginx 常见参数以及重定向参数配置