Bootstarp-switch(动画开关插件)

Posted 2020-09-28 wangwf

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Bootstarp-switch(动画开关插件)相关的知识，希望对你有一定的参考价值。

bootstarp-switch（动画开关插件）

废话不多说简单，方便还是挺不错的，代码如下：

　　1.引入必要 css/js 文件

1     <!--引入 bootstrap 样式-->
2     <link href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
3     <!--引入 bootstrap-switch 插件样式-->
4     <link href="static/bootstrap-3.3.7-dist/switch/bootstrap-switch.min.css" rel="stylesheet" />
5     <script src="static/js/jquery.min.js"></script>
6     <!--引入 bootstrap 脚本-->
7     <script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
8     <!--引入 bootstrap-switch 插件脚本-->
9     <script src="static/bootstrap-3.3.7-dist/switch/bootstrap-switch.min.js"></script>

　　2.html代码

1 <body>
2     <form id="form1" runat="server">
3         <div class="container">
4             <input name="status" type="checkbox" data-size="small" />
5         </div>
6     </form>
7 </body>

　　3.js实现开关控件的初始化

 1     <script type="text/javascript">
 2         $(document).ready(function () {
 3             $(\'[name="status"]\').bootstrapSwitch({
 4                 onText: "ON",
 5                 offText: "OFF",
 6                 onColor: "success",
 7                 offColor: "info",
 8                 size: "small",
 9                 onSwitchChange: function (event, state) {
10                     if (state == true) {
11                         //成功
12                     } else {
13                         //失败
14                     }
15                 }
16             })
17         });
18     </script>

　　4.效果图

bootstrap-switch属性

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

以上是关于Bootstarp-switch(动画开关插件)的主要内容，如果未能解决你的问题，请参考以下文章

Android 系统 Framework 中定制实现开关机动画实践

android 开关机动画

JavaScript开关中的幻灯片动画不一致