bootstrap-switch.js是一个很美(对,只能这一个字)的开关按钮组件。
效果
材料准备
开始
<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>
引入这两个文件,至于bootstrap的css和js,肯定是要的!
<div class="switch" onColor="success" offColor="warning" onText="参与" offText="不参与" labelText="大宗交易">
<input type="checkbox" checked />
</div>
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. 通过jquery获取所有的switch div,从而获取其属性onColor 、offColor 等等
2. 紧接着,获取div包含的子元素input。
3. 通过bootstrapSwitch方法对input进行加载。
笑对现实的无奈,不能后退的时候,不再傍徨的时候,永远向前 路一直都在──陈奕迅《路一直都在》