Як створити кнопку перемикання?

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

Якщо немає можливості це зробити, просто використовуючи css. Чи є спосіб це зробити за допомогою jQuery?

Хорошим семантичним способом було б використовувати прапорець, а потім стилювати його різними способами, якщо він встановлений чи ні. Але хороших способів це зробити не існує. Ви повинні додати додатковий проміжок, додатковий дів, і, для дійсно гарного вигляду, додати трохи 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>

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

Користувальницький інтерфейс 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 UI просто скидає його, щоб виглядати як симпатична кнопка на екрані.

ось приклад із використанням 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">&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

Якщо ви хочете належної кнопки, вам знадобиться 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.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: щоб змінити фонове зображення, щоб увімкнути або вимкнути. Просто думка.

Редагувати: вищевказаний метод не надто добре працює для перемикання. Але вам не потрібно використовувати 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>

Я не думаю, що використання 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;
}​

Сподіваюся, це допомагає

Я би схильний використовувати клас у вашому css, який змінює стиль межі або ширину межі при натисканні кнопки, тому він видає кнопку перемикання.

Спробуйте це:

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

Існує плагін jquery від Swizec , який може робити це серед іншого: https://github.com/Swizec/styled-button

(Стара посилання була http://swizec.com/code/styledButton/ , я не повністю перевірив заміну, просто знайшов її з Google.)

Ви можете використовувати "активний" псевдоклас (він не працюватиме на IE6, хоча й для інших елементів, крім посилань)

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

Ось один із прикладів / варіантів (детальніше описано) 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)
}

Функція реалізована багаторазово. Ви можете використовувати його для декількох, двох або навіть трьох створених 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>будемо робити нам завдання змінити значення прапорця;).

Сподіваюся, що це комусь допоможе.

Спробуйте;

<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можете змінювати тег введення, інакше це не працює.

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

EDIT 2014:

для нових кнопок перемикання я використовую рішення, знайдене в блозі Lea Verou, візуально схоже на прапорець iOS