- Bootstrap Switch开关控件网址:http://www.bootcss.com/p/bootstrap-switch/
- 引入.
Bootstrap Switch插件和依赖插件,并初始化开关控件<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Bootstrap Switch 开关控件</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/bootstrap-switch.css"> <script type="text/javascript" src="js/jQuery.js"></script> <script type="text/javascript" src="js/bootstrap-switch.js"></script> <script type="text/javascript"> $(function(){ /*初始化开关控件*/ $('[name="checkbox-name"]').bootstrapSwitch(); }); </script> </head> <body> <div class="jumbotron"> <div class="container"> <input type="checkbox" name="checkbox-name" checked> </div> </div> </body> </html>Bootstrap Switch控件没有class自动加载渲染(初始化),只能通过js初始化方式渲染,如上例. - 属性.
在js中初始化开关控件时,可以指定配置项,如下例子
<script type="text/javascript"> $.fn.bootstrapSwitch.defaults.size = 'mini';//修改开光控件默认选项大小的值 $(function(){ /*初始化开关控件,指定配置项*/ $('[name="checkbox-name"]').bootstrapSwitch({ state:true,//勾选状态,对应checkbox的checked属性 size : 'large',//大小,默认为null(与normal大小相同),值可为null,'mini','small','normal','large' animate:false,//切换过程的动画,默认为true disabled : true,//禁用,对应checkbox的disabled属性,默认为false readonly : true,//只读,对应checkbox的readonly属性,默认为false indeterminate:true,//未选的,默认为false inverse:true,//开关方向 onColor:'danger',//表示选中文本的背景色,默认为'primary',值可为'primary','info','success','warning','danger','default' offColor:'info',//表示位选中文本的背景色,默认为'default',值可为'primary','info','success',warning','danger','default' onText:'喜欢',//选中文本,默认为'ON' offText:'再考虑吧',//未选中文本,默认为'OFF' labelText:'点击切换',//开关控件中间部分显示文本,默认为' ' handleWidth:50,//开关控件选中文本与未选中文本的长度,默认为'auto' labelWidth:0,//开关控件中间部分显示文本的长度,默认为'auto' baseClass:'bootstrap-switch',//开关控件全局class的前缀,默认为'bootstrap-switch', wrapperClass:['custom-wrapper','wrapper'],//开关控件最外层容器的样式类,值可为数组或字符串,默认为'wrapper' onInit:function(element,event,state){//控件初始化时触发 console.log('onInit:'); console.log(this);//开关控件的jQuery对象 console.log(element);//checkbox的DOM elememt元素 console.log(event);//jQuery事件 console.log(state);//开关的初始化选中状态 }, onSwitchChange:function(event,state){//控件状态改变时触发 console.log('onSwitchChange:'); console.log(this);//checkbox的DOM elememt元素 console.log(event);//jQuery事件 console.log(state);//开关切换后的选中状态 } }); //以下是调用开关控件的方法 $('[name="checkbox-name"]').bootstrapSwitch('disabled',false); $('[name="checkbox-name"]').bootstrapSwitch('readonly',false); $('[name="checkbox-name"]').bootstrapSwitch('indeterminate',false); $('[name="checkbox-name"]').bootstrapSwitch('state',false); }); </script>
也可以在元素内指定配置项.在元素内指定配置项时,除checked,readonly,和disabled直接作为元素属性配置外,其它配置项是js配置项中对应配置项的驼峰方式改为'-'线方式并加'data-'前缀.如
<input type="checkbox" name="checkbox-name" checked data-on-color="danger" data-indeterminate="true" data-size="large"/> <div> /*data-radio-all-off对应的js配置项为radioAllOff,是radio元素特有的属性配置项,意思是同一组radio是否可以全不选*/ <input type="radio" name="radioName" data-radio-all-off="false"> <input type="radio" name="radioName" data-radio-all-off="true"> <input type="radio" name="radioName" data-radio-all-off="true"> </div>js方式和元素内同时指定同一个配置属性,js的优先级高.
- 事件.
<script type="text/javascript"> $(function(){ /*外部注册初始化时触发事件,需放在初始化开关控件前,否则触发不了*/ $('input[name="checkbox-name"]').on('init.bootstrapSwitch',function(event,state){ console.log('outer handler of init event:') console.log(this);//checkbox的DOM elememt元素 console.log(event);//jQuery事件 console.log(state);//开关切换后的选中状态 }); /*外部注册开关状态改变时触发事件,需放在开关控件改变状态方法前,否则第一次触发不了*/ $('input[name="checkbox-name"]').on('switchChange.bootstrapSwitch',function(event,state){ console.log('outer handler of switchChange event:') console.log(this);//checkbox的DOM elememt元素 console.log(event);//jQuery事件 console.log(state);//开关切换后的选中状态 }); /*初始化开关控件*/ $('[name="checkbox-name"]').bootstrapSwitch({ /*初始化时注册初始化时触发事件*/ onInit:function(element,event,state){//控件初始化时触发 console.log('onInit:'); console.log(this);//开关控件的jQuery对象 console.log(element);//checkbox的DOM elememt元素 console.log(event);//jQuery事件 console.log(state);//开关的初始化选中状态 }, /*初始化时注册状态改变时触发事件*/ onSwitchChange:function(event,state){//控件状态改变时触发 console.log('onSwitchChange:'); console.log(this);//checkbox的DOM elememt元素 console.log(event);//jQuery事件 console.log(state);//开关切换后的选中状态 } }); }); </script>多次注册事件相同事件,不会互相覆盖. - 方法
Bootstrap Switch控件中,属性即方法,如<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Bootstrap Switch 开关控件</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/bootstrap-switch.css"> <script type="text/javascript" src="js/jQuery.js"></script> <script type="text/javascript" src="js/bootstrap-switch.js"></script> <script type="text/javascript"> $(function(){ //初始化 $('[name="cb-name"]').bootstrapSwitch( onInit:function(element,event,state){//控件初始化时触发 console.log('onInit:'); console.log(this);//开关控件的jQuery对象 console.log(element);//checkbox的DOM elememt元素 console.log(event);//jQuery事件 console.log(state);//开关的初始化选中状态 }, onSwitchChange:function(event,state){//控件状态改变时触发 console.log('onSwitchChange:'); console.log(this);//checkbox的DOM elememt元素 console.log(event);//jQuery事件 console.log(state);//开关切换后的选中状态 } }); /*设置属性方法*/ //state方法第三个参数默认为false,设置为true时state值改变也不触发switchChange方法 $('[name="cb-name"]').bootstrapSwitch('state',false,true); $('[name="cb-name"]').bootstrapSwitch('size','large'); //animate虽然可设置值,但改变不了控件初始化动画状态 $('[name="cb-name"]').bootstrapSwitch('animate',true); $('[name="cb-name"]').bootstrapSwitch('disabled',true); $('[name="cb-name"]').bootstrapSwitch('readonly',true); $('[name="cb-name"]').bootstrapSwitch('indeterminate',true); $('[name="cb-name"]').bootstrapSwitch('inverse',true); $('[name="cb-name"]').bootstrapSwitch('onColor','info'); $('[name="cb-name"]').bootstrapSwitch('offColor','warning'); $('[name="cb-name"]').bootstrapSwitch('onText','恭喜'); $('[name="cb-name"]').bootstrapSwitch('offText','没选耶'); $('[name="cb-name"]').bootstrapSwitch('labelText','需切换么'); $('[name="cb-name"]').bootstrapSwitch('handleWidth',150); $('[name="cb-name"]').bootstrapSwitch('labelWidth','auto'); //baseClass只能取值,不能设值 $('[name="cb-name"]').bootstrapSwitch('baseClass','prefix'); //如果第二个参数的表达式的布尔值为false时,wrapperClass重置为默认值wrapper $('[name="cb-name"]').bootstrapSwitch('wrapperClass','second-checkbox-wrapper'); /*获取属性方法*/ console.log('state->' + $('[name="cb-name"]').bootstrapSwitch('state')); console.log('size->' + $('[name="cb-name"]').bootstrapSwitch('size')); console.log('animate->' + $('[name="cb-name"]').bootstrapSwitch('animate')); console.log('disabled->' + $('[name="cb-name"]').bootstrapSwitch('disabled')); console.log('readonly->' + $('[name="cb-name"]').bootstrapSwitch('readonly')); console.log('indeterminate->' + $('[name="cb-name"]').bootstrapSwitch('indeterminate')); console.log('inverse->' + $('[name="cb-name"]').bootstrapSwitch('inverse')); console.log('onColor->' + $('[name="cb-name"]').bootstrapSwitch('onColor')); console.log('offColor->' + $('[name="cb-name"]').bootstrapSwitch('offColor')); console.log('onText->' + $('[name="cb-name"]').bootstrapSwitch('onText')); console.log('offText->' + $('[name="cb-name"]').bootstrapSwitch('offText')); console.log('labelText->' + $('[name="cb-name"]').bootstrapSwitch('labelText')); console.log('handleWidth->' + $('[name="cb-name"]').bootstrapSwitch('handleWidth')); console.log('labelWidth->' + $('[name="cb-name"]').bootstrapSwitch('labelWidth')); console.log('baseClass->' + $('[name="cb-name"]').bootstrapSwitch('baseClass')); console.log('wrapperClass->' + $('[name="cb-name"]').bootstrapSwitch('wrapperClass')); $('#toggle').click(function(){ console.log('---------------------toggle-------------------'); /*除属性可作为方法外,还有补充其它方法*/ //toggleState方法第二个参数默认为false,设置为true时不触发switchChange方法 $('[name="cb-name"]').bootstrapSwitch('toggleState',true); $('[name="cb-name"]').bootstrapSwitch('toggleAnimate'); $('[name="cb-name"]').bootstrapSwitch('toggleDisabled'); $('[name="cb-name"]').bootstrapSwitch('toggleReadonly'); $('[name="cb-name"]').bootstrapSwitch('toggleIndeterminate'); $('[name="cb-name"]').bootstrapSwitch('toggleInverse'); /*切换后的属性值*/ console.log('state->' + $('[name="cb-name"]').bootstrapSwitch('state')); console.log('animate->' + $('[name="cb-name"]').bootstrapSwitch('animate')); console.log('disabled->' + $('[name="cb-name"]').bootstrapSwitch('disabled')); console.log('readonly->' + $('[name="cb-name"]').bootstrapSwitch('readonly')); console.log('indeterminate->' + $('[name="cb-name"]').bootstrapSwitch('indeterminate')); console.log('inverse->' + $('[name="cb-name"]').bootstrapSwitch('inverse')); }); //$('[name="cb-name"]').bootstrapSwitch('destroy'); }); </script> </head> <body> <div class="jumbotron"> <div class="container"> <input type="checkbox" name="cb-name"><button id="toggle">toggle</button> </div> </div> </body> </html>state方法的第三个参数skip与toggleState方法的第二个参数skip,默认为false,设置为true时,state属性的值改变不会触发switchChange事件
wrapperClass方法第二个参数的表达式的布尔值为false时,wrappClass重置为默认值wrapper
Bootstrap Switch 开关控件
猜你喜欢
转载自itnotesblog.iteye.com/blog/2379500
今日推荐
周排行