Как вы создаете кнопку переключения?

Я хочу создать переключатель в html с помощью css. Я хочу, чтобы при нажатии на него он оставался нажатым , а когда вы снова нажимаете на него, он выскакивает.



Если нет никакого способа сделать это просто с помощью css. Есть ли способ сделать это с помощью jQuery?

504   15  

15 ответов:

хорошим семантическим способом было бы использовать флажок, а затем стилизовать его по-разному, если он установлен или нет. Но нет никаких хороших способов сделать это. Вы должны добавить дополнительный срок, дополнительный див, и, на самом деле приятный внешний вид, добавить некоторые 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>

очевидно, вы можете добавить фоновые изображения, которые представляют кнопку вверх и кнопку вниз, и сделать цвет фона прозрачным.

87  
2017-09-24 19:03:41

jQuery UI делает легкую работу из создания кнопок переключения. Просто положите это

<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 UI просто скины его, чтобы выглядеть как довольно кнопка переключения на экране.

49  
2016-07-21 16:02:01

пример использования 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>
22  
2014-11-28 06:12:33

в сочетании с этой ответ, вы также можете использовать этот вид стиля, который похож на мобильные настройки toggler.

togglers

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

может быть гораздо красивее, но дает идею.
Одним из преимуществ является то, что он может быть анимирован с помощью jquery и/или CSS3
Саша

19  
2017-05-23 15:32:33

Если вам нужна правильная кнопка, вам понадобится 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>
7  
2008-11-21 18:09:25

вы можете просто использовать toggleClass() для отслеживания состояния. Затем вы проверяете, имеет ли элемент button класс, например:

$("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>
4  
2013-10-30 02:32:17

вы можете использовать якорный элемент (<a></a>), и используйте a:active и A:link, чтобы изменить фоновое изображение для включения или выключения. Всего лишь мысль.

Edit: приведенный выше метод не работает слишком хорошо для переключения. Но вам не нужно использовать jQuery. Напишите простую функцию onclick javascript для элемента, которая изменяет фоновое изображение соответствующим образом, чтобы оно выглядело так, как будто кнопка нажата, и установите некоторый флаг. Затем на следующий клик, изображение и флаг возвращается. Как так что

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>

3  
2008-11-21 18:12:46

Я был бы склонен использовать класс в вашем css, который изменяет стиль границы или ширину границы, когда кнопка нажата, поэтому она дает вид кнопки переключения.

2  
2008-11-21 17:20:15

Я не думаю, что использование JS для создания кнопки является хорошей практикой. Что делать, если браузер пользователя деактивирует JavaScript ?

плюс, вы можете просто использовать checkbox и немного CSS, чтобы сделать это. И это легко получить состояние вашего флажка.

это только один пример, но вы можете стиль его, как хотеть.

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

надеюсь, что это помогает

2  
2012-06-23 16:08:07

попробуй этот бит:

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);
1  
2014-01-08 12:56:01

есть плагин jquery от Swizec, который может сделать это среди прочего:https://github.com/Swizec/styled-button

(старая ссылка была http://swizec.com/code/styledButton/, я не полностью протестировал замену, просто нашел ее с помощью Google.)

1  
2017-05-23 14:54:34

вы можете использовать "активный" псевдокласс (он не будет работать на IE6, хотя, для элементов, отличных от ссылок)

a:active
{
    ...desired style here...
}
0  
2008-11-21 17:37:43

вот один из примеров / Вариант (более подробно описано) 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)
}

функция реализована многоразовым способом. Вы можете использовать его для более чем одной, двух или даже трех кнопок, которые вы создали.

... и, наконец,... чтобы он работал так, как ожидалось, мы должны привязать функцию переключения к событию (событию" change") нашего импровизированного <label> кнопка (это будет click событие bec. мы не изменяем 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> сделает работу за нас в изменении значения флажка ;).

надеюсь, это кому-то поможет.

0  
2012-07-24 18:39:27

попробовать;

<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 изменить в тег input, в противном случае он не работает.

0  
2012-10-03 15:10:24

насколько я тоже искал ответ, и хотел дополнить его CSS. Я нашел решение с помощью CSS NINJA Это хорошая импелментация <input type="checkbox"> и некоторые css демо! Хотя он не работает в IE 8 вы могли бы реализовать selectivizr! и исправить CSS, где использует opacity to filter чтобы заставить его работать в IE.

редактировать 2014:

для новых кнопок я использую решение, найденное на Lea Verou blog визуально похож на iOS checkbox

0  
2014-02-20 18:16:03

Comments

    Ничего не найдено.
Click here to cancel reply.