¿Cómo se crea un botón de alternancia?

Question

¿Cómo se crea un botón de alternancia?

Quiero crear un botón de alternancia en html usando css. Lo quiero para que cuando haga clic en él , se mantiene empujado y que cuando haga clic en él de nuevo se sale.

Si no hay forma de hacerlo solo usando css. ¿Hay alguna forma de hacerlo usando jQuery?

93

css html jquery

Author: Donny V., 2008-11-21

Source

15 answers

La interfaz de usuario de jQuery hace que la luz funcione al crear botones de alternancia. Solo pon esto

<label for="myToggleButton">my toggle button caption</label>
<input type="checkbox" id="myToggleButton" />

En su página y luego en su cuerpo onLoad o su $.ready() (o algunos literales de objetos init() funcionan si está construyendo un sitio ajax..) soltar un poco de jQuery como así:

$("#myToggleButton").button()

Eso es todo. (no olvide el < label for=...> porque jQueryUI lo usa para el cuerpo del botón de alternancia..)

A partir de ahí solo trabaja con él como cualquier otro input="checkbox " porque eso es lo que el control subyacente todavía es, pero jQuery Interfaz de usuario solo pieles que se vea como un botón de alternar bastante en la pantalla.

49

Author: bkdraper,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-07-21 13:02:01

Aquí hay 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>

22

Author: simple_human,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-28 04:12:33

En combinación con esta respuesta, también puede usar este tipo de estilo que es como mobile settings 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');
    });
});

Podría ser mucho más bonito, pero da la idea.
Una ventaja es que puede ser animado con jquery y / o CSS3
Fiddler

19

Author: Pierre de LESPINAY,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:32:33

Si quieres un botón adecuado entonces necesitarás algo de javascript. Algo como esto (necesita un poco de trabajo en el estilo, pero se obtiene la esencia). No se 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>

7

Author: monkey do,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2008-11-21 16:09:25

Solo puede usar toggleClass() para rastrear el estado. Luego comprueba si el elemento button tiene 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 botones por razones semánticas.

<button class="toggler">Toggle me</button>

4

Author: tim,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-30 00:32:17

Puede usar un elemento de anclaje (<a></a>), y usar un:active y un:link para cambiar la imagen de fondo para activar o desactivar. Sólo una idea.

Editar: El método anterior no funciona demasiado bien para alternar. Pero no necesitas usar jquery. Escriba una simple función onClick javascript para el elemento, que cambia la imagen de fondo apropiadamente para que parezca que el botón está presionado, y establezca alguna bandera. Luego, en el siguiente clic, la imagen y la bandera se revierten. Así

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 <div id="toggleDiv" onclick="toggle()">Some thing</div>

3

Author: anand.trex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2008-11-21 16:12:46

Me inclinaría a usar una clase en su css que altera el estilo de borde o el ancho del borde cuando el botón está presionado, por lo que da la apariencia de un botón de alternancia.

2

Author: Galwegian,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2008-11-21 15:20:15

No creo que usar JS para crear un botón sea 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 puedes darle estilo como quieras.

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

Espero que esto ayude

2

Author: Titouan de Bailleul,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-06-23 13:08:07

Prueba 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);

1

Author: Peter,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-08 10:56:01

Hay un plugin de jquery de Swizec , que puede hacer esto entre otras cosas: https://github.com/Swizec/styled-button

(El antiguo enlace era http://swizec.com/code/styledButton / , no probé completamente el reemplazo, solo lo encontré con Google.)

1

Author: Nickolay,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:54:34

Puede usar la pseudoclase "activa" (no funcionará en IE6, sin embargo, para elementos que no sean enlaces)

a:active
{
    ...desired style here...
}

0

Author: pilsetnieks,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2008-11-21 15:37:43

Aquí está uno de los ejemplos/variantes (descritos con más detalle) de ToggleButton usando jQuery con implementación <label for="input">.

1st crearemos un contenedor para nuestro ToggleButton usando 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 definiremos la función para cambiar nuestro botón. Nuestro botón en realidad es el habitual <label> que vamos a estilizar para representar el cambio 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)
}

La función se implementa de forma reutilizable. Puede usarlo para más de uno, dos o incluso tres botones que has creado.

... y finalmente ... para que funcione como se espera, debemos enlazar la función toggle a un evento ("change" event) de nuestro improvisado botón <label> (será click event bec. no estamos alterando el checkbox directamente, por lo que no se puede disparar ningún 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 que <label> hará el trabajo por nosotros al alterar el valor de una casilla de verificación ;).

Espero que esto ayude a alguien.

0

Author: Paul T. Rawkeen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-07-24 15:39:27

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>

Recuerda cuando estés codificando esto, solo somename y someid puede cambiar en la etiqueta de entrada, de lo contrario no funciona.

0

Author: ЯegDwight,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-03 12:10:24

En cuanto a que yo también estaba buscando una respuesta, y quería completarla con CSS. He encontrado la solución por CSS NINJA Es un buen impulso de <input type="checkbox"> y algunos css Demo en vivo ! Aunque no está funcionando en IE 8 se podría implementar selectivizr ! y arreglar CSS donde utiliza opacity a filter para que funcione en IE.

EDITAR 2014:

Para los nuevos botones de alternancia uso la solución que se encuentra en Lea Verou blog visualmente similar a iOS casilla de verificación

0

Author: Aivaras Prudnikovas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-20 16:16:03

score 87 · Accepted Answer

La buena forma semántica sería usar una casilla de verificación, y luego darle estilo de diferentes maneras si está marcada o no. Pero no hay buenas maneras de hacerlo. Tienes que añadir span extra, div extra, y, para un aspecto realmente agradable, añadir algo de javascript.

Así que la mejor solución es usar una pequeña función jQuery y dos imágenes de fondo para estilizar los dos estados diferentes del botón. Ejemplo con un efecto arriba / abajo dado por bordes:

$(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 que representan botón arriba y botón abajo, y hacer que el color de fondo sea transparente.