zoukankan      html  css  js  c++  java
  • Bootstrap Multiselect

    1. Link the Required Files

      First, the jQuery library needs to be included. Then Twitter Bootstrap - both the Javascript library and the CSS stylesheet - needs to be included.

      1. <!-- Include Twitter Bootstrap and jQuery: -->
      2. <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
      3. <script type="text/javascript" src="js/jquery.min.js"></script>
      4. <script type="text/javascript" src="js/bootstrap.min.js"></script>
      5.  
      6. <!-- Include the plugin's CSS and JS: -->
      7. <script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
      8. <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>

      The jQuery library can also be included using a CDN, for example the Google CDN:

      1. <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

      Note that the plugin will work both with version 2.x of the jQuery library as well as with version 1.10.x of the jQuery library. So for using the Google CDN you may have to adjust the version.

    2. Create a Select

      Now simply use HTML to create your select input which you want to turn into a multiselect. Remember to set the multipleattribute as to get a real multiselect - but do not worry, the plugin can also be used as usual select without the multipleattribute being present.

      1. <!-- Build your select: -->
      2. <select id="example-getting-started" multiple="multiple">
      3. <option value="cheese">Cheese</option>
      4. <option value="tomatoes">Tomatoes</option>
      5. <option value="mozarella">Mozzarella</option>
      6. <option value="mushrooms">Mushrooms</option>
      7. <option value="pepperoni">Pepperoni</option>
      8. <option value="onions">Onions</option>
      9. </select>
    3. Call the Plugin

      In the end, simply call the plugin on your select. You may also specify further options, see the Options tab for further information.

      1. <!-- Initialize the plugin: -->
      2. <script type="text/javascript">
      3. $(document).ready(function() {
      4. $('#example-getting-started').multiselect();
      5. });
      6. </script>
  • 相关阅读:
    宝宝咳嗽
    如何查看 oracle 官方文档
    00 序 建立环境
    09 变量重游
    【TYVJ】1359
    【COGS】147. [USACO Jan08] 架设电话线(二分+spfa)
    【wikioi】1904 最小路径覆盖问题(最大流+坑人的题+最小路径覆盖)
    【wikioi】1034 家园(最大流+特殊的技巧)
    【BZOJ】1040: [ZJOI2008]骑士(环套树dp)
    【POJ】2234 Matches Game(博弈论)
  • 原文地址:https://www.cnblogs.com/telwanggs/p/9247064.html
Copyright © 2011-2022 走看看