<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); // 打开按钮 });效果
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){} |