Quiero crear un botón para alternar en html usando css. Lo quiero para que al hacer clic en él, permanezca presionado y luego, cuando lo presiona de nuevo, salga.¿Cómo se crea un botón para alternar?
Si no hay manera de hacerlo simplemente usando css. ¿Hay alguna manera de hacerlo usando jQuery?
La buena manera semántica sería utilizar una casilla de verificación y, a continuación, el estilo de diferentes maneras, si se comprueba o no. Pero no hay buenas maneras de hacerlo. Tienes que agregar span extra, div adicional y, para un aspecto realmente agradable, agrega un poco de javascript.
Así que la mejor solución es usar una pequeña función jQuery y dos imágenes de fondo para diseñar los dos estados diferentes del botón. Ejemplo con una arriba/abajo efecto dado por las fronteras:
$(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, puede agregar imágenes de fondo en ese botón y botón de abajo representan, y hacer que el color de fondo transparente.
Aquí hay un violín de JS con este código para que puedas probarlo en vivo ... http://jsfiddle.net/LmULE/ – Evan
FYI: Hice lo mismo que esta publicación, solo con Google Dart http: // steelpinjata.com/2014/03/20/toggle-buttons-in-dart/. Nota: funciona en Chromium, pero se puede compilar en JavaScript y funcionará en otros navegadores modernos. IE no cuenta como un navegador ;-) – DataMania
Me inclino a utilizar una clase en su CSS que modifique el estilo del borde o el ancho del borde cuando se presiona el botón, por lo que le da la apariencia de un botón de alternar.
Puede usar un elemento de ancla (<a></a>) y utilizar un: activo y un enlace para cambiar la imagen de fondo para activar o desactivar. Solo un pensamiento.
Editar: El método anterior no funciona demasiado bien para alternar. Pero no necesitas usar jquery. Escriba una función onClick javascript simple para el elemento, que cambia la imagen de fondo de forma adecuada para que se vea como se presiona el botón, y establezca un indicador. Luego, en el siguiente clic, la imagen y el indicador se revierten. Al igual que
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;
}
}
Y el html como tal <div id="toggleDiv" onclick="toggle()">Some thing</div>
Puede utilizar el pseudoclass "activa" (que no funciona en IE6, sin embargo, para los elementos que no sean enlaces)
a:active
{
...desired style here...
}
Con este proyecto, tiene que funcionar en IE6 y posteriores. –
Si desea un botón adecuado, necesitará algunos javascript. Algo como esto (necesita un poco de trabajo en el diseño, pero entiendes la esencia). No me molestaría en usar jquery para algo tan trivial para ser honesto.
<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>
Hay un plugin jQuery por Swizec, lo que puede hacer esto, entre otras cosas: https://github.com/Swizec/styled-button
(El viejo vínculo era http://swizec.com/code/styledButton/, no he probado plenamente la sustitución, acaba de encontrar w/Google.)
Este enlace está roto – FredFury
JQuery UI hace que la creación de botones de alternar sea muy liviana. Sólo hay que poner este
<label for="myToggleButton">my toggle button caption</label>
<input type="checkbox" id="myToggleButton" />
en su página y luego en su cuerpo o sus literales onLoad$.ready() (o algún objeto init() función de si su construcción de un sitio ajax ..) soltar algunos JQuery como sigue:
$("#myToggleButton").button()
eso es todo. (No se olvide el < label for=...> porque jQueryUI utiliza para que el cuerpo del botón de activación ..)
Desde allí se acaba de trabajar con él como cualquier otro input="checkbox "porque eso es lo que subyace en el control todavía no es más que simplemente jQuery UI pieles que se vea como un botón bonito de palanca en la pantalla.
por lo que yo estaba buscando respuesta también, y querían acomplish con CSS. he encontrado una solución mediante CSS NINJA es un buen impelmentation de <input type="checkbox"> y algunos css Live demo! Aunque no funciona en IE 8, puede implementar selectivizr! y corregir CSS donde se usa opacity a filter para que funcione en IE.
EDITAR 2014:
para los nuevos botones de conmutación hago uso de la solución se encuentra en Lea Verou blog visualmente similar a iOS casilla
No creo que el uso de JS para la creación de un botón es una buena práctica. ¿Qué pasa si el navegador del usuario desactiva JavaScript?
Además, puede usar una casilla de verificación y un poco de CSS para hacerlo. Y es fácil recuperar el estado de su casilla de verificación.
Este es solo un ejemplo, pero puede darle el estilo que desee.
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;
}
Esperanza esto ayuda
Su tonelada sarcástica está ayudando mucho. Le doy las gracias por ello. –
Este es uno de los ejemplos/var iant (se describen más detalles) de ToggleButton usando jQuery con la implementación <label for="input">.
primero vamos a crear contenedor para nuestra ToggleButton utilizando HTML clásico <input> y <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 continuación vamos a definir la función para alternar nuestro botón. Nuestro botón en realidad es el <label> habitual que vamos a diseñar para representar el valor de alternar.
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)
}
función se implementa de una forma reutilizable. Puede usarlo para más de uno, dos o incluso tres ToggleButtons que haya creado.
... y finalmente ... para que funcione como se espera, hay que unir la función de palanca a un evento ("cambio" evento) de nuestro botón improvisada <label> (será click caso bec. No estamos alterando el checkbox directamente, por lo que no se puede disparar el evento change 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
});
});
Con CSS podemos definir backgorund-image o algún border para representar el cambio en el valor mientras <label> va a hacer el trabajo por nosotros en la alteración del valor de una casilla de verificación;).
Espero que esto ayude a alguien.
+ esta implementación parece estar funcionando correctamente también en dispositivos móviles, bec. La implementación CCS propuesta anteriormente por TDeBailleul no funcionaba correctamente en Android (navegador predeterminado Android 2.3.5, Opera Mobile en el mismo sistema estaba bien). –
Además, en lugar de '.addClass()' /'.removeClass() 'puede usar' .toggleClass() ', pero el método descrito define explícitamente las acciones para los valores' checked'/'unchecked'. –
En combinación con la respuesta this, también puede utilizar este tipo de estilo que es como un conmutador de configuraciones móviles.
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');
});
});
Podría ser mucho más bonito, pero da la idea.
Una de las ventajas es que puede ser animado con jQuery y/o CSS3
Fiddler
Try;
<li>Text To go with Toggle Button<span class = 'toggle'><input type = 'checkbox' class = 'toggle' name = 'somename' id = 'someid' /></span></li>
Y asegúrese de que en el
<head><link rel = 'stylesheet' src = 'theme.css'> (from jqtouch - downloadable online)
<link rel = 'text/javascript' src = 'jquery.js'> (also from jqtouch)
</head>
recordar cuando usted está codificando esto, solamente somename y someid puede cambiar en la etiqueta de entrada, de lo contrario no funciona.
Puede simplemente usar toggleClass() para rastrear el estado. A continuación, comprobar si el elemento tiene botón de la clase, así:
$("button.toggler").click(function() {
$me = $(this);
$me.toggleClass('off');
if($me.is(".off")){
alert('hi');
}else {
alert('bye');
}
});
Y uso el elemento button para los botones por razones semánticas.
<button class="toggler">Toggle me</button>
probar este bit:
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);
aquí es un ejemplo 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>
escribí [un tutorial] (http: // blog. felixhagspiel.de/index.php/posts/custom-inputs) acerca de cómo crear interruptores on/off con CSS3 solamente, no J S necesario. [Aquí puede ver la demostración] (http://custom-inputs.felixhagspiel.de/) –
Aquí hay un tutorial sobre [Cómo crear el complemento JQuery para convertir los botones de opción en botones de alternancia] (http://sgeek.org/ jquery-toggle-button-plugin-for-sliding-toggle-switches-sswitch /) y [Aquí puede ver la demostración] (http://www.demos.sgeek.org/sswitch-jquery-plugin-demo/) –