Как создать кнопку переключения?

Question

Я хочу создать кнопку переключения в HTML, используя CSS. Я хочу, чтобы, когда вы нажимаете на нее, она оставалась нажатой, а затем, когда вы нажимаете на нее снова, она высовывается.

Если нет способа сделать это, просто используя css. Есть ли способ сделать это с помощью jQuery?

Answer 1

Хорошим семантическим способом было бы использовать флажок, а затем стилизовать его по-разному, если он установлен или нет. Но нет хороших способов сделать это. Вы должны добавить дополнительный span, дополнительный 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>

Очевидно, вы можете добавить фоновые изображения, которые представляют кнопки вверх и вниз, и сделать цвет фона прозрачным.

Answer 2

Интерфейс JQuery упрощает создание кнопок переключения. Просто положи это

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

на вашей странице, а затем в вашем теле onLoad или вашей $.ready() (или некоторых объектных литералах init(), если вы создаете ajax-сайт ..), отбросьте JQuery, например, так:

$("#myToggleButton").button()

вот и все. (не забудьте < label for=...>, потому что JQueryUI использует его для тела кнопки-переключателя ..)

Оттуда вы просто работаете с ним, как с любым другим input="checkbox ", потому что это то, чем по-прежнему является базовый элемент управления, но пользовательский интерфейс JQuery просто скинет его, чтобы он выглядел как симпатичная кнопка на экране.

Answer 3

вот пример использования 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>

Answer 4

В сочетании с этим ответом вы также можете использовать этот стиль, похожий на переключение настроек мобильных устройств.

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
Скрипач

Answer 5

Если вам нужна подходящая кнопка, вам понадобится 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>

Answer 6

Вы можете просто использовать toggleClass() для отслеживания состояния. Затем вы проверяете, есть ли у элемента кнопки класс, например:

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

Answer 7

Вы можете использовать элемент привязки (<a></a>) и использовать ссылки a: active и a: для переключения фонового изображения для включения или выключения. Просто мысль.

Edit: вышеупомянутый метод не слишком хорошо работает для переключения. Но вам не нужно использовать jquery. Напишите простую функцию javascript onClick для элемента, которая соответствующим образом изменяет фоновое изображение, чтобы оно выглядело как нажатие кнопки, и устанавливает некоторый флаг. Затем при следующем щелчке изображение и флаг возвращаются. Вот так

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>

Answer 8

Я не думаю, что использование 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;
}​

Надеюсь, это поможет

Answer 9

Я был бы склонен использовать класс в вашем CSS, который изменяет стиль границы или ширину границы, когда кнопка нажата, поэтому это создает вид кнопки переключения.

Answer 10

Попробуйте этот бит:

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