Tôi muốn tạo nút chuyển đổi 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ó bật ra.Làm cách nào để tạo nút chuyển đổi?
Nếu không có cách nào để thực hiện, chỉ cần sử dụng css. Có cách nào để làm điều đó bằng cách sử dụng jQuery?
Cách ngữ nghĩa tốt là sử dụng hộp kiểm và sau đó tạo kiểu theo cách khác nhau nếu đượ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 khoảng thừa, div phụ, và, cho một cái nhìn thực sự tốt đẹp, 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 một lên/xuống ảnh hưởng do biên giới:
$(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 ảnh nền mà nút lên và nút đại diện xuống, và làm cho màu nền trong suốt.
Đây là một mã số JS với mã này để bạn có thể dùng thử ... http://jsfiddle.net/LmULE/ – Evan
FYI: Tôi đã làm điều tương tự như bài đăng này, chỉ sử dụng Google Dart http: // steelpinjata.com/2014/03/20/toggle-buttons-in-dart/. Lưu ý: hoạt động trong Chromium, nhưng có thể được biên dịch sang JavaScript và sẽ hoạt động trong các trình duyệt hiện đại khác. IE không được tính là trình duyệt ;-) – DataMania
Tôi sẽ có khuynh hướng sử dụng một lớp trong css làm thay đổi kiểu viền hoặc chiều rộng đường viền khi nút bị ấn xuống, do đó nó sẽ xuất hiện nút chuyển đổi.
Bạn có thể sử dụng phần tử neo (<a></a>) và sử dụng liên kết: hoạt động và: để thay đổi hình nền để bật hoặc tắt. Chỉ là một ý nghĩ.
Chỉnh sửa: Phương thức 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 onClick javascript đơn giản cho phần tử, thay đổi hình nền phù hợp để làm cho nó trông giống như nút được nhấn và đặt một số cờ. Sau đó, nhấp vào, hình ảnh và cờ tiếp theo sẽ được hoàn nguyên. Giống như rất
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>
Bạn có thể sử dụng các "hoạt động" pseudoclass (nó sẽ không hoạt động trên IE6, tuy nhiên, đối với các yếu tố khác hơn là liên kết)
a:active
{
...desired style here...
}
Với dự án này, nó phải hoạt động trong IE6 trở lên. –
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ề kiểu dáng nhưng bạn có được ý chính). Sẽ không bận tâm sử dụng jquery cho một cái gì đó tầm thường đến mức trung thực.
<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>
Có một plugin jquery bởi Swizec, có thể làm điều này trong số những thứ khác: https://github.com/Swizec/styled-button
(Các liên kết cũ đã http://swizec.com/code/styledButton/, tôi đã không kiểm tra đầy đủ các thay thế, chỉ cần tìm thấy nó w/Google).
Liên kết này bị hỏng – FredFury
Giao diện người dùng JQuery giúp công việc nhẹ nhàng tạo ra các nút bật tắt. Chỉ cần đặt 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 cơ thể của bạn onLoad hoặc bạn literals $.ready() (hoặc một số đối tượng init() chức năng nếu xây dựng của bạn một trang web ajax ..) thả một số JQuery như vậy:
$("#myToggleButton").button()
thats it. (đừng quên < label for=...> vì JQueryUI sử dụng điều đó cho phần thân của nút chuyển đổi ..)
Từ đó bạn chỉ cần làm việc với nó như bất kỳ khác input="checkbox "vì đó là điều khiển cơ bản vẫn là nhưng giao diện người dùng JQuery da nó trông giống như một nút bật tắt đẹp trên màn hình
Theo như tôi đang tìm kiếm câu trả lời quá, và muốn hoàn thành nó với CSS.Tôi tìm thấy giải pháp của CSS NINJA Nó là một impelmentation tốt đẹp của <input type="checkbox"> và một số css Live demo! Mặc dù nó không hoạt động trong IE 8 bạn có thể thực hiện selectivizr! và sửa CSS ở đâu sử dụng opacity đến filter để làm cho nó hoạt động trong IE.
EDIT 2014:
cho các nút Toggle mới tôi sử dụng giải pháp tương tự được tìm thấy trên Lea Verou blog trực quan lên iOS hộp kiểm
Tôi không nghĩ rằng sử dụng JS để tạo một nút là thực hành tốt. Đ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 chỉ có thể sử dụng hộp kiểm và một chút CSS để thực hiện. Và thật dễ dàng để truy xuất trạng thái 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 cho nó theo cách muốn.
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;
}
Hope this helps
Tục tạc của bạn đang giúp đỡ rất nhiều. Tôi cảm ơn bạn vì điều đó. –
Đây là một trong những ví dụ/var iant (chi tiết hơn được mô tả) của ToggleButton sử dụng jQuery với việc thực hiện <label for="input">.
1st chúng ta sẽ tạo container cho ToggleButton của chúng tôi 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 cho chuyển đổi qua lại nút của chúng tôi. Nút của chúng tôi thực sự là <label> thông thường mà chúng tôi sẽ tạo kiểu để thể hiện giá trị 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)
}
Chức năng được triển khai 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 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 chuyển đổi chức năng thành sự kiện ("thay đổi" sự kiện) của nút <label> ngẫu hứng của chúng tôi (nó sẽ là click sự kiện vì chúng tôi không thay đổi trực tiếp số checkbox, vì vậy không thể change sự kiện nào được kích hoạt 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 ta có thể xác định backgorund-image hoặc một số border để đại diện cho sự thay đổi trong giá trị trong khi <label> sẽ làm công việc cho chúng ta trong việc thay đổi giá trị của một ô trống;).
Hy vọng điều này sẽ giúp ai đó.
+ việc triển khai này dường như hoạt động chính xác trên các thiết bị di động, bec. CCS thực hiện đề xuất trên bởi TDeBailleul đã không hoạt động đúng trên Android (Android 2.3.5 trình duyệt mặc định; Opera Mobile trên cùng một hệ thống là Ok). –
Ngoài ra, thay vì '.addClass()' /'.removeClass() 'bạn có thể sử dụng' .toggleClass() ', nhưng phương thức mô tả rõ ràng các hành động cho các giá trị' checked'/'unchecked'. –
Kết hợp với câu trả lời là this, bạn cũng có thể sử dụng loại kiểu này giống như trình cài đặt thiết bị di động.
HTML
<a href="#" class="toggler"> </a>
<a href="#" class="toggler off"> </a>
<a href="#" class="toggler"> </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 hoạt hình với jquery và/hoặc CSS3
Fiddler
Hãy 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>
nhớ rằng khi bạn đang mã hóa này, chỉsomename và someid có thể thay đổi trong thẻ đầu vào, nếu không nó không hoạt động.
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 học 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 phần tử button cho các nút vì lý do ngữ nghĩa.
<button class="toggler">Toggle me</button>
Hãy thử bit 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);
đâ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>
tôi đã viết [hướng dẫn] (http: // blog. felixhagspiel.de/index.php/posts/custom-inputs) về cách tạo các nút bật/tắt chỉ với CSS3, không có J S cần thiết. [Ở đây bạn có thể xem bản demo] (http://custom-inputs.felixhagspiel.de/) –
Đây là hướng dẫn về [Cách tạo plugin JQuery để chuyển đổi nút radio thành các nút bật tắt] (http://sgeek.org/ jquery-toggle-button-plugin-cho-trượt-toggle-tắc-sswitch /) và [Ở đây bạn có thể xem demo] (http://www.demos.sgeek.org/sswitch-jquery-plugin-demo/) –