你如何创建一个切换按钮？

时间：2008-11-21 15:18:14

标签： jquery html css

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

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

15 个答案:

答案 0 :(得分：87)

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

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

$(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>

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

答案 1 :(得分：49)

JQuery UI可以轻松创建切换按钮。只要把这个

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

在您的网页上，然后在您的正文onLoad或您的$.ready()（或某些对象文字init()函数中，如果您构建一个ajax网站..）删除一些JQuery，如下所示：< / p> 

$("#myToggleButton").button()

就是这样。 （不要忘记< label for=...>，因为JQueryUI将其用于切换按钮的主体..）

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

答案 2 :(得分：22)

这是使用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>

答案 3 :(得分：19)

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

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进行动画制作 Fiddler

答案 4 :(得分：7)

如果你想要一个合适的按钮，那么你需要一些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>

答案 5 :(得分：4)

您可以使用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>

答案 6 :(得分：3)

您可以使用锚元素（<a></a>），并使用：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>

答案 7 :(得分：2)

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

答案 8 :(得分：2)

我不认为使用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;
}​

希望这有帮助

答案 9 :(得分：1)

Swizec有一个jquery插件，可以执行以下操作：https://github.com/Swizec/styled-button

（旧的链接是http://swizec.com/code/styledButton/，我没有对替换进行全面测试，只是发现了谷歌。）

答案 10 :(得分：1)

试试这一点：

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

答案 11 :(得分：0)

您可以使用“活动”伪类（它不适用于IE6，思想，链接以外的元素）

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

答案 12 :(得分：0)

我也在寻找答案，并想用CSS来完成它。我找到了CSS NINJA的解决方案 <input type="checkbox">和一些css是一个很好的推动力 Live demo！ 虽然它在IE 8中不起作用，但您可以实现selectivizr！并修复使用opacity到filter的CSS，使其在IE中运行。

2014年编辑：

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

答案 13 :(得分：0)

以下是使用带有<label for="input">实现的jQuery的ToggleButton示例/变体（更详细描述）之一。

第一，我们将使用经典HTML <input>和<label>

为我们的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>

接下来，我们将定义切换按钮的功能。我们的按钮实际上是通常的<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)
}

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

...最后......为了让它按预期工作，我们应该将切换功能绑定到即兴<label>按钮的事件（“更改”事件）（它将是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>将为我们改变复选框的值做好工作;）。

希望这有助于某人。

答案 14 :(得分：0)

尝试; 

<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可以在输入标记中更改，否则无效。

相关问题
最新问题