Como é que se cria um botão de comutação?
quero criar um botão de comutação em html, usando o css. Eu quero-o para que quando você clicar nele, ele fica empurrado para dentro e do que quando você clicar nele novamente ele sai.
Se não houver nenhuma maneira de fazê-lo apenas usando css. Há alguma maneira de o fazer usando jQuery?
15 answers
A boa forma semântica seria usar uma caixa de cheques, e depois usá-la de formas diferentes, se estiver assinalada ou não. Mas não há boas maneiras de o fazer. Você tem que adicionar espaço extra, div extra, e, para um olhar realmente bom, adicionar algum javascript.
Então a melhor solução é usar uma pequena função jQuery e duas imagens de fundo para estilizar os dois estados diferentes do botão. Exemplo com um efeito para cima/para baixo dado por fronteiras:
$(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>
Obviamente, você pode adicionar imagens de fundo que representam botão para cima e botão para baixo, e tornar a cor de fundo transparente.
JQuery UI faz a luz trabalhar para criar botões de comutação. Põe isto.
<label for="myToggleButton">my toggle button caption</label>
<input type="checkbox" id="myToggleButton" />
Na sua página e depois no seu corpo onLoad
ou na sua função $.ready()
(ou em alguns objectos literais init()
se construir um sítio ajax..) deixe cair um pouco de JQuery assim:
$("#myToggleButton").button()
É isso. (don't forget the < label for=...>
because JQueryUI uses that for the body of the toggle button..)
A partir daí você só trabalha com ele como qualquer outro porque isso é o que o controle subjacente ainda é mas O JQuery UI só o esfola para parecer um botão de comutação bonito no ecrã.
Aqui está um exemplo usando 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>
Em combinação com esta resposta, Você também pode usar este tipo de estilo que é como o Toggler de configuração móvel.
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');
});
});
Pode ser muito mais bonita, mas dá a ideia.Uma vantagem é que ele pode ser animado com jquery e / ou CSS3
Fiddler
<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>
Podes usar toggleClass()
para localizar o estado. Então você verifica se o elemento botão tem a classe, assim:
$("button.toggler").click( function() {
$me = $(this);
$me.toggleClass('off');
if($me.is(".off")){
alert('hi');
}else {
alert('bye');
}
});
E eu uso o elemento button
para botões por razões semânticas.
<button class="toggler">Toggle me</button>
Poderá usar um elemento de âncora (<a></a>
) e usar uma ligação a: Activa e a: para mudar a imagem de fundo para activar ou desactivar. Só uma ideia.
Editar: o método acima não funciona muito bem para comutar. Mas não precisas de usar o jquery. Escreva uma simples função onClick javascript para o elemento, que altera a imagem de fundo apropriadamente para fazer parecer que o botão é pressionado, e definir alguma bandeira. Em seguida, no próximo clique, imagem e bandeira é revertida. Comer então
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;
}
}
E o html assim
<div id="toggleDiv" onclick="toggle()">Some thing</div>
Eu estaria inclinado a usar uma classe no seu css que altera o estilo de contorno ou a largura de contorno quando o botão está pressionado, para que dê a aparência de um botão de comutação.
Este é apenas um exemplo, mas você pode estilá-lo como quiser.
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;
}
Espero que isto ajude.
Tenta esta parte:
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);
Há um plugin jquery por Swizec , que pode fazer isto entre outras coisas: https://github.com/Swizec/styled-button
(a ligação antiga era http://swizec.com/code/styledButton não testei completamente a substituição, só a encontrei no Google.)
Pode usar o pseudoclasse " activo "(não funcionará no IE6, no entanto, para outros elementos que não ligações)
a:active
{
...desired style here...
}
Aqui está um dos exemplos / variantes (mais detalhes descritos) de ToggleButton usando jQuery com implementação <label for="input">
.
Primeiro vamos criar um contentor para o nosso ToggleButton usando o HTML clássico <input>
e <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>
A seguir vamos definir a função para comutar o nosso botão. Nosso botão na verdade é o usual {[[5]} que será estilizado para representar comutação de valor.
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)
}
a função é implementada de forma reutilizável. Você pode usá-lo para mais de um, dois ou até três ToggleButtons que criou.
... e finalmente ... para que funcione como esperado, devemos ligar a função de comutação a um evento (Evento"Mudança") do nosso botão improvisado <label>
(será click
evento bec. não estamos alterando o checkbox
diretamente, então nenhum evento pode ser disparado para <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
});
});
Com o CSS podemos definir backgorund-image
ou algum border
para representar a mudança de valor enquanto <label>
fará o trabalho por nós ao alterar o valor de uma caixa de cheques ;).
Tenta;
<li>Text To go with Toggle Button<span class = 'toggle'><input type = 'checkbox' class = 'toggle' name = 'somename' id = 'someid' /></span></li>
E certifique-se de que no
<head><link rel = 'stylesheet' src = 'theme.css'> (from jqtouch - downloadable online)
<link rel = 'text/javascript' src = 'jquery.js'> (also from jqtouch)
</head>
Lembre-se quando estiver a codificar isto, apenas somename
e someid
pode mudar na etiqueta de entrada, caso contrário não funciona.
Até onde eu estava à procura de resposta também, e queria complementá-lo com o CSS. I found solution by CSS NINJA
É uma boa impelmentação de {[[0]} e alguns css
Demo ao vivo!
Embora não esteja a funcionar no IE 8 Você poderia implementar selectivizr ! e fixar CSS onde usa opacity
a filter
para fazê-lo funcionar no IE.
Editar 2014:
Para os novos botões de comutação, eu uso a solução encontrada noLea Verou blog visualmente semelhante à opção iOS