jquery - 如何创建切换按钮?

我想用hss在html中创建一个切换按钮。 我想要它,以便当你点击它时,它会保持推入状态,而当你再次点击它时,它会弹出。

如果没有办法只使用CSS。 有没有办法用jQuery做到这一点?

Donny V. asked 2019-08-13T07:14:00Z
15个解决方案
87 votes

好的语义方式是使用复选框,然后如果选中或不选中,则以不同的方式设置它。 但是没有好办法。 你必须添加额外的跨度,额外的div,并且,为了一个非常漂亮的外观,添加一些JavaScript。

所以最好的解决方案是使用一个小的jQuery函数和两个背景图像来设置按钮的两种不同状态。 边框给出的向上/向下效果示例:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="button" title="button">Press Me</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="button" title="button">Press Me</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="button" title="button">Press Me</a>

显然,您可以添加代表按钮和按钮的背景图像,并使背景颜色透明。

alexmeia answered 2019-08-13T07:14:43Z
49 votes

JQuery UI可以轻松创建切换按钮。 就这样说吧

<label for="myToggleButton">my toggle button caption</label>
<input type="checkbox" id="myToggleButton" />

在您的页面上,然后在您的身体< label for=...>或您的$.ready()(或一些对象文字init()函数,如果您构建一个ajax网站..)删除一些JQuery像这样:

$("#myToggleButton").button()

而已。 (不要忘记< label for=...>,因为JQueryUI将其用于切换按钮的主体..)

从那里你就像其他任何input="checkbox&#34; 因为这是底层控件仍然是什么,但JQuery UI只是将它看起来像一个漂亮的切换按钮在屏幕上。

bkdraper answered 2019-08-13T07:15:30Z
22 votes

这是一个使用<div class="switch"> <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox"> <label for="cmn-toggle-1"></label> </div>的示例:

<div class="switch">
  <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
  <label for="cmn-toggle-1"></label>
</div>
<div class="switch">
  <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
  <label for="cmn-toggle-1"></label>
</div>

suhailvs answered 2019-08-13T07:16:06Z
19 votes

结合这个答案,您还可以使用这种类似移动设置切换器的样式。

togglers

HTML

<a href="#" class="toggler">&nbsp;</a>
<a href="#" class="toggler off">&nbsp;</a>
<a href="#" class="toggler">&nbsp;</a>

CSS

a.toggler {
    background: green;
    cursor: pointer;
    border: 2px solid black;
    border-right-width: 15px;
    padding: 0 5px;
    border-radius: 5px;
    text-decoration: none;
    transition: all .5s ease;
}

a.toggler.off {
    background: red;
    border-right-width: 2px;
    border-left-width: 15px;
}

jQuery的

$(document).ready(function(){
    $('a.toggler').click(function(){
        $(this).toggleClass('off');
    });
});

可能更漂亮,但提出了这个想法。
一个优点是它可以使用jquery和/或CSS3进行动画处理
提琴手

Pierre de LESPINAY answered 2019-08-13T07:17:01Z
7 votes

如果你想要一个合适的按钮,那么你需要一些javascript。 像这样的东西(需要一些关于造型的工作,但你得到了要点)。 不会因为事实如此微不足道而使用jquery而烦恼。

<html>
<head>
<style type="text/css">
.on { 
border:1px outset;
color:#369;
background:#efefef; 
}

.off {
border:1px outset;
color:#369;
background:#f9d543; 
}
</style>

<script language="javascript">
function togglestyle(el){
    if(el.className == "on") {
        el.className="off";
    } else {
        el.className="on";
    }
}
</script>

</head>

<body>
<input type="button" id="btn" value="button" class="off" onclick="togglestyle(this)" />
</body>
</html>
monkey do answered 2019-08-13T07:17:27Z
4 votes

你可以使用button来跟踪状态。 然后检查button元素是否具有类,如下所示:

$("button.toggler").click( function() {
    $me = $(this);
    $me.toggleClass('off');
    if($me.is(".off")){
        alert('hi');
    }else {
        alert('bye');
    }
});

出于语义原因,我将button元素用于按钮。

<button class="toggler">Toggle me</button>
tim answered 2019-08-13T07:18:00Z
3 votes

您可以使用锚元素(<div id="toggleDiv" onclick="toggle()">Some thing</div>),并使用:active和a:链接更改背景图像以打开或关闭。 只是一个想法。

编辑:上述方法对切换效果不佳。 但是你不需要使用jquery。 为元素编写一个简单的onClick javascript函数,它会适当地更改背景图像,使其看起来像按下按钮,并设置一些标志。 然后在下一次单击时,将恢复图像和标志。 像这样

var flag = 0;
function toggle(){
if(flag==0){
    document.getElementById("toggleDiv").style.backgroundImage="path/to/img/img1.gif";
    flag=1;
}
else if(flag==1){
    document.getElementById("toggleDiv").style.backgroundImage="path/to/img/img2.gif";
    flag=0;
}
}

和html一样    <div id="toggleDiv" onclick="toggle()">Some thing</div>

anand.trex answered 2019-08-13T07:18:44Z
2 votes

我倾向于在你的css中使用一个类来改变按钮按下时的边框样式或边框宽度,因此它给出了一个切换按钮的外观。

Galwegian answered 2019-08-13T07:19:11Z
2 votes

我不认为使用JS创建按钮是一种很好的做法。 如果用户的浏览器停用JavaScript会怎么样?

另外,你可以使用一个复选框和一些CSS来完成它。并且很容易检索您的复选框的状态。

这只是一个例子,但你可以根据需要设计风格。

[http://jsfiddle.net/4gjZX/]

HTML

<fieldset class="toggle">
  <input id="data-policy" type="checkbox" checked="checked" />
  <label for="data-policy">
  <div class="toggle-button">
    <div class="toggle-tab"></div>
  </div>
  Toggle
  </label>
</fieldset>​

CSS

.toggle label {
  color: #444;
  float: left;
  line-height: 26px;
}
.toggle .toggle-button {
  margin: 0px 10px 0px 0px;
  float: left;
  width: 70px;
  height: 26px;
  background-color: #eeeeee;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#fafafa));
  background-image: -webkit-linear-gradient(top, #eeeeee, #fafafa);
  background-image: -moz-linear-gradient(top, #eeeeee, #fafafa);
  background-image: -o-linear-gradient(top, #eeeeee, #fafafa);
  background-image: -ms-linear-gradient(top, #eeeeee, #fafafa);
  background-image: linear-gradient(top, #eeeeee, #fafafa);
  filter: progid:dximagetransform.microsoft.gradient(GradientType=0, StartColorStr='#eeeeee', EndColorStr='#fafafa');
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border: 1px solid #D1D1D1;
}
.toggle .toggle-button .toggle-tab {
  width: 30px;
  height: 26px;
  background-color: #fafafa;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#eeeeee));
  background-image: -webkit-linear-gradient(top, #fafafa, #eeeeee);
  background-image: -moz-linear-gradient(top, #fafafa, #eeeeee);
  background-image: -o-linear-gradient(top, #fafafa, #eeeeee);
  background-image: -ms-linear-gradient(top, #fafafa, #eeeeee);
  background-image: linear-gradient(top, #fafafa, #eeeeee);
  filter: progid:dximagetransform.microsoft.gradient(GradientType=0, StartColorStr='#fafafa', EndColorStr='#eeeeee');
  border: 1px solid #CCC;
  margin-left: -1px;
  margin-top: -1px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-box-shadow: 5px 0px 4px -5px #000000, 0px 0px 0px 0px #000000;
  -moz-box-shadow: 5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
  box-shadow: 5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
}
.toggle input[type=checkbox] {
  display: none;
}
.toggle input[type=checkbox]:checked ~ label .toggle-button {
  background-color: #2d71c2;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#2d71c2), to(#4ea1db));
  background-image: -webkit-linear-gradient(top, #2d71c2, #4ea1db);
  background-image: -moz-linear-gradient(top, #2d71c2, #4ea1db);
  background-image: -o-linear-gradient(top, #2d71c2, #4ea1db);
  background-image: -ms-linear-gradient(top, #2d71c2, #4ea1db);
  background-image: linear-gradient(top, #2d71c2, #4ea1db);
  filter: progid:dximagetransform.microsoft.gradient(GradientType=0, StartColorStr='#2d71c2', EndColorStr='#4ea1db');
}
.toggle input[type=checkbox]:checked ~ label .toggle-button .toggle-tab {
  margin-left: 39px;
  -webkit-box-shadow: -5px 0px 4px -5px #000000, 0px 0px 0px 0px #000000;
  -moz-box-shadow: -5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
  box-shadow: -5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
}​

希望这可以帮助

Titouan de Bailleul answered 2019-08-13T07:20:05Z
1 votes

试试这个:

input type="button" 
                           data-bind="css:{on:toggleButton, off:toggleButton!=true},value:toggleButton,click: function() { $data.toggleButton(!($data.toggleButton()))}" />

in viewModel
self.toggleButton = ko.observable(false);
Peter answered 2019-08-13T07:20:31Z
1 votes

Swizec有一个jquery插件,除此之外还可以执行此操作:[https://github.com/Swizec/styled-button]

(旧的链接是[http://swizec.com/code/styledButton/,]我没有完全测试替换,只是发现它与谷歌。)

Nickolay answered 2019-08-13T07:21:06Z
0 votes

你可以使用&#34; active&#34; pseudoclass(它不会在IE6上工作,但对于链接以外的元素)

a:active
{
    ...desired style here...
}
pilsetnieks answered 2019-08-13T07:21:33Z
0 votes

这是使用jQuery和backgorund-image实现的ToggleButton的示例/变体(更详细描述)之一。

首先,我们将使用经典HTML backgorund-imageborder为我们的ToggleButton创建容器

<span>
  <input type="checkbox" value="1" name="some_feature_to_select" id="feature_cb" style="display: none;"> <!-- We can hide checkbox bec. we want <label> to be a ToggleButton, so we don't need to show it. It is used as our value holder -->
  <label for="feature_cb" id="label_for_some_feature">
    <img alt="Stylish image" src="/images/icons/feature.png">
  </label>
</span>

接下来我们将定义切换按钮的功能。 我们的按钮实际上是通常的backgorund-image,我们将通过造型来表示价值切换。

function toggleButton(button) {

var _for = button.getAttribute('for'); // defining for which element this label is (suppose element is a checkbox (bec. we are making ToggleButton ;) )
var _toggleID = 'input#'+_for; // composing selector ID string to select our toggle element (checkbox)
var _toggle = $( _toggleID ); // selecting checkbox to work on
var isChecked = !_toggle.is(':checked'); // defining the state with negation bec. change value event will have place later, so we negating current state to retrieve inverse (next).

if (isChecked)
    $(button).addClass('SelectedButtonClass'); // if it is checked -> adding nice class to our button (<label> in our case) to show that value was toggled
else
    $(button).removeClass('SelectedButtonClass'); // if value (or feature) was unselected by clicking the button (<label>) -> removing .SelectedButtonClass (or simply removing all classes from element)
}

功能以可重用的方式实现。 您可以将它用于您创建的多个,两个甚至三个ToggleButton。

... ...最后......为了使它按预期工作,我们应该将切换功能绑定到我们的即兴backgorund-image按钮的事件(&#34;更改&#34;事件)(这将是border事件,因为我们不是 直接改变<label>,因此没有change事件可以被解雇<label>)。

$(document).ready(function(){

    $("#some_feature_label").click(function () {
        toggleButton(this); // call function with transmitting instance of a clicked label and let the script decide what was toggled and what to do with it
    });

    $("#some_other_feature_label").click(function () {
        toggleButton(this); // doing the same for any other feature we want to represent in a way of ToggleButton
    });

});

使用CSS,我们可以定义backgorund-image或某些border来表示值的变化,而<label>将为我们改变复选框的值;)。

希望这有助于某人。

Paul T. Rawkeen answered 2019-08-13T07:22:40Z
0 votes

尝试;

<li>Text To go with Toggle Button<span class = 'toggle'><input type = 'checkbox' class = 'toggle' name = 'somename' id = 'someid' /></span></li>

并确保在

<head><link rel = 'stylesheet' src = 'theme.css'> (from jqtouch - downloadable online)
      <link rel = 'text/javascript' src = 'jquery.js'> (also from jqtouch)
</head>

请记住,当您编码时,只有somenamesomeid可以在输入标签中更改,否则它不起作用。

ЯegDwight answered 2019-08-13T07:23:20Z
0 votes

至于我也在寻找答案,并希望用CSS来完成它。 我找到了CSS NINJA的解决方案这是一个很好的驱使<input type="checkbox">和一些CSS现场演示!虽然它在IE 8中不起作用,但您可以实现选择性! 并修复CSS使用opacityfilter使其在IE中工作。

编辑2014:

对于新的切换按钮,我确实使用Lea Verou博客上的解决方案在视觉上类似于iOS复选框

Aivaras Prudnikovas answered 2019-08-13T07:24:05Z
translate from https://stackoverflow.com:/questions/309081/how-do-you-create-a-toggle-button