<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bootstrap 开关按钮</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-switch.css">
</head>
<body>
<input id="switch-size" type="checkbox" checked data-size="mini" name="status">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-switch.js"></script>
<script type="text/javascript">
$('[name="status"]').bootstrapSwitch({
onSwitchChange:function(event,state){
if(state==true){
alert('已打开');
}else{
alert('已关闭');
}
}
})
</script>
</body>
</html>
bootstrap-switch属性
js属性名 | html属性名 | 类型 | 描述 | 取值范围 |
---|
state | checked | Boolean | 选中状态 | true、false |
size | data-size | String | 开关大小 | null、mini、small、normal、large |
animate | data-animate | Boolean | 动画效果 | true、false |
disabled | disabled | Boolean | 禁用开关 | ture、false |
readonly | readonly | Boolean | 开关状态只读,不能修改 | true、false |
indeterminate | data-indeterminate | Boolean | 模态 | true、false |
inverse | data-inverse | Boolean | 颠倒开关顺序 | true、false |
radioAllOff | data-radio-all-off | Boolean | 允许单选按钮被用户取消选中 | true、false |
onColor | data-on-color | String | 左侧开关颜色 | primary、info、success、warning、danger、default |
offColor | data-off-color | String | 右侧开关颜色 | primary、info、success、warning、danger、default |
onText | data-on-text | String | 左侧开关显示文本 | String |
offText | data-off-text | String | 右侧开关显示文本 | String |
labelText | data-label-text | String | 开关中间显示文本 | String |
handleWidth | data-handle-width | String | Number | 开关左右2侧的宽度 |
labelWidth | data-label-width | String | Number | 开关中间的宽度 |
baseClass | data-base-class | String | 开关基础样式 | String |
wrapperClass | data-wrapper-class | String / Array | 元素样式容器 | String / Array |
onInit | | function | 初始化开关 | Function |
onSwitchChange | | function | 当开关状态改变时触发 | Function |