一、效果图
二、代码实现
<!DOCTYPE html>
<html>
<head>
<!-- 所需js/css文件 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>
</head>
<body>
<!-- HTML -->
<input type="checkbox" checked id="checkbox"/>
<!-- JS -->
<script type="text/javascript">
$(function(){
/* 初始化控件 */
$("#checkbox").bootstrapSwitch({
onText : "ON", // 设置ON文本
offText : "OFF", // 设置OFF文本
onColor : "success",// 设置ON文本颜色 (info/success/warning/danger/primary)
offColor : "info", // 设置OFF文本颜色 (info/success/warning/danger/primary)
size : "normal", // 设置控件大小,从小到大 (mini/small/normal/large)
// 当开关状态改变时触发
onSwitchChange : function(event, state) {
if (state == true) {
alert("ON");
} else {
alert("OFF");
}
}
});
});
</script>
</body>
</html>
4031
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
