Bootstrap 开关（switch）控件

Bootstrap 开关（switch）控件是一个很美（对，只能这一个字）的开关按钮组件。

效果

材料准备

Bootstrap 开关（switch）控

开始

<link type="text/css" rel="stylesheet" href="${ctx}/components/switch/css/bootstrap3/bootstrap-switch.min.css" />
<script type="text/javascript" src="${ctx}/components/switch/js/bootstrap-switch.min.js"></script>
1
2
3
1
2
3

引入这两个文件，至于bootstrap的css和js，肯定是要的！

<div class="switch" onColor="success" offColor="warning" onText="参与" offText="不参与" labelText="大宗交易">
    <input type="checkbox" checked />
</div>
1
2
3
1
2
3

1. div完全是为了给checkbox添加式样。
2. input就很简单了，就是普通的标签。

启动

$("div[class='switch']").each(function() {
    $this = $(this);
    var onColor = $this.attr("onColor");
    var offColor = $this.attr("offColor");
    var onText = $this.attr("onText");
    var offText = $this.attr("offText");
    var labelText = $this.attr("labelText");

    var $switch_input = $(" :only-child", $this);
    $switch_input.bootstrapSwitch({
        onColor : onColor,
        offColor : offColor,
        onText : onText,
        offText : offText,
        labelText : labelText
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

1. 通过jQuery获取所有的switch div，从而获取其属性onColor 、offColor 等等
2. 紧接着，获取div包含的子元素input。
3. 通过bootstrapSwitch方法对input进行加载。

笑对现实的无奈，不能后退的时候，不再傍徨的时候，永远向前　路一直都在──陈奕迅《路一直都在》
本文出自:【沉默王二的博客】