Làm cách nào để bạn tạo một nút bật tắt?

Tôi muốn tạo một nút bật tắt trong html bằng css. Tôi muốn nó để khi bạn nhấp vào nó, nó vẫn được đẩy vào và hơn khi bạn nhấp vào nó một lần nữa, nó sẽ bật ra.

Nếu không có cách nào để làm điều đó chỉ cần sử dụng css. Có cách nào để làm điều đó bằng cách sử dụng jQuery không?

Cách tốt về ngữ nghĩa là sử dụng một hộp kiểm, sau đó tạo kiểu cho nó theo những cách khác nhau nếu nó được chọn hay không. Nhưng không có cách nào tốt để làm điều đó. Bạn phải thêm thêm span, thêm div, và để có giao diện thực sự đẹp mắt, hãy thêm một số javascript.

Vì vậy, giải pháp tốt nhất là sử dụng một hàm jQuery nhỏ và hai hình nền để tạo kiểu cho hai trạng thái khác nhau của nút. Ví dụ với hiệu ứng lên / xuống do đường viền cung cấp:

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

Rõ ràng, bạn có thể thêm hình nền đại diện cho nút lên và nút xuống, đồng thời làm cho màu nền trong suốt.

Giao diện người dùng JQuery làm cho việc tạo ra các nút chuyển đổi nhẹ nhàng. Chỉ cần đặt cái này

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

trên trang của bạn và sau đó trong nội dung của bạn onLoadhoặc của bạn $.ready()(hoặc một số đối tượng nghĩa đen init()hoạt động nếu bạn xây dựng một trang web ajax ..) thả một số JQuery như vậy:

$("#myToggleButton").button()

đó là nó. (đừng quên < label for=...>vì JQueryUI sử dụng điều đó cho phần thân của nút bật tắt ..)

Từ đó bạn chỉ cần làm việc với nó như bất kỳ cái nào khác input="checkbox"bởi vì đó là những gì kiểm soát cơ bản vẫn là nhưng JQuery UI chỉ làm cho nó trông giống như một nút bật tắt trên màn hình.

đây là một ví dụ sử dụng 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>

Kết hợp với câu trả lời này , bạn cũng có thể sử dụng loại kiểu giống như trình chuyển đổi cài đặt trên thiết bị di động.

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

Có thể đẹp hơn nhiều, nhưng đưa ra ý tưởng.
Một lợi thế là nó có thể được làm động bằng jquery và / hoặc CSS3
Fiddler

Nếu bạn muốn có một nút thích hợp thì bạn sẽ cần một số javascript. Một cái gì đó như thế này (cần một số công việc về tạo kiểu nhưng bạn đã nắm được ý chính). Thành thật mà nói, sẽ không bận tâm đến việc sử dụng jquery cho một thứ gì đó quá tầm thường.

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

Bạn chỉ có thể sử dụng toggleClass()để theo dõi trạng thái. Sau đó, bạn kiểm tra xem phần tử nút có lớp hay không, như sau:

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

Và tôi sử dụng buttonphần tử cho các nút vì lý do ngữ nghĩa.

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

Bạn có thể sử dụng một phần tử neo ( <a></a>) và sử dụng liên kết: active và a: để thay đổi hình ảnh nền để bật hoặc tắt. Chỉ là một suy nghĩ.

Chỉnh sửa: Phương pháp trên không hoạt động quá tốt để chuyển đổi. Nhưng bạn không cần phải sử dụng jquery. Viết một hàm javascript onClick đơn giản cho phần tử, hàm này thay đổi hình nền một cách thích hợp để làm cho nó trông giống như nút được nhấn và đặt một số cờ. Sau đó, vào lần nhấp tiếp theo, hình ảnh và cờ được hoàn nguyên. Như vậy

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

Và html như vậy <div id="toggleDiv" onclick="toggle()">Some thing</div>

Tôi không nghĩ rằng việc sử dụng JS để tạo một nút là một phương pháp hay. Điều gì sẽ xảy ra nếu trình duyệt của người dùng tắt JavaScript?

Ngoài ra, bạn có thể chỉ cần sử dụng một hộp kiểm và một chút CSS để làm điều đó. Và dễ dàng truy xuất trạng thái của hộp kiểm của bạn.

Đây chỉ là một ví dụ, nhưng bạn có thể tạo kiểu theo ý muốn.

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

Hi vọng điêu nay co ich

Tôi sẽ có xu hướng sử dụng một lớp trong css của bạn để thay đổi kiểu đường viền hoặc chiều rộng đường viền khi nút bị ấn xuống, vì vậy nó tạo ra sự xuất hiện của nút bật tắt.

Hãy thử một chút này:

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

Có một plugin jquery của Swizec , có thể thực hiện điều này trong số những thứ khác: https://github.com/Swizec/styled-button

(Liên kết cũ là http://swizec.com/code/styledButton/ , tôi chưa kiểm tra đầy đủ việc thay thế, chỉ tìm thấy nó trên Google.)

Bạn có thể sử dụng giả cổ "hoạt động" (tuy nhiên, nó sẽ không hoạt động trên IE6 đối với các phần tử không phải là liên kết)

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

Đây là một trong những ví dụ / biến thể (được mô tả chi tiết hơn) của ToggleButton sử dụng jQuery có <label for="input">triển khai.

Đầu tiên, chúng tôi sẽ tạo vùng chứa cho ToggleButton của chúng tôi bằng cách sử dụng HTML cổ điển <input>và<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>

Tiếp theo, chúng ta sẽ xác định chức năng bật tắt nút của chúng ta. Nút của chúng tôi thực sự là nút thông thường <label>mà chúng tôi sẽ tạo kiểu để thể hiện sự chuyển đổi giá trị.

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

Chức năng được thực hiện theo cách có thể tái sử dụng. Bạn có thể sử dụng nó cho nhiều hơn một, hai hoặc thậm chí ba ToggleButtons mà bạn đã tạo.

... và cuối cùng ... để làm cho nó hoạt động như mong đợi, chúng ta nên liên kết hàm chuyển đổi với một sự kiện (sự kiện "thay đổi") của <label>nút ứng biến của chúng ta (nó sẽ là clicksự kiện. Chúng tôi không checkboxtrực tiếp thay đổi changesự kiện , vì vậy không có sự kiện nào có thể được sa thải cho <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
    });

});

Với CSS, chúng tôi có thể xác định backgorund-imagehoặc một số borderđể đại diện cho sự thay đổi trong giá trị trong khi <label>sẽ thực hiện công việc cho chúng tôi trong việc thay đổi giá trị của hộp kiểm;).

Hy vọng điều này sẽ giúp ai đó.

Thử;

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

Và chắc chắn rằng trong

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

Hãy nhớ khi bạn đang mã hóa điều này, chỉ somename và someidcó thể thay đổi trong thẻ đầu vào, nếu không thì nó không hoạt động.

Theo như tôi cũng đang tìm kiếm câu trả lời và muốn biên tập nó bằng CSS. Tôi đã tìm thấy giải pháp của CSS NINJA Đây là một sự thúc đẩy tuyệt vời của <input type="checkbox">và một số bản demo css Live ! Mặc dù nó không hoạt động trong IE 8 nhưng bạn có thể cài đặt selectivizr ! và sửa chữa CSS nơi sử dụng opacityđể filterlàm cho nó làm việc trong IE.

CHỈNH SỬA 2014:

cho các nút bật tắt mới, tôi sử dụng giải pháp tìm thấy trên blog Lea Verou về mặt hình ảnh tương tự như hộp kiểm iOS