bootstrap-select基本用法(下篇)

原创 Laughing  2017-07-26 01:10  阅读 887 次 评论 0 条

承接

,我们继续探究bootstrap-select的一些更深层次的用法

设置选中值的格式

通过count属性,设置显示内容为选中项的数目

  1. <!--  
  2.             作者:iamlisen@163.com  
  3.             时间:2017-07-25  
  4.             描述:设置选中内容展示格式  
  5.         -->  
  6.         <div class="form-group">  
  7.         <div class="panel-heading">  
  8.             <span class="glyphicon glyphicon-search">显示选中数目</span>  
  9.             <!--  
  10.                 作者:iamlisen@163.com  
  11.                 时间:2017-07-26  
  12.                 描述:如果选中了一条,显示选中的内容,如果选中多条,显示选中条数  
  13.             -->  
  14.         </div>  
  15.         <div class="panel-body">  
  16.             <select class="selectpicker" multiple="true" data-selected-text-format="count">  
  17.             <option value="0">橘子</option>  
  18.             <option value="1">苹果</option>  
  19.             <option value="2">香蕉</option>  
  20.         </select>  
  21.         </div>  
  22.         </div>  
设置显示内容为选中项的内容

  1. <div class="form-group">  
  2. <div class="panel-heading">  
  3.     <span class="glyphicon glyphicon-search">显示选中项的内容</span>  
  4. </div>  
  5. <div class="panel-body">  
  6.     <select class="selectpicker" multiple="true" data-selected-text-format="value">  
  7.     <option value="0">橘子</option>  
  8.     <option value="1">苹果</option>  
  9.     <option value="2">香蕉</option>  
  10. </select>  
  11. </div>  
  12. </div>  
设置由显示选中项的值到显示条数到改变
  1. <div class="form-group">  
  2. <div class="panel-heading">  
  3.     <span class="glyphicon glyphicon-search">count > x</span>  
  4.     <!--  
  5.             作者:iamlisen@163.com  
  6.             时间:2017-07-26  
  7.             描述:当选中条数大于设置的x值时,由显示选中项的内容,变为显示条数  
  8.           -->  
  9. </div>  
  10. <div class="panel-body">  
  11.     <select class="selectpicker" multiple="true" data-selected-text-format="count>3">  
  12.     <option value="0">橘子</option>  
  13.     <option value="1">苹果</option>  
  14.     <option value="2">香蕉</option>  
  15.     <option value="3">芒果</option>  
  16. </select>  
  17. </div>  
  18. </div>  
设置显示静态内容
  1. <div class="form-group">  
  2. <div class="panel-heading">  
  3.     <span class="glyphicon glyphicon-search">只显示默认title</span>  
  4.     <!--  
  5.             作者:iamlisen@163.com  
  6.             时间:2017-07-26  
  7.             描述:内容不跟随选中项发生改变  
  8.           -->  
  9. </div>  
  10. <div class="panel-body">  
  11.     <select class="selectpicker" multiple="true" data-selected-text-format="static" title="我不会改变">  
  12.     <option value="0">橘子</option>  
  13.     <option value="1">苹果</option>  
  14.     <option value="2">香蕉</option>  
  15.     <option value="3">芒果</option>  
  16. </select>  
  17. </div>  
  18. </div>  

设置全选/全不选按钮

  1. <div class="form-group">  
  2.             <div class="panel-heading">  
  3.                 <span class="glyphicon glyphicon-search">只显示默认title</span>  
  4.             </div>  
  5.             <div class="panel-body">  
  6.                 <select class="selectpicker" multiple="true" data-style="btn-success" data-actions-box="true">  
  7.                     <option value="0" class="special">橘子</option>  
  8.                     <option value="1" style="color: #008000;">苹果</option>  
  9.                     <option value="2" data-icon="glyphicon-heart">香蕉</option>  
  10.                     <option value="3" data-content="<span class='label label-success'>芒果</span>">芒果</option>  
  11.                 </select>  
  12.             </div>  
  13.         </div>  

设置分割线

  1. <div class="form-group">  
  2.             <div class="panel-heading">  
  3.                 <span class="glyphicon glyphicon-search">设置分割线</span>  
  4.             </div>  
  5.             <div class="panel-body">  
  6.                 <select class="selectpicker" multiple="true" data-style="btn-success" data-actions-box="true">  
  7.                     <option value="0" class="special">橘子</option>  
  8.                     <option value="1" style="color: #008000;">苹果</option>  
  9.                     <option data-divider="true"></option>  
  10.                     <option value="2" data-icon="glyphicon-heart">香蕉</option>  
  11.                     <option value="3" data-content="<span class='label label-success'>芒果</span>">芒果</option>  
  12.                 </select>  
  13.             </div>  
  14.         </div>  

设置选择项不可用

  1. <div class="form-group">  
  2.             <div class="panel-heading">  
  3.                 <span class="glyphicon glyphicon-search">设置选择项是否可用</span>  
  4.             </div>  
  5.             <div class="panel-body">  
  6.                 <select class="selectpicker" multiple="true" data-style="btn-success" data-actions-box="true">  
  7.                     <option value="0" class="special" disabled>橘子</option>  
  8.                     <option value="1" style="color: #008000;">苹果</option>  
  9.                     <option data-divider="true"></option>  
  10.                     <option value="2" data-icon="glyphicon-heart">香蕉</option>  
  11.                     <option value="3" data-content="<span class='label label-success'>芒果</span>">芒果</option>  
  12.                 </select>  
  13.             </div>  
  14.         </div>  
本文地址:https://www.lisen.me/the-bootstrap-select-basic-usage-next.html
版权声明:本文为原创文章,版权归 木子网 所有,欢迎分享本文,转载请保留出处!

发表评论


表情