bootstrap-switch开关组件

你的名字 2022-05-14 07:23 476阅读 0赞

原文地址：[https://blog.csdn.net/mafan121/article/details/50402070][https_blog.csdn.net_mafan121_article_details_50402070]

最近在项目开发上遇到一个需要开关的地方，后来找了下angular-switch.js发觉样例太少，而且还需要翻墙去找，对于我这种英文菜鸟来说太麻烦了，所以选了个bootstrap-switch.js插件，发觉效果还可以。下面简单介绍下bootstrap-switch的使用。

需导入的文件

1.  `<script type="text/javascript" src="<%=request.getContextPath()%>/js/bootstrap-switch-master/dist/js/bootstrap-switch.min.js"></script>`
2.  `<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/bootstrap-switch-master/dist/css/bootstrap3/bootstrap-switch.min.css" />`
3.  `<pre name="code" class="html"><link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/bootstrap-switch-master/docs/js/jquery.min.js" />`

bootstrap文件可以到这里去下载：[http://www.bootstrap-switch.org/][http_www.bootstrap-switch.org]

html：

通过js来实现开关的初始化

1.  `$('[name="status"]').bootstrapSwitch({`
2.  `onText:"启动",`
3.  `offText:"停止",`
4.  `onColor:"success",`
5.  `offColor:"info",`
6.  `size:"small",`
7.  `onSwitchChange:function(event,state){`
8.  `if(state==true){`
9.  `$(this).val("1");`
10. `}else{`
11. `$(this).val("2");`
12. `}`
13. `}`
14. `})`

当然也可以直接将属性写在html中，下面罗列bootstrap-switch的属性及应用

<table>  bootstrap-switch属性  
 <tbody> 
  <tr> 
   <td>js属性名</td> 
   <td>html属性名</td> 
   <td>类型</td> 
   <td>描述</td> 
   <td>取值范围</td> 
   <td>默认值</td> 
  </tr> 
  <tr> 
   <td>state</td> 
   <td>checked</td> 
   <td>Boolean</td> 
   <td>选中状态</td> 
   <td>true、false</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>data-size</td> 
   <td>String</td> 
   <td>开关大小</td> 
   <td>null、mini、small、normal、large</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>animate</td> 
   <td>data-animate</td> 
   <td>Boolean</td> 
   <td>动画效果</td> 
   <td>true、false</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>disabled</td> 
   <td>Boolean</td> 
   <td>禁用开关</td> 
   <td>ture、false</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>readonly</td> 
   <td>readonly</td> 
   <td>Boolean</td> 
   <td>开关状态只读，不能修改</td> 
   <td>true、false</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>indeterminate</td> 
   <td>data-indeterminate</td> 
   <td>Boolean</td> 
   <td>模态</td> 
   <td>true、false</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>inverse</td> 
   <td>data-inverse</td> 
   <td>Boolean</td> 
   <td>颠倒开关顺序</td> 
   <td>true、false</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>radioAllOff</td> 
   <td>data-radio-all-off</td> 
   <td>Boolean</td> 
   <td>允许单选按钮被用户取消选中</td> 
   <td>true、false</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>onColor</td> 
   <td>data-on-color</td> 
   <td>String</td> 
   <td>左侧开关颜色</td> 
   <td>primary、info、success、warning、danger、default</td> 
   <td>primary</td> 
  </tr> 
  <tr> 
   <td>offColor</td> 
   <td>data-off-color</td> 
   <td>String</td> 
   <td>右侧开关颜色</td> 
   <td>primary、info、success、warning、danger、default</td> 
   <td>default</td> 
  </tr> 
  <tr> 
   <td>onText</td> 
   <td>data-on-text</td> 
   <td>String</td> 
   <td>左侧开关显示文本</td> 
   <td>String</td> 
   <td>ON</td> 
  </tr> 
  <tr> 
   <td>offText</td> 
   <td>data-off-text</td> 
   <td>String</td> 
   <td>右侧开关显示文本</td> 
   <td>String</td> 
   <td>OFF</td> 
  </tr> 
  <tr> 
   <td>labelText</td> 
   <td>data-label-text</td> 
   <td>String</td> 
   <td>开关中间显示文本</td> 
   <td>String</td> 
   <td>&amp;nbsp;</td> 
  </tr> 
  <tr> 
   <td>handleWidth</td> 
   <td>data-handle-width</td> 
   <td>String|Number</td> 
   <td>开关左右2侧的宽度</td> 
   <td>String|Number</td> 
   <td>auto</td> 
  </tr> 
  <tr> 
   <td>labelWidth</td> 
   <td>data-label-width</td> 
   <td>String|Number</td> 
   <td>开关中间的宽度</td> 
   <td>String|Number</td> 
   <td>auto</td> 
  </tr> 
  <tr> 
   <td>baseClass</td> 
   <td>data-base-class</td> 
   <td>String</td> 
   <td>开关基础样式</td> 
   <td>String</td> 
   <td>bootstrap-switch</td> 
  </tr> 
  <tr> 
   <td>wrapperClass</td> 
   <td>data-wrapper-class</td> 
   <td>String | Array</td> 
   <td>元素样式容器</td> 
   <td>String | Array</td> 
   <td>wrapper</td> 
  </tr> 
  <tr> 
   <td>onInit</td> 
   <td>&nbsp;</td> 
   <td>function</td> 
   <td>初始化开关</td> 
   <td>Function</td> 
   <td>function（event，state）｛｝</td> 
  </tr> 
  <tr> 
   <td>onSwitchChange</td> 
   <td>&nbsp;</td> 
   <td>function</td> 
   <td>当开关状态改变时触发</td> 
   <td>Function</td> 
   <td>function（event，state）｛｝</td> 
  </tr> 
 </tbody> 
</table>

覆盖全局默认值：

1.  `$.fn.bootstrapSwitch.defaults.size = 'large';`
2.  `$.fn.bootstrapSwitch.defaults.onColor = 'success';`

[https_blog.csdn.net_mafan121_article_details_50402070]: https://blog.csdn.net/mafan121/article/details/50402070
[http_www.bootstrap-switch.org]: http://www.bootstrap-switch.org/