你如何创build一个切换button?

我想用CSS创build一个切换button。 我需要它,所以当你点击它时,它会保持被推入,并且比再次单击它时popup它。

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

好的语义方法是使用一个checkbox,然后用不同的方式对其进行设置。 但是没有什么好办法做到这一点。 你必须添加额外的跨度,额外的div,并且,为了一个非常好的外观,添加一些JavaScript。

所以最好的解决scheme是使用一个小的jQuery函数和两个背景图像来设置button的两种不同的状态。 具有由边界给定的上/下效果的示例:

$(document).ready(function() { $('a#button').click(function() { $(this).toggleClass("down"); }); }); 
 a { background: #ccc; cursor: pointer; border-top: solid 2px #eaeaea; border-left: solid 2px #eaeaea; border-bottom: solid 2px #777; border-right: solid 2px #777; padding: 5px 5px; } a.down { background: #bbb; border-top: solid 2px #777; border-left: solid 2px #777; border-bottom: solid 2px #eaeaea; border-right: solid 2px #eaeaea; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a id="button" title="button">Press Me</a> 

JQuery UI使得创build切换button变得轻松。 只要把这个

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

在你的页面上,然后在你的主体onLoad$.ready() (或一些对象文字的init()函数,如果你的build设ajax网站..)下降一些JQuery像这样:

 $("#myToggleButton").button() 

而已。 (不要忘了< label for=...>因为JQueryUI使用它作为切换button的主体)

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

这里是一个使用pure css的例子:

  .cmn-toggle { position: absolute; margin-left: -9999px; visibility: hidden; } .cmn-toggle + label { display: block; position: relative; cursor: pointer; outline: none; user-select: none; } input.cmn-toggle-round + label { padding: 2px; width: 120px; height: 60px; background-color: #dddddd; border-radius: 60px; } input.cmn-toggle-round + label:before, input.cmn-toggle-round + label:after { display: block; position: absolute; top: 1px; left: 1px; bottom: 1px; content: ""; } input.cmn-toggle-round + label:before { right: 1px; background-color: #f1f1f1; border-radius: 60px; transition: background 0.4s; } input.cmn-toggle-round + label:after { width: 58px; background-color: #fff; border-radius: 100%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); transition: margin 0.4s; } input.cmn-toggle-round:checked + label:before { background-color: #8ce196; } input.cmn-toggle-round:checked + label:after { margin-left: 60px; } 
 <div class="switch"> <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox"> <label for="cmn-toggle-1"></label> </div> 

结合这个答案,你也可以使用这种风格,就像移动设置切换器。

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和/或CSS3animation
提琴手

如果你想要一个适当的button,那么你将需要一些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> 

你可以使用toggleClass()来跟踪状态。 然后你检查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> 

您可以使用锚点元素( <a></a> ),并使用:active和a:链接更改背景图像以打开或closures。 只是一个想法。

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

 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>

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

我不认为使用JS创buildbutton是一个好习惯。 如果用户的浏览器停用JavaScript,该怎么办?

另外,你可以使用checkbox和一些CSS来做到这一点。 而且很容易检索你的checkbox的状态。

这只是一个例子,但你可以devise它的样式。

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; }​ 

希望这可以帮助

试试这个:

 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); 

有一个Swizec的jquery插件,可以做到这一点: https : //github.com/Swizec/styled-button

(旧链接是http://swizec.com/code/styledButton/ ,我没有完全testingreplace,只是发现它与谷歌。)

您可以使用“活动”伪类(它不会在IE6上工作,但对于链接以外的元素)

 a:active { ...desired style here... } 

下面是使用jQuery和<label for="input">实现的ToggleButton的示例/变体(更详细的描述)之一。

首先,我们将使用经典的HTML <input><label>为我们的ToggleButton创build容器

 <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="http://img.dovov.comicons/feature.png"> </label> </span> 

接下来我们将定义切换我们的button的function。 我们的button实际上是通常的<label> ,我们将样式来表示切换值。

 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) } 

function是以可重用的方式实现的。 您可以使用它创build多个,两个甚至三个ToggleButtons。

…最后…为了使它按预期工作,我们应该将切换function绑定到我们即兴创build的<label>button的事件(“change”事件)(这将是click事件,我们不会改变checkbox直接,所以没有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>将会改变checkbox的值。

希望这有助于某人。

尝试;

 <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可以在input标签中改变,否则不起作用。

至于我也在寻找答案,并希望用CSS来实现它。 我find了CSS NINJA的解决scheme这是一个很好的<input type="checkbox">和一些css 现场演示 ! 虽然它不是在IE 8中工作,你可以实现selectivizr ! 并修复使用opacity CSS来filter以使其在IE中工作。

2014年编辑:

对于新的切换button,我使用在Lea Verou博客上find的解决scheme,在视觉上类似于iOScheckbox