本文摘自PHP中文网,作者angryTom,侵删。
bootstrapSwitch是一个很美观的切换控件,官网上对它的介绍也很详细。下面通过几个demo快速上手bootstrapSwitch。
如果你想了解更多关于bootstrap的知识,可以点击:bootstrap教程
首先,引用相应的js和css文件,把checkbox放进class为“switch”的div中,再在js中初始化
1 | $('#mySwitch input').bootstrapSwitch();
|
就可以使用bootstrapSwitch了。
其中input有两个属性 data-on-text
和data-off-text
,分别为切换时显示的文字,这里设置为YES和NO。代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" >
< title >this is a bootstrap-switch test</ title >
< script src = "jquery-2.2.4.js" ></ script >
< script src = "bootstrap.js" ></ script >
< script src = "bootstrap-switch.js" ></ script >
< link rel = "stylesheet" type = "text/css" href = "bootstrap.css" />
< link rel = "stylesheet" type = "text/css" href = "bootstrap-switch.css" />
< script type = "text/javascript" >
$(function(){
$('#mySwitch input').bootstrapSwitch();
})
</ script >
</ head >
< body >
< div id = "mySwitch" >
< input type = "checkbox" checked data-on-text = "YES" data-off-text = "NO" />
</ div >
</ body >
</ html >
|
也可以用js设置这两个属性,选中input元素后,通过方法bootstrapSwitch({attribute:value})
修改属性。代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" >
< title >this is a bootstrap-switch test</ title >
< script src = "jquery-2.2.4.js" ></ script >
< script src = "bootstrap.js" ></ script >
< script src = "bootstrap-switch.js" ></ script >
< link rel = "stylesheet" type = "text/css" href = "bootstrap.css" />
< link rel = "stylesheet" type = "text/css" href = "bootstrap-switch.css" />
< script type = "text/javascript" >
$(function(){
$('#mySwitch input').bootstrapSwitch({
onText:'On',
offText:'Off'
});
})
</ script >
</ head >
< body >
< br >
< div id = "mySwitch" >
< input type = "checkbox" checked data-on-text = "YES" data-off-text = "NO" />
</ div >
</ body >
|
以上就是bootstrap-switch如何设置初始值的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
bootstrap怎么实现响应式布局
jquery框架和bootstrap框架区别
如何解决bootstrap导航条不跳转的问题
bootstrap是框架吗
简述为什么要使用bootstrap,有什么优点
bootstrap ace是什么
bootstrap3和4有什么区别
bootstrap 输入框只读的设置方法
bootstrap用什么开发工具
深入了解bootstrap中的弹出框
更多相关阅读请进入《bootstrap》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » bootstrap-switch如何设置初始值