Я хочу создать кнопку переключения в html с помощью css. Я хочу, чтобы, когда вы нажимаете на нее, она остается нажатой, и, когда вы нажимаете на нее снова, она появляется.
Если это невозможно, просто используйте css. Есть ли способ сделать это с помощью jQuery?
Хорошим семантическим способом было бы использовать флажок, а затем стилизовать его по-разному, если он установлен или нет. Но нет никаких хороших способов сделать это. Вы должны добавить дополнительный диапазон, дополнительный div и, для действительно приятного внешнего вида, добавить 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 просто обманывает его, чтобы он выглядел как симпатичная кнопка переключения на экране.
вот пример с использованием 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>В сочетании с ответом this вы также можете использовать этот стиль, похожий на настройки мобильных параметров.
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');
});
});
Может быть намного красивее, но дает идею.
Одно из преимуществ заключается в том, что он может быть анимирован с помощью 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>
Я был бы склонен использовать класс в вашем CSS, который изменяет стиль границы или ширину границы, когда кнопка нажата, поэтому она дает вид кнопки переключения.
Я не думаю, что использование JS для создания кнопки - хорошая практика. Что делать, если браузер пользователя отключает JavaScript?
Кроме того, вы можете использовать флажок и немного CSS для этого. И легко получить состояние вашего флажка.
Это всего лишь один пример, но вы можете его стиль, как хотите.
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;
}
Надеюсь, что это поможет
Есть плагин jquery от Swizec, который может сделать это между прочим: https://github.com/Swizec/styled-button
(Старая ссылка была http://swizec.com/code/styledButton/, я не полностью тестировал замену, просто нашел ее с Google.)
Попробуйте этот бит:
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);
Вы можете использовать "активный" псевдокласс (он не будет работать на IE6, хотя для элементов, отличных от ссылок)
a:active
{
...desired style here...
}
Насколько я искал ответ тоже, и хотел, чтобы он усвоил его с помощью CSS. Я нашел решение от CSS NINJA
Это хорошее движение <input type="checkbox"> и некоторая css
Живая демонстрация!
Хотя он не работает в IE 8, вы можете реализовать selectivizr! и исправить CSS, где использует opacity to filter, чтобы он работал в IE.
EDIT 2014:
для новых кнопок переключения. Я использую решение, найденное на блог Lea Verou, визуально подобный флажку iOS
Вот один из примеров/вариантов (более подробно описано) ToggleButton с использованием jQuery с реализацией <label for="input">.
1 мы создадим контейнер для нашего 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, которые вы создали.
... и, наконец, чтобы заставить его работать как ожидалось, мы должны привязать функцию toggle к событию (событие "change" ) нашей импровизированной кнопки <label> (это будет click event bec. we не меняют непосредственно 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 могут меняться во входном теге, иначе это не сработает.