Jak utworzyć przycisk przełączania?

Chcę utworzyć przycisk przełączania w html za pomocą CSS. Chcę, żeby po kliknięciu pozostał wepchnięty, a po ponownym kliknięciu wyskoczył.

Jeśli nie ma sposobu, aby to zrobić, po prostu używając css. Czy jest sposób, aby to zrobić za pomocą jQuery?

Dobrym sposobem semantycznym byłoby użycie pola wyboru, a następnie stylizowanie go na różne sposoby, jeśli jest zaznaczone, czy nie. Ale nie ma dobrych sposobów, aby to zrobić. Musisz dodać dodatkowy zakres, dodatkowy element div i, aby uzyskać naprawdę ładny wygląd, dodać trochę javascript.

Dlatego najlepszym rozwiązaniem jest użycie małej funkcji jQuery i dwóch obrazów tła do stylizacji dwóch różnych stanów przycisku. Przykład z efektem w górę / w dół wynikającym z obramowań:

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

Oczywiście możesz dodać obrazy tła, które reprezentują przycisk w górę i w dół, i sprawić, że kolor tła będzie przezroczysty.

Interfejs użytkownika JQuery ułatwia tworzenie przycisków przełączania. Po prostu to włóż

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

na twojej stronie, a następnie w twoim ciele onLoadlub twojej $.ready()(lub niektórych init()funkcji literałów obiektowych, jeśli budujesz witrynę ajax ..) upuść trochę JQuery w następujący sposób:

$("#myToggleButton").button()

Otóż ​​to. (nie zapomnij o tym, < label for=...>że JQueryUI używa tego dla treści przycisku przełączania ..)

Stamtąd po prostu pracujesz z nim jak z każdym innym input="checkbox”, ponieważ tym właśnie jest podstawowa kontrolka, ale JQuery UI po prostu nadaje jej wygląd, aby wyglądał jak ładny przycisk przełączania na ekranie.

oto przykład przy użyciu 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>

W połączeniu z tą odpowiedzią możesz również użyć tego rodzaju stylu, który przypomina przełącznik ustawień mobilnych.

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

Mógłby być znacznie ładniejszy, ale daje pomysł.
Jedną z zalet jest to, że można go animować za pomocą jquery i / lub CSS3
Fiddler

Jeśli chcesz mieć odpowiedni przycisk, będziesz potrzebować javascript. Coś takiego (wymaga trochę pracy nad stylizacją, ale masz sedno). Nie zawracałbym sobie głowy używaniem jquery do czegoś tak trywialnego, żeby być uczciwym.

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

Możesz po prostu użyć toggleClass()do śledzenia stanu. Następnie sprawdzasz, czy element przycisku ma klasę, na przykład:

$("button.toggler").click( function() {
    $me = $(this);
    $me.toggleClass('off');
    if($me.is(".off")){
        alert('hi');
    }else {
        alert('bye');
    }
});

I używam tego buttonelementu dla przycisków ze względów semantycznych.

<button class="toggler">Toggle me</button>

Możesz użyć elementu kotwicy ( <a></a>) i użyć a: active i a: link, aby zmienić obraz tła, aby włączyć lub wyłączyć. Tylko myśl.

Edycja: powyższa metoda nie działa zbyt dobrze w przypadku przełączania. Ale nie musisz używać jquery. Napisz prostą funkcję javascript onClick dla elementu, która odpowiednio zmienia obraz tła, aby wyglądał jak naciśnięty przycisk, i ustaw jakąś flagę. Następnie po następnym kliknięciu obraz i flaga są przywracane. Tak, tak

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

I tak HTML <div id="toggleDiv" onclick="toggle()">Some thing</div>

Nie sądzę, aby używanie JS do tworzenia przycisku było dobrą praktyką. Co się stanie, jeśli przeglądarka użytkownika dezaktywuje JavaScript?

Ponadto możesz po prostu użyć pola wyboru i trochę CSS, aby to zrobić. I łatwo jest odzyskać stan swojego pola wyboru.

To tylko jeden przykład, ale możesz go stylizować, jak chcesz.

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;
}​

Mam nadzieję że to pomoże

Byłbym skłonny użyć klasy w twoim css, która zmienia styl obramowania lub szerokość obramowania, gdy przycisk jest wciśnięty, więc daje wygląd przycisku przełączania.

Spróbuj tego trochę:

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

Istnieje wtyczka jquery firmy Swizec , która może to zrobić między innymi: https://github.com/Swizec/styled-button

(Stary link to http://swizec.com/code/styledButton/ , nie w pełni przetestowałem zamiennik, po prostu znalazłem go w Google.)

Możesz użyć "aktywnej" pseudoklasy (jednak nie będzie działać w IE6 dla elementów innych niż linki)

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

Oto jeden z przykładów / wariantów (bardziej szczegółowo opisanych) ToggleButton używającego jQuery z <label for="input">implementacją.

Najpierw utworzymy kontener dla naszego ToggleButton przy użyciu klasycznego HTML <input>i<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>

Następnie zdefiniujemy funkcję przełączania naszego przycisku. Nasz przycisk jest w rzeczywistości zwykłym, <label>który będziemy stylizować, aby reprezentował przełączanie wartości.

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

Funkcja jest realizowana w sposób wielokrotnego użytku. Możesz go użyć dla więcej niż jednego, dwóch lub nawet trzech utworzonych przez siebie ToggleButtons.

... i wreszcie ... aby działało zgodnie z oczekiwaniami, powinniśmy powiązać funkcję toggle ze zdarzeniem (zdarzeniem "zmiany") naszego zaimprowizowanego <label>przycisku (będzie to clickzdarzenie, ponieważ nie zmieniamy checkboxbezpośrednio, więc nie ma changezdarzenia można strzelać <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
    });

});

W CSS możemy zdefiniować backgorund-imagelub niektóre borderreprezentować zmianę wartości, podczas gdy <label>zrobimy to za nas, zmieniając wartość pola wyboru;).

Mam nadzieję, że to komuś pomoże.

Próbować;

<li>Text To go with Toggle Button<span class = 'toggle'><input type = 'checkbox' class = 'toggle' name = 'somename' id = 'someid' /></span></li>

I upewnij się, że w

<head><link rel = 'stylesheet' src = 'theme.css'> (from jqtouch - downloadable online)
      <link rel = 'text/javascript' src = 'jquery.js'> (also from jqtouch)
</head>

Pamiętaj, kiedy to kodujesz, tylko somename i someidmożesz zmienić tag wejściowy, w przeciwnym razie to nie zadziała.

O ile również szukałem odpowiedzi i chciałem to zakończyć za pomocą CSS. Znalazłem rozwiązanie CSS NINJA. To fajne uzupełnienie <input type="checkbox">i trochę demo CSS Live ! Chociaż nie działa w IE 8, możesz zaimplementować selectivizr ! i gdzie naprawić CSS zastosowania opacitydo filteraby pracować w IE.

EDYCJA 2014:

w przypadku nowych przycisków przełączania używam rozwiązania znalezionego na blogu Lea Verou, wizualnie podobnego do pola wyboru w iOS