Bootstrap Switch 开关控件

colin_zhuo

浏览: 32805 次
性别:
来自: 深圳

最近访客更多访客>>

ismezy

ln_lz

zty461217

wangyudong

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

bootstrapSwitch

BootStrap Switch

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:'点击切换',//开关控件中间部分显示文本,默认为'&nbsp;'
		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

分享到：