效果
材料准备
开始
<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 }); });