基于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

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

相关推荐