Javascript 开/关:开关按钮引导程序

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14973093/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 18:32:09  来源:igfitidea点击:

On/Off: switch button bootstrap

javascriptjquerytwitter-bootstrapuiswitch

提问by Manoz

Here is my code-

这是我的代码-

<div id="normal-toggle-button" class="toggle-button" style="width: 100px; height: 25px;">
            <div style="left: 0px; width: 150px;"><input type="checkbox" checked="checked"><span class="labelLeft" style="width: 50px; height: 25px; line-height: 25px;">ON</span><label for="" style="width: 50px; height: 25px;"></label><span class="labelRight" style="width: 50px; height: 25px; line-height: 25px;">OFF </span></div>
        </div>
    </div>

Script-

脚本-

$(document).ready(function() {
        $('#normal-toggle-button').toggleButtons();
    });

I want a basic button given on this page- Switch buttons

我想要这个页面上给出的基本按钮 -切换按钮

I am doing all right. But something i still missed.

我做得很好。但我仍然错过了一些东西。

Check in here- Fiddle

在这里签到- 小提琴

回答by Steely Wing

The simplest use of bootstrapSwitch

bootstrapSwitch 最简单的使用

Demo

演示

<link href="bootstrap-switch.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="bootstrap-switch.js"></script>

<input type="checkbox">
<script>
  $('input:checkbox').bootstrapSwitch();
</script>

回答by Amir T

class matters

阶级问题

You had the class as "toggle-button" still, change it to "switch"

您仍然将课程设置为“切换按钮”,请将其更改为“切换”

Here is your updated fiddle: http://jsfiddle.net/WvRZw/10/

这是您更新的小提琴:http: //jsfiddle.net/WvRZw/10/

 <div id="normal-toggle-button" class="toggle-button"....

change to

改成

  <div id="normal-toggle-button" class="switch" ....

css/javascript includes

css/javascript 包括

You need to include the bootstrap javascript and css as well (see the resources section) (also regarding including javascript and css: How to get bootstrap buttons to show active state?)

您还需要包含引导程序 javascript 和 css(请参阅资源部分)(还关于包含 javascript 和 css:如何获取引导程序按钮以显示活动状态?