Los botones de entrada se utilizan en formularios web donde el usuario debe seleccionar una opción de una colección más grande. Esto sucede a menudo con valores únicos como suscripciones a boletines, configuraciones de perfil y categorías de envío. Siempre me han gustado los botones de entrada de estilo antiguo de Digg en los que haces clic en un enlace para elegir tu categoría de historia.
En este tutorial quiero demostrar cómo podemos construir una interfaz similar usando CSS3 y jQuery. Todos los botones de opción de entrada aún están presentes en el formulario, pero están ocultos en la página. En su lugar, actualizamos la opción seleccionada utilizando JavaScript e incluso tenemos la posibilidad de mostrar este valor en HTML (o devolverlo a un script de fondo). Echa un vistazo a mi muestra de muestra para tener una idea de lo que estamos construyendo.
Demo en vivo - Descargar código fuente
Construyendo la pagina web
Primero necesitamos descargar una copia local de jQuery e incluir un enlace a un documento CSS externo llamado estilos.css. El código JS no es demasiado complicado, pero puede beneficiarse moviéndolos a un archivo .js separado. Depende de si su sitio web requiere secuencias de comandos adicionales que reducirían el tiempo al renderizar la página.
Ahora el cuerpo de la página interior contiene un pequeño número de piezas importantes. Tenemos un lapso usando la ID #radiovaltxt que es como estoy mostrando la entrada seleccionada. Cada vez que un usuario hace clic en uno de los enlaces de la página, este valor de intervalo se actualiza con el valor de entrada seleccionado actualmente. Debajo de esto, he creado un nuevo formulario que no carga nada: es más bien un marcador de posición para ver cómo debe verse el HTML.
Encontraras el div #radiobtns contiene una serie de filas div que además contienen listas de elementos no ordenados. Cada fila se basa en un solo tema de categoría y el usuario puede seleccionar una de las opciones para marcar la categoría seleccionada. Solo copié una fila de enlaces, pero todos están estructurados de manera muy similar.
Una pieza importante a comprender es que la ID del enlace de anclaje coincide con el valor correspondiente del botón de entrada. Así es como podemos determinar en qué enlace se ha hecho clic y cómo coincide con la selección de radio. Encontrará estas entradas reales ubicadas dentro de un div #fullradios en la parte inferior del formulario.
Los tengo ocultos por defecto y todo el propósito es nunca mostrarlos en la página. Si los usuarios pueden interactuar con nuestra propia interfaz personalizada, entonces nunca será necesario que manipulen las entradas de radio. Por supuesto, podríamos construir las entradas vinculadas a una etiqueta que no requiere jQuery. Pero el efecto también es más difícil de lograr y requiere navegadores web compatibles con CSS3.
Estilo de los enlaces de gato
Mi hoja de estilo predeterminada incluye todos los reinicios típicos y la estructura de la página como cabría esperar. Los campos de entrada se ocultan utilizando pantalla: ninguna apuntando el elemento div padre. Además, el texto de separación está diseñado para que aparezca centrado naturalmente hacia la parte superior de la página. Probablemente no lo usará en un sitio web en vivo, sino que pasará el valor al formulario usando un campo oculto.
Cada fila tiene una sola lista desordenada y el primer elemento recibe una clase de .padre. Así es como he organizado la lista de categorías. El elemento padre en sí no es un enlazar designado para cualquier entrada. Podría cambiar esto en su propio diseño, pero tiene más sentido utilizar un tipo de etiqueta de categoría principal para definir las opciones. A este elemento principal se le asigna un ancho fijo de 110 px para proporcionar más espacio entre los enlaces.
También escribí una clase notable de .sel que se aplica sobre el elemento de enlace seleccionado. Una vez que un usuario hace clic en uno de los valores de enlace, necesitamos que sepan que se ha seleccionado y confirmado. Esta clase seleccionada se eliminará y se volverá a aplicar a nuevos enlaces a medida que el usuario cambie de categoría.
Selección de entrada con jQuery
Para seleccionar y deseleccionar manualmente los botones de radio, debe profundizar un poco en jQuery. Hay muchas preguntas populares en Stack Overflow que abordan esta idea, y las técnicas han cambiado en las distintas iteraciones de la biblioteca de jQuery. Esta secuencia de comandos se encuentra en la parte inferior de la página index.html y la desglosaré en segmentos para facilitar su comprensión.
Cuando un usuario hace clic en uno de estos enlaces, inmediatamente usamos event.preventDefault () pasando la variable de evento click. Esto evita que el valor HREF se cargue, por lo que no obtenemos el salto de página asociado con los enlaces hash. La variable catid es una cadena formada en la sintaxis de un selector jQuery.Toma el ID de enlace y lo vuelve a formar en el valor de ID de la entrada de radio correspondiente. La otra variable entrada comprobada obtiene el valor de la radio seleccionada actualmente: si no se selecciona nada, obtenemos un valor de retorno no definido.
Así que ahora podemos dividir más en el código lógico al verificar primero si ya no hay nada seleccionado. En este caso, usamos el método .prop () de jQuery para establecer la propiedad marcada. De lo contrario nos dirigimos a cada radio usando entrada [nombre = 'categoría'] y elimine la opción marcada para que vuelva a no seleccionarse. Luego actualizamos según el enlace de radio en el que se hizo clic más recientemente.
Después creo otra variable. newval que de nuevo comprueba el valor de radio actualmente seleccionado. Si este valor coincide con el ID del enlace, entonces sabemos que se ha verificado con éxito y mostramos el nuevo valor en HTML. Probablemente, este paso no será útil en ningún sitio web de producción en vivo, pero es bueno para esta demostración ver cómo funciona todo detrás de escena.
Este último fragmento de código trata de actualizar el enlace seleccionado actualmente. Si el enlace actual ya tiene una .sel Clase entonces ya ha sido seleccionado y no hacemos nada. De lo contrario es más fácil apuntar a cada enlace dentro #radiobtns y eliminando la clase, para luego actualizar nuestro enlace actual usando $ (this) .addClass ('sel').
Recuerda $ (esto) es simplemente un marcador de posición para cualquier selector jQuery actualmente activo, y en este caso estamos hablando del evento de clic que se realiza en cualquiera de los enlaces de categoría.
Demo en vivo - Descargar código fuente
Solo puedo imaginar la gran cantidad de soluciones para por qué los desarrolladores usarían entradas de radio. Las técnicas web modernas ofrecen mucho en cuanto al diseño de la interfaz de usuario, y esta es una forma interesante de personalizar una experiencia de botón de radio en algo completamente único.
Espero que este tutorial pueda proporcionar algunas ideas a los desarrolladores web que trabajan con formularios grandes y campos de entrada. También puede descargar una copia de mi código fuente de tutorial para ver exactamente cómo funciona en su propia computadora.