你如何创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>
结合这个答案，你也可以使用这种风格，就像移动设置切换器。
HTML
<a href="#" class="toggler"> </a> <a href="#" class="toggler off"> </a> <a href="#" class="toggler"> </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它的样式。
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>
记住，当你编码时， 只有 somename和someid可以在input标签中改变，否则不起作用。
至于我也在寻找答案，并希望用CSS来实现它。 我find了CSS NINJA的解决scheme这是一个很好的<input type="checkbox">和一些css 现场演示 ！ 虽然它不是在IE 8中工作，你可以实现selectivizr ！ 并修复使用opacity CSS来filter以使其在IE中工作。
2014年编辑：
对于新的切换button，我使用在Lea Verou博客上find的解决scheme，在视觉上类似于iOScheckbox
