如何创建引导开关

Question

我的一个网页设计师给出了制作bootstrap switch.I的模板，编译后呈现在页面顶部。它显示的是checkbox。

模板编码：

 <script id="switchTemp" type="text/x-handlebars-template">
    <div class="span16 mr1 headerToggleDiv" style="height:42px;">
    <div class="switch switch-square pull-right" data-off-label="1" data-on-label="2"><input type="checkbox" id="switchBox"/></div>
    </div> 
</script>

使用this时，我尝试了以下方法。

  $('#switchBox').wrap('<div class="switch switch-square pull-right has-switch" />').parent().bootstrapSwitch();

使用默认名称(开、关)变小，如下所示。

​

​

我想用下面的方式。

​

​

我想要1,2而不是on,off作为标签。

有人能帮我吗。

谢谢

Answer 1

请删除脚本标记，并使用以下代码获取1和2用于打开和关闭。

 <div class="make-switch pull-right" data-on-label="1" data-off-label="2">
    <input type="checkbox" id="switchBox"/>
 </div>

Answer 2

您可以将此插件用于您的工作：

http://www.bootstrap-switch.org/