botón de alternar iPhone usando jQuery

Question

¿Hay un complemento jQuery para emular un botón de alternar de iPhone?

Answer 1

no estoy seguro de cuál es el efecto esperado, pero supongamos que desea un control deslizante que cubre azul 'On' y revela gris 'Off'

Mi propuesta: http://jsfiddle.net/GzL87/1/

Answer 2

Aquí tiene compañero:

http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html

Answer 3

Th es un plugin jquery bastante agradable y fácil: http://simontabor.com/toggles/

Answer 4

Tomé @ Randomblue's solution y lo usé como base para crear un control deslizante más involucrado que tenga soporte completo para ARIA standards. Está construido sobre jQuery y jQuery UI. Se me requirió tener soporte de ARIA en IE9 y JAWS 14, y las soluciones jQuery listas para usar tienen un comportamiento extraño en este aspecto a pesar del supuesto soporte.

La solución es un plugin jQuery simple que convierte un div con entradas de radio en un control deslizante.

Así que dado el HTML:

<div id="myToggle" 
    class="slider-toggle-container" 
    style="float: left" 
    data-initialvalue="0" 
    data-height="50" 
    data-width="90" 
    data-ballwidth="24" 
    data-tabindex="undefined" 
    data-speed="150"> 

    <span id="myToggleLabel" class="slider-toggle-label-text"> 
     Like this toggle? 
    </span> 

    <label for="leftInput">YES</label> 
    <input id="leftInput" type="radio" name="enabled" value="1"> 

    <label for="rightInput">NO</label> 
    <input id="rightInput" type="radio" name="enabled" value="0"> 

</div> 

crea una, puede hacer clic, palanca deslizante ARIA-compatible que pueden arrastrarse.

El código completo: http://jsfiddle.net/reesbyars/JrVgt/

Answer 5

utilizo jQuery UI Plugin Switchbutton Demostración: http://naeka.github.io/jquery-switchbutton/ Fuente: https://github.com/tdreyno/iphone-style-checkboxes