Casillas de verificación de iPhone usando MooTools -

Una de las interesantes mejoras en la interfaz de usuario proporcionada por el iPhone de Apple es su funcionalidad de control deslizante de casilla de verificación. Thomas Reynolds lanzó recientemente un complemento jQuery que le permite hacer que sus casillas de verificación parezcan controles deslizantes de iPhone. A continuación se explica cómo implementar esa funcionalidad utilizando el querido marco JavaScript de MooTools.

El XHTML

h2Off por defecto/h2pinput type="casilla de verificación" //ph2On por defecto/h2pinput type="casilla de verificación" marcada="marcada" //p

Así es como se incrusta inicialmente el código XHTML en la página. MooTools cambiará esto aleatoriamente.

El CSS

.iPhoneCheckContainer{ posición:relativa; ancho: 85px; altura: 27 píxeles; cursor:puntero; desbordamiento: oculto; }.iPhoneCheckContainer entrada{ posición:absoluta; arriba: 5px; izquierda: 30px; }.iPhoneCheckHandle{ pantalla:bloque; altura: 27 píxeles; ancho: 39px; cursor:puntero; posición:absoluta; arriba: 0; izquierda: 0; }.iPhoneCheckHandle .iPhoneCheckHandleBG{ posición:absoluta; ancho: 5px; altura: 100%; arriba: 0; izquierda: 0; índice z: 1; }.iPhoneCheckHandle .iPhoneCheckHandleSlider{ posición:absoluta; arriba: 0; izquierda: 0; altura: 27 píxeles; ancho: 39px; fondo:url(iphone-slider.png) sin repetición; índice z: 2; }label.iPhoneCheckLabelOn,label.iPhoneCheckLabelOff{ font-size:17px; altura de línea: 17px; peso de fuente: negrita; familia de fuentes: Helvetica Neue, Arial, Helvetica, sans-serif; transformación de texto: mayúscula; cursor:puntero; bloqueo de pantalla; altura: 22 píxeles; posición:absoluta; ancho: 52px; arriba: 0; }label.iPhoneCheckLabelOn{ color:#fff; fondo:url(iphone-on.png) sin repetición; sombra de texto: 0px 0px 2px rgba (0,0,0,0.6); izquierda: 0; relleno: 5px 0 0 8px; }label.iPhoneCheckLabelOff{ color:#8B8B8B; fondo:url(iphone-off.png) no repetir derecha 0; sombra de texto: 0px 0px 2px rgba (255,255,255,0.6); alineación de texto: derecha; derecha: 0; relleno: 5px 8px 0 0; }

El CSS es bastante simple pero observa que tenemos que definir clases para cada estado.

El JavaScript de MooTools

window.addEvent('domready',function(){(function($) {this.IPhoneCheckboxes = new Class({//implementsImplements: [Opciones],//optionsoptions: {checkedLabel: 'ON',uncheckedLabel: 'OFF' ,fondo: '#fff',containerClass: 'iPhoneCheckContainer',labelOnClass: 'iPhoneCheckLabelOn',labelOffClass: 'iPhoneCheckLabelOff',handleClass: 'iPhoneCheckHandle',handleBGClass: 'iPhoneCheckHandleBG',handleSliderClass: 'iPhoneCheckHandleSlider',elementos: 'entrada[tipo] =casilla de verificación]'},//inicializacióninitialize: función(opciones) {//establecer opcionesthis.setOptions(opciones);//elementosthis.elements = $$(this.options.elements);//observar casillas de verificaciónthis.elements.each( function(el) {this.observe(el);},this);},//un método que hace lo que quieras observar: function(el) {//desactiva opacityel.set('opacity',0);/ /crear contenedor divvar wrap = new Element('div',{'class': this.options.containerClass}).inject(el.getParent());//inyecta esta casilla de verificación en itel.inject(wrap);// ahora cree divs y etiquetas posterioresvar handle = new Element('div',{'class':this.options.handleClass}).inject(wrap);var handlebg = new Element('div',{'class':this. options.handleBGClass,'style':this.options.background}).inject(handle);var handleSlider = new Element('div',{'class':this.options.handleSliderClass}).inject(handle);var offLabel = new Element('label',{'class':this.options.labelOffClass,text:this.options.uncheckedLabel}).inject(wrap);var onLabel = new Element('label',{'class': this.options.labelOnClass,text:this.options.checkedLabel}).inject(wrap);var rightSide = wrap.getSize().x - 39;//fx instanciasel.offFx = new Fx.Tween(offLabel,{' property':'opacity','duration':200});el.onFx = new Fx.Tween(onLabel,{'property':'opacity','duration':200});//mouseup / event listeningwrap. addEvent('mouseup',function() {var is_onstate = !el.checked; //originalmente 0var new_left = (is_onstate? rightSide: 0);var bg_left = (is_onstate? 34: 0);handlebg.hide();new Fx.Tween(handle,{duration: 100,'property': 'left' ,onComplete: function() {handlebg.setStyle('left',bg_left).show();}}).start(new_left);//label animacionesif(is_onstate) {el.offFx.start(0);el. onFx.start(1);}else {el.offFx.start(1);el.onFx.start(0);}//set checkel.set('checked',is_onstate);});//carga inicial (el.checked){offLabel.set('opacity',0);onLabel.set('opacity',1);handle.setStyle('left',rightSide);handlebg.setStyle('left',34); } else {onLabel.set('opacity',0);handlebg.setStyle('left',0);}}});})(document.id);/* uso */var chx = new IPhoneCheckboxes() ;});

La clase permite personalizar qué eventos se adaptan al iPhone, las declaraciones de texto de las etiquetas y cómo se llama cada clase CSS. Además de las opciones dadas, no tienes nada más que hacer a menos que planees hackear la clase por completa.

Dulce, ¿no? Es curioso cómo emulamos la funcionalidad de una tecnología inferior (navegador móvil). Consideraría esta funcionalidad como una “prueba de concepto”, ya que aumentar el tamaño de fuente puede causar problemas en algunos navegadores. Sin embargo, un efecto genial: ¡considerélo para sus sitios web!