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

98

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

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

jquery  html  css 
— Донни В.
источник
Я написал руководство о том, как создавать переключатели включения / выключения только с помощью CSS3, без JS. Здесь вы можете увидеть демо
— Феликс Хагшпиль
— Гопал Джоши

Ответы:

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>
Развернуть фрагмент

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

— Алексмея
источник
17
Вот скрипт
— Эван
К вашему сведению: я сделал то же самое, что и этот пост, только с помощью Google Dart steelpinjata.com/2014/03/20/toggle-buttons-in-dart . Примечание: работает в Chromium, но может быть скомпилирован в JavaScript и будет работать в других современных браузерах. IE не считается браузером ;-)
— Серж Мерзляков
51

Пользовательский интерфейс 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 просто скроет его, чтобы он выглядел как красивая кнопка переключения на экране.

— bkdraper
источник
Учитывая, что OP добавил тег jquery, это отличный ответ. Данный jqueryUI можно использовать для обеспечения согласованного стиля.
— Джо Джонстон
28

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

— Suhailvs
источник
19

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

тоглеры

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.

— Пьер де ЛЕСПИНЭ
источник
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>
— обезьяна
источник
4

Вы можете просто использовать 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>
— Тим
источник
3

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

Изменить: вышеуказанный метод не слишком хорошо работает для переключения. Но вам не нужно использовать 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>

— anand.trex
источник
3

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

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

— Гальский
источник
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);
— Питер
источник
0

Вы можете использовать «активный» псевдокласс (однако он не будет работать в IE6 для других элементов, кроме ссылок)

a:active
{
    ...desired style here...
}
— Pilsetnieks
источник
0

Вот один из примеров / вариантов (более подробно описанных) ToggleButton с использованием jQuery с <label for="input">реализацией.

Сначала мы создадим контейнер для нашего ToggleButton, используя классический HTML <input>и<label>

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

Функция реализована многоразовым способом. Вы можете использовать его для более чем одной, двух или даже трех созданных вами ToggleButton.

... и, наконец ... чтобы он работал должным образом, мы должны привязать функцию переключения к событию (событию "изменения") нашей импровизированной <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> будем выполнять работу за нас по изменению значения флажка;).

Надеюсь, это кому-то поможет.

— Пол Т. Роукин
источник
+ эта реализация, похоже, корректно работает и на мобильных устройствах, т.к. Реализация CCS, предложенная выше TDeBailleul, некорректно работала на Android (браузер по умолчанию Android 2.3.5; Opera Mobile в той же системе была в порядке).
— Paul T. Rawkeen
Также вместо .addClass()/ .removeClass()вы можете использовать .toggleClass(), но описанный метод явно определяет действия для checked/ uncheckedvalues.
— Paul T. Rawkeen
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можно изменить во входном теге, иначе это не сработает.

— ЯegDwight
источник
0

Поскольку я тоже искал ответ и хотел выполнить его с помощью CSS. Я нашел решение от CSS NINJA. Это хорошее продвижение <input type="checkbox">и некоторая демонстрация css Live ! Хотя это не работает в IE 8, вы можете реализовать selectivizr ! и исправить CSS, где используется opacityдляfilter , чтобы заставить его работать в IE.

РЕДАКТИРОВАТЬ 2014:

для новых кнопок переключения я использую решение, найденное в блоге Lea Verou, визуально похожее на флажок iOS

— Айварас
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.