zoukankan      html  css  js  c++  java
  • Bootstrap Multiselect插件使用步骤以及常见参数配置介绍

        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一般是联合起来使用,使用效果如下所示:





  • 相关阅读:
    智器SmartQ T7实体店试用体验
    BI笔记之SSAS库Process的几种方案
    PowerTip of the Day from powershell.com上周汇总(八)
    PowerTip of the Day2010071420100716 summary
    PowerTip of the Day from powershell.com上周汇总(十)
    PowerTip of the Day from powershell.com上周汇总(六)
    重新整理Cellset转Datatable
    自动加密web.config配置节批处理
    与DotNet数据对象结合的自定义数据对象设计 (二) 数据集合与DataTable
    在VS2003中以ClassLibrary工程的方式管理Web工程.
  • 原文地址:https://www.cnblogs.com/cmderq/p/9130813.html
Copyright © 2011-2022 走看看