首页 > 代码库 > Bootstarp-switch(动画开关插件)

Bootstarp-switch(动画开关插件)

2024-10-29 06:25:02   211人阅读

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 &nbsp;
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(动画开关插件)


联系
我们