Get best of the week

Opción de selección de estilo (casi) sin JavaScript

Diseñar algunos elementos estándar es una tarea bastante no trivial.

Por supuesto, un buen especialista puede estilizar cualquier cosa, pero todo depende de la complejidad de esta acción.

Llevará bastante tiempo estilizar los botones de opción y las casillas de verificación: la idea de diseñar una etiqueta con entrada oculta no es nueva, y se ha utilizado durante mucho tiempo en todas partes.

Para estilizar el resto, hay JavaScript.

Hoy quiero contarles cómo es relativamente fácil diseñar listas desplegables con un código JavaScript mínimo (de 0 a 26 líneas) y un marcado HTML adicional mínimo.

Fácil de seleccionar sin JavaScript (casi)

El otro día, como suele suceder, tuve que diseñar una lista desplegable. Sin embargo, se convirtió en una lista desplegable solo en la versión móvil, antes de eso se comportó como el grupo más común de botones de radio.

Y así, cuando casi terminé de escribir otra construcción espeluznante diseñada para reemplazar al desafortunado Select, tuve una pregunta:

¿Por qué?

Por lo general, esta pregunta lleva a una sabia postergación, un replanteamiento de la vida, etc., pero esta vez algo salió mal, y me di cuenta de que la pregunta era realmente buena y, lo más importante, útil.


Un pequeño programa educativo: por lo

tanto, para aquellos que están en el tanque, así como para aquellos a quienes las listas desplegables causan tanto dolor que decidieron olvidarse de ellos como una pesadilla, les recordaré un poco (realmente) de qué se trata.

Las listas desplegables constan de 2 elementos principales :

  1. Seleccionar - contenedor para toda la lista
  2. Opción : elemento de lista

A veces también se usa OptGroup (un grupo de elementos de lista), pero su implementación hasta ahora permanece en JavaScript.

La funcionalidad principal de la lista desplegable es enviar información sobre los elementos seleccionados al servidor.

Para completar, aquí hay una lista de atributos de elementos (para que pueda estimar cuántos de ellos se implementarán):

  1. Seleccionar : deshabilitado , formulario , múltiple , nombre , requerido , tamaño
  2. Opción : deshabilitado , etiqueta , seleccionado , valor

Sobre esto, tal vez, terminemos con la descripción y pasemos a la implementación .


Muchas palabras ya se han escrito, por lo tanto, más cerca del código:

<form>
  <div class="content">
    <h3 class="title"> 0 </h3>

    <input id="selectName0" type="radio" value="0" name="selectName" />
    <label for="selectName0"> 0 </label>
    <input id="selectName1" type="radio" value="1" name="selectName" />
    <label for="selectName1"> 1 </label>
    <input id="selectName2" type="radio" value="2" name="selectName" />
    <label for="selectName2"> 2 </label>
  </div>
</form>

Entonces, ¿para qué sirve este código? (todo lo que se puede prescindir cuando la explicación se elimina especialmente)

Observemos qué elementos de la funcionalidad Seleccionar y Opción se han hecho posibles automáticamente debido al uso de entrada + etiqueta:

  1. Seleccionar - forma, nombre, requerido
  2. Opción : deshabilitado, etiqueta, seleccionado, valor

Y eso es todo lo que queda por implementar:

  1. Seleccionar : deshabilitado, múltiple, tamaño
  2. Opción : totalmente implementado

Simplemente agregando los paquetes input + label, redujimos la lista de funcionalidades necesarias de 10 puntos a 3. No está mal, pero este no es el final, ¿verdad?

Para implementar el elemento Select.multiple (opción múltiple), simplemente haga esto:

<form>
  <div class="content">
    <input id="selectName0" type="checkbox" value="0" name="selectName" />
    <label for="selectName0"> 0 </label>
    <input id="selectName1" type="checkbox" value="1" name="selectName" />
    <label for="selectName1"> 1 </label>
    <input id="selectName2" type="checkbox" value="2" name="selectName" />
    <label for="selectName2"> 2 </label>
  </div>
</form>

Simplemente cambiamos el tipo de entradas de Radio a Checkbox , y obtenemos un análogo casi completo de múltiples .

La diferencia es que para la selección múltiple no necesita sujetar ctrl (bueno, si alguien quiere imitar completamente la funcionalidad, JavaScript para ayudar).

¿Lo que queda?

  1. Seleccionar - deshabilitado, tamaño
  2. Opción : totalmente implementado

Bueno, tanto Select.disabled como Select.size son extremadamente simples de implementar usando CSS:

  • Select.size : qué tamaño establecerá. Solo necesita agregar el contenedor.
  • Select.disabled : para el contenedor, debe agregar eventos de puntero: ninguno para cancelar la reacción a cualquier acción del usuario (desplazamiento, clics, etc.), bueno, puede hacerlo un poco transparente.

Entonces, la funcionalidad principal es. ¿Lo que falta?

También debe agregar el encabezado autocompletar para el menú desplegable con la única opción, y también habrá un problema al restablecer el formulario (botón Restablecer ), el título no se restablecerá. Pero incluso esto es completamente solucionable (usando JavaScript).


Y ahora, ejemplos:

una pequeña implementación (menú desplegable con una sola opción):


Y un poco más (no es un menú desplegable con múltiples opciones):


Bonificación: no sé por qué hice esto, pero ... un menú desplegable con una sola opción y un restablecimiento de encabezado basado en CSS:





¿Por qué se necesita esto?

Debido al hecho de que, a juzgar por los comentarios, no todos entienden por qué este código será útil, considero necesario dar algunas aclaraciones.

Al diseñar listas desplegables del formulario:
<select>
  <option> 1</option>
  <option> 2</option>
</select>

Existen serias limitaciones de estilo. Por lo tanto, se reemplazan con listas simples:
<ul>
  <li> 1</li>
  <li> 2</li>
</ul>

con el que se cuelga toda la funcionalidad necesaria usando JavaScript.

Dado que las listas inicialmente no interactúan con los formularios de ninguna manera , esto causa problemas.

No solo es necesario implementar toda la funcionalidad básica:

  • puntos de cambio y su interacción
  • estado (marcado, deshabilitado)
  • vinculando al formulario y enviando datos al servidor
  • inicialización de datos iniciales (autocompletar)
  • restablecimiento de formulario (cuando hace clic en el botón "restablecer", la lista debe volver al estado durante la inicialización)


De hecho, si algo se rompe en JavaScript, no importa, porque la secuencia de comandos no se cargó, surgió un error, se hicieron cambios; si ocurre algún problema, la lista desplegable se convierte en ... algo que parece una lista desplegable, pero no funciona.
Generalmente. De ninguna manera.

Para el usuario, se verá así: hay una lista desplegable, pero no puede trabajar con ella.

Para el servidor, esto se verá aún "más divertido": ha llegado un formulario en el que no hay suficientes datos. Es bueno que tal situación se haya previsto de antemano cuando se desarrolle ... Después de todo, se previó, ¿verdad?


Ventajas de la solución resultante:

  • ( ), . JavaScript ( ). , — . , — / — html ( JS), .
  • . , , ( ). ul — li , .



(. , , JavaScript' / ):

  • tab
  • ( select -)
  • ( , )
  • select ( select . select)
  • , (JS )
  • ( OptGroup) (, )


Como puede ver, ninguna de las desventajas anteriores es crítica para la gran mayoría de las listas, y si es necesario se implementa usando JavaScript, y por lo tanto ...


¡Bienvenido al mundo donde sus bibliotecas para diseñar listas tipo Seleccionar-Opción se volverán un poco más pequeñas, y trabajar con estas listas sin bibliotecas será casi cómodo!



UPD: como resultó, en el caso de las casillas de verificación, el atributo requerido no funciona correctamente, y también debe ser emulado usando JavaScript (en este momento, todas las casillas marcadas como requeridas se vuelven obligatorias, y solo ellas)

More articles:


All Articles