开关控件

AuxUI 概览，下载、使用，模板示例，二次开发……

需要加载form模块，可通过下列方式加载

    //加载form模块
    auxui(['form'], function (){
        $('[data-toggle="switch"]').switch(options);
    });

实例

通过 data 属性：可设置对应的属性值，只需在标签添加 data-onText="开" 即可。

<!--  通过DATA属性设置 -->
<input id="switch14" data-toggle="switch" data-onText="开" data-offText="关" data-skin="strengthen" type="radio" />

<script type="text/javascript">
auxui(['form'], function (){

  $('#switch14').switch();

}); </script>

默认

<!-- html -->
<input id="switch1" data-toggle="switch" type="radio" />

<!-- js -->
<script type="text/javascript">
auxui(['form'], function (){

  $('#switch1').switch();

}); </script>

尺寸

<!-- html -->
<input id="switch2" data-toggle="switch" type="radio" />
<input id="switch3" data-toggle="switch" type="radio" />
<input id="switch4" data-toggle="switch" type="radio" />
<input id="switch5" data-toggle="switch" type="radio" />

<!-- js -->
<script type="text/javascript">
auxui(['form'], function (){

  $('#switch2').switch({size : 'lg'});
  $('#switch3').switch();
  $('#switch4').switch({size : 'sm'});
  $('#switch5').switch({size : 'xs'});

}); </script>

颜色

<!-- html -->
<input id="switch6" data-toggle="switch" type="radio" />
<input id="switch7" data-toggle="switch" type="radio" />
<input id="switch8" data-toggle="switch" type="radio" />
<input id="switch9" data-toggle="switch" type="radio" />
<input id="switch10" data-toggle="switch" type="radio" />
<input id="switch11" data-toggle="switch" type="radio" />

<!-- js -->
<script type="text/javascript">
auxui(['form'], function (){

  $('#switch6').switch({action : true, skin : 'primary'});
  $('#switch7').switch({action : true, skin : 'success'});
  $('#switch8').switch({action : true, skin : 'info'});
  $('#switch9').switch({action : true, skin : 'warning'});
  $('#switch10').switch({action : true, skin : 'danger'});
  $('#switch11').switch({action : true, skin : 'strengthen'});

}); </script>

禁用

<!-- html -->
<input id="switch12" data-toggle="switch" type="radio" />

<!-- js -->
<script type="text/javascript">
auxui(['form'], function (){

  $('#switch12').switch({ action : true, disabled : true });

}); </script>

选项

名称	类型/默认值	Data 属性名称	描述
onText	string 默认值：ON	data-onText	开关文本
offText	string 默认值：OFF	data-offText	开关文本
skin	string 默认值：info	data-skin	开关颜色可选：`primary`、`success`、`info`、`warning`、`danger`、`strengthen`
action	boolean 默认值：false	data-action	切换状态
disabled	boolean 默认值：false	data-disabled	禁用
size	string 默认值：null	data-size	开关大小可选：`lg`、`sm`、`xs`

方法

名称	类型	描述
onText	string	开关文本
offText	string	开关文本
skin	string	开关颜色可选：`primary`、`success`、`info`、`warning`、`danger`、`strengthen`
action	boolean	切换状态
disabled	boolean	禁用
size	string	开关大小可选：`lg`、`sm`、`xs`


$('#switch1').switch('size', 'lg');

$('#switch1').switch('action', false);

事件

事件类型	描述
switch-change	状态改变时触发

$(document).on('switch-change', function (e,data) {
    console.log(data);
});