Bagaimana Anda membuat tombol sakelar?

Saya ingin membuat tombol sakelar di html menggunakan css. Saya menginginkannya sehingga ketika Anda mengekliknya, itu tetap didorong ke dalam dan daripada ketika Anda mengekliknya lagi, itu akan keluar.

Jika tidak ada cara untuk melakukannya hanya dengan menggunakan css. Apakah ada cara untuk melakukannya menggunakan jQuery?

Cara semantik yang baik adalah menggunakan kotak centang, dan kemudian menatanya dengan cara yang berbeda jika dicentang atau tidak. Tetapi tidak ada cara yang baik untuk melakukannya. Anda harus menambahkan span ekstra, div ekstra, dan, untuk tampilan yang benar-benar bagus, tambahkan beberapa javascript.

Jadi solusi terbaik adalah menggunakan fungsi jQuery kecil dan dua gambar latar belakang untuk menata dua status tombol yang berbeda. Contoh dengan efek naik / turun yang diberikan oleh batas:

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

Tentunya, Anda dapat menambahkan gambar latar belakang yang mewakili tombol atas dan tombol bawah, dan membuat warna latar belakang transparan.

JQuery UI mempermudah pembuatan tombol sakelar. Taruh ini

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

di halaman Anda dan kemudian di tubuh Anda onLoadatau Anda $.ready()(atau beberapa init()fungsi literal objek jika Anda membangun situs ajax ..) jatuhkan beberapa JQuery seperti ini:

$("#myToggleButton").button()

itu dia. (jangan lupa < label for=...>karena JQueryUI menggunakannya untuk badan tombol sakelar ..)

Dari sana Anda hanya bekerja dengannya seperti yang lain input="checkbox"karena itulah kontrol yang mendasarinya tetapi JQuery UI hanya mengulitinya agar terlihat seperti tombol sakelar yang cantik di layar.

berikut adalah contoh menggunakan 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>

Dalam kombinasi dengan jawaban ini , Anda juga dapat menggunakan jenis gaya ini seperti pengalih setelan seluler.

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

Bisa jadi jauh lebih cantik, tapi memberi ide.
Salah satu keuntungannya adalah dapat dianimasikan dengan jquery dan / atau CSS3
Fiddler

Jika Anda menginginkan tombol yang tepat maka Anda memerlukan beberapa javascript. Sesuatu seperti ini (perlu beberapa perbaikan pada gaya tetapi Anda mendapatkan intinya). Tidak akan repot-repot menggunakan jquery untuk sesuatu yang sepele untuk jujur.

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

Anda hanya dapat menggunakan toggleClass()untuk melacak status. Kemudian Anda memeriksa apakah elemen tombol memiliki kelas, seperti ini:

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

Dan saya menggunakan buttonelemen untuk tombol karena alasan semantik.

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

Anda bisa menggunakan elemen jangkar ( <a></a>), dan menggunakan: aktif dan: tautan untuk mengubah gambar latar belakang untuk mengaktifkan atau menonaktifkan. Hanya pemikiran saja.

Sunting: Metode di atas tidak berfungsi dengan baik untuk beralih. Tapi Anda tidak perlu menggunakan jquery. Tulis fungsi javascript onClick sederhana untuk elemen tersebut, yang mengubah gambar latar belakang secara tepat agar terlihat seperti tombol ditekan, dan atur beberapa tanda. Kemudian pada klik berikutnya, gambar dan bendera dikembalikan. Seperti itu

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

Dan html seperti itu <div id="toggleDiv" onclick="toggle()">Some thing</div>

Saya tidak berpikir menggunakan JS untuk membuat tombol adalah praktik yang baik. Bagaimana jika browser pengguna menonaktifkan JavaScript?

Plus, Anda bisa menggunakan kotak centang dan sedikit CSS untuk melakukannya. Dan mudah untuk mengambil kembali status kotak centang Anda.

Ini hanyalah satu contoh, tetapi Anda dapat menatanya sesuai keinginan.

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

Semoga ini membantu

Saya akan cenderung menggunakan kelas di css Anda yang mengubah gaya perbatasan atau lebar perbatasan saat tombol ditekan, sehingga memberikan tampilan tombol sakelar.

Coba sedikit ini:

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

Ada plugin jquery dari Swizec , yang dapat melakukan ini antara lain: https://github.com/Swizec/styled-button

(Tautan lama adalah http://swizec.com/code/styledButton/ , saya tidak menguji penggantinya sepenuhnya, hanya menemukannya dengan Google.)

Anda dapat menggunakan pseudoclass "aktif" (ini tidak akan berfungsi di IE6, untuk elemen selain tautan)

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

Berikut adalah salah satu contoh / varian (lebih detail dijelaskan) dari ToggleButton menggunakan jQuery with <label for="input"> implementasi.

Pertama kita akan membuat wadah untuk ToggleButton kita menggunakan HTML klasik <input>dan<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>

Selanjutnya kita akan menentukan fungsi untuk mengaktifkan tombol kita. Tombol kami sebenarnya adalah tombol biasa <label>yang akan kami gaya untuk mewakili nilai toggling.

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

Fungsi diimplementasikan dengan cara yang dapat digunakan kembali. Anda dapat menggunakannya untuk lebih dari satu, dua atau bahkan tiga ToggleButtons yang telah Anda buat.

... dan akhirnya ... untuk membuatnya berfungsi seperti yang diharapkan, kita harus mengikat fungsi toggle ke acara (acara "ubah") <label>tombol improvisasi kami (itu akan menjadi clickacara karena kami tidak mengubah checkboxsecara langsung, jadi tidak ada changeacara dapat dipecat untuk <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
    });

});

Dengan CSS kita dapat mendefinisikan backgorund-imageatau beberapa borderuntuk mewakili perubahan nilai sementara <label>akan melakukan pekerjaan itu untuk kita dalam mengubah nilai kotak centang;).

Semoga ini bisa membantu seseorang.

Mencoba;

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

Dan pastikan di

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

Ingat ketika Anda mengkodekan ini, hanya somename dan someiddapat mengubah tag input, jika tidak maka tidak akan berfungsi.

Sejauh saya sedang mencari jawaban juga, dan ingin menyelesaikannya dengan CSS. Saya menemukan solusi dengan CSS NINJA. Ini adalah impelmentasi yang bagus <input type="checkbox">dan beberapa demo langsung css ! Meskipun tidak berfungsi di IE 8, Anda dapat menerapkan selectivizr ! dan memperbaiki CSS di mana penggunaan opacityuntuk filteruntuk membuatnya bekerja di IE.

EDIT 2014:

untuk tombol sakelar baru, saya menggunakan solusi yang ditemukan di blog Lea Verou secara visual mirip dengan kotak centang iOS