基于Bootstrap的超酷jQuery开关按钮插件

Bootstrap开关按钮插件使用。

首先引用Bootstrap样式 、脚本及JQuery。

<link rel="stylesheet" href="static/stylesheets/bootstrap-switch.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="static/js/bootstrap-switch.js"></script>

其次、在代码中使用 Html语言，checked 代表选中 即 “on” 状态。

<input name="op1" id="$bean.id" type="checkbox" checked />

再次、在初始化脚本语言中，对控件进行样式初始化。

$("input[name='op1']").bootstrapSwitch({
size : "small",
offColor : "danger",
onText : "开启",
offText : "关闭"

});

最后，在初始化脚本语言中，对控件进行方法绑定。

$("input[name='op1']")
.on(
'switchChange.bootstrapSwitch',
function(e, state) {
var id = $(this).attr("id");
if (state == false) {
alert("请注意：关闭状态，此项目将无法接受到仪器发送的数据。");
$("#" + id)
.bootstrapSwitch(
"state",
false);

} else {
$("#" + id)
.bootstrapSwitch(
"state",
true);
}
});

参考：http://www.cnblogs.com/tanhehe/p/4263824.html
http://www.htmleaf.com/jQuery/Buttons-Icons/201502051331.html