Adaptar mi código js a una entrada

Tengo este código javascript que crea un control deslizante:

http://jsfiddle.net/samccone/ZMkkd/

Ahora, quiero usar este código en una entrada de casilla de verificación. el problema es que el código crea un elemento hijo que se desliza en su padre usando una posición css, y una entrada no puede tener un hijo.

Mi idea era usar background-position y simplemente deslizar el fondo de la entrada de izquierda a derecha usando CSS en lugar de usar el posicionamiento real.

¿Cómo puedo adaptar este guión? Creo que es bastante fácil, pero después de un par de intentos me di por vencido, no soy lo suficientemente bueno :).

Gracias por tu ayuda,

Christopher

preguntado el 16 de mayo de 11 a las 18:05

Tal vez sea mejor usar lo que tiene, diseñarlo como lo necesite y tener el estado de encendido / apagado adjunto al valor de una entrada oculta. -

El código final se distribuirá, así que quiero que sea perfecto :) Por eso prefiero el código personalizado a un código desordenado "funciona". -

Nunca responderé una pregunta que diga: "¿Alguien puede adaptar este guión por mí?". Con mucho gusto responderé preguntas, ¡pero no funcionaré para usted! -

editó mi pregunta. :pag. De todos modos, creo que hacer el trabajo por alguien solo es malo si esa persona no se ha esforzado en intentarlo. Como he intentado durante 1 hora hacer que esto funcione, creo que pedir ayuda a otros no es inapropiado :). -

ese control deslizante fue divertido. Lo intenté una y otra vez. weeeeeee ... -

2 Respuestas

Lo crea o no, para las casillas de verificación es posible crear un efecto de cambio sin JavaScript.

Si sigue su casilla de verificación con una etiqueta:

<input type="checkbox" id="jim" />
<label for="jim"></label>

Verá que puede seleccionar la etiqueta con el siguiente selector de hermanos:

input + label { /* some CSS */ }

¿Por qué es útil eso? Porque al usar el pseudo selector: marcado, ahora puede diseñar la etiqueta según el estado de la casilla de verificación:

input + label { background-position: 0 0; }
input:checked + label { background-position: 100% 0; }

Claramente, debido al atributo for = "jim", hacer clic en la etiqueta cambiará el estado de la casilla de verificación. Así que si usted ocultar la casilla de verificación, terminará con una etiqueta con estilo en la que se puede hacer clic.

input { display: none; }

Por supuesto, las etiquetas pueden tener hijos, por lo que puede ser tan elegante como desee con su recreación de un interruptor. Y debe tener cuidado de incluir: estilos de enfoque también, para las personas que se desplazan a su casilla de verificación en lugar de hacer clic en ella.

Para los navegadores que no son compatibles con la pseudoclase: comprobada (IE8 y anteriores), es bastante fácil de emular con un controlador global y una clase 'comprobada'. Algo como:

jQuery(document).bind('change', function(e){
  var elem = jQuery(e.target);

  // If this is not a checkox, do nothing.
  if (elem.attr('type') !== 'checkbox') { return; }

  // Add or remove checked class based on current state.
  if (elem.attr('checked')) { elem.removeClass('checked'); }
  else { elem.addClass('checked'); }
});

...Deberías hacerlo.

contestado el 21 de mayo de 11 a las 06:05

Es posible que deba almacenar algunos datos en las propiedades del objeto (o el .data() api), pero su idea de posición de fondo debería funcionar bien. Simplemente reemplace sus llamadas a .offset().left con .css('background-position') (tendrás que split y parseInt la cadena que devuelve aunque) y mantenga el plugin alejado.

contestado el 17 de mayo de 11 a las 00:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.