Bootstrap switch.js 开关插件 api
https://blog.csdn.net/qq_26721111/article/details/52957368
需要引入的文件
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-switch.min.css" />
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/bootstrap-switch.min.js" ></script>
HTML元素
<input name="status" type="checkbox" data-size="small" id="status1" checked><br/><br/>
<button id="open">开</button>
<button id="close">关</button>
JS代码
$('[name="status"]').bootstrapSwitch({ //初始化按钮
onText:"照明",
offText:"熄灭",
onColor:"success",
offColor:"info",
size:"small",
onSwitchChange:function(event,state){
if(state==true){
$(this).val("1");
console.log("开启");
}else{
$(this).val("2");
console.log("关闭");
}
}
});
$("#close").click(function(){
$('[name="status"]').bootstrapSwitch('state', false); // 关闭按钮
});
$("#open").click(function(){
$('[name="status"]').bootstrapSwitch('state', true); // 打开按钮
});
效果
-------下面是转载的Api--------------
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 | |
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){} |