Creación de un estilo de iOS alterna con JavaScript y CSS3-switch. js

Vista prévia

Descripción

Sólo otro plugin de JavaScript utilizado para la creación personalizable, CSS3 animado, interruptores de palanca de encendido/apagado estilo iOS de entradas de casilla de verificación regulares.

Funcionamiento

En primer lugar, debe cargar los siguientes recursos necesarios en la Página Web.

<link rel="stylesheet" href="dist/switch.css">
<script src="dist/switch.js"></script>

Cree una casilla de verificación normal en la Página Web.

<input type="checkbox" class="demo">

El código JavaScript para representar un nuevo conmutador de alternancia en la Página Web.

var mySwitch = new Switch('.demo');

Aplique las siguientes opciones de personalización al conmutador de alternancia.

var mySwitch = new Switch('.demo',{



// default | small | large


size: 'default',



// state of switch and checbox


checked: undefined,



// text for ON state


onText: 'Y',



// text for OFF state


offText: 'N',



// custom colors


onSwitchColor: '#64BD63',


offSwitchColor: '#fff',


onJackColor: '#fff',


offJackColor: '#fff',



// show text


showText: false,



// disable the toggle switch


disabled: false,



// callback functions


onInit: noop,


onChange: noop,


onRemove: noop,


onDestroy: noop



});

API methods.

var mySwitch = new Switch('.demo',{



// options here

});

// toggle on
mySwitch.on();

// toggle off
mySwitch.off();

// toggle
mySwitch.toggle();

// disable
mySwitch.disable();

// re-enable
mySwitch.enable();

// destroy
mySwitch.destroy();

// remove
mySwitch.remove();