Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. JavaScript
Webdesign

Navegación desplegable: Cómo mantener la opción seleccionada al cargarse la página

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

Imagina que estás utilizando un elemento <select> para navegar entre páginas; normalmente, la selección volverá a su opción predeterminada cuando la página se vuelva a cargar. Hoy vamos a aprender cómo mantener la opción seleccionada, asegurándonos de que cualquier página que hayas seleccionado permanezca seleccionada incluso una vez que se haya presentado la nueva página. Para probarlo, utilizaremos un proyecto de demostración con algunas páginas estáticas. ¡Comencemos!

Estructura del proyecto

La estructura del proyecto se ve así: unas pocas páginas HTML con algunos recursos:

Los archivos HTML

Dentro de cada una de las páginas HTML hay un elemento select:

Cada opción está asociada a una página estática. El enlace a la página correspondiente se almacena en el atributo data-url.

En un caso real, nuestro menú de selección puede contener las categorías de todas las publicaciones del blog. Así que imaginemos que al seleccionar la opción all, aparecen todas las publicaciones del blog. Entonces, si seleccionamos la opción Animals, aparecerán las publicaciones que pertenecen a la categoría Animals, y así sucesivamente.

El atributo data-url podría contener una url absoluta en vez de una relativa, de esta forma:

El archivo CSS

De forma predeterminada, existen limitaciones en los navegadores con respecto a los estilos que podemos aplicar a un elemento select. Por ejemplo, no exsite un enfoque de CSS en todos los navegadores para estilizar el elemento option.

Pensando en eso, agreguemos solo unas pocas reglas CSS que mejorarán la apariencia de select en todos los navegadores:

styling the select element
Un elemento de selección estilizado (y un emoji para especificar en qué página estamos)

Aquí están los estilos:

Vale la pena citar que hay varias bibliotecas potentes de JavaScript disponibles para manipular el elemento select. Dos ejemplos son Chosen.js y Select2.js.

El archivo JavaScript

Cada vez que una opción es seleccionada, la página relacionada debe cargarse y la opción objetivo debe marcarse como seleccionada. Cubriremos dos métodos similares que implementan esto.

Primer método

Con respecto al primer método, tenemos que hacer lo siguiente:

  1. Recuperar la URL de la página relacionada con la opción seleccionada y forzar una redirección a esta página.
  2. Reiterar a través de todas las opciones, tomar su valor de atributo data-url, y comprobar si este valor es parte de la url de la página o no. Si es así, marcamos la opción relacionada como seleccionada y saltamos fuera del bucle.

Aquí está el código requerido:

Como ya se mencionó antes, en un proyecto real, el valor del atributo data-url podría ser una url absoluta. En tal escenario, podemos actualizar la segunda parte de nuestro código de la siguiente forma:

Nota: En vez de añadir el atributo select a la opción correspondiente a través de JavaScript, podríamos haberlo establecido estáticamente en el archivo HTML. Por ejemplo, en la página Animales podríamos haber añadido el atributo select a la opción Animals. No obstante, este no es un enfoque flexible porque en un sitio dinámico todas las opciones (que podrían contener categorías de publicaciones) posiblemente compartirán la misma página / plantilla (más sobre esto en un próximo tutorial de WordPress).

Segundo método

El segundo método, que es muy similar al primero, aprovecha el almacenamiento local.

Respecto a este método, tenemos que hacer lo siguiente:

  1. Recuperar la URL de la página relacionada con la opción seleccionada, guardarla en el almacenamiento local y forzar la redirección a esta página.
  2. Repetir a través de todas las opciones, tomar su valor data-url y verificar si este valor es igual al valor almacenado en el almacenamiento local o no. Si es así, marcamos la opción relacionada como seleccionada y saltamos fuera del bucle.

Aquí está el código requerido:

Nota: Esta solución viene con una limitación. Si navegamos a una página (por ejemplo, la página Animals) sin haber primero seleccionado  la opción relacionada, no veremos la opción esperada como seleccionada. Eso ocurre porque o bien no hay ningún valor de url en el almacenamiento local o el valor almacenado no es el correcto.

Conclusión

En este tutorial, discutimos dos métodos para mantener la opción seleccionada al cargarse la página. Aunque usamos algunos datos estáticos como demostración, espero que entiendas la idea y puedas aplicar los conocimientos adquiridos en tus proyectos.

En un próximo tutorial, examinaremos cómo incorporar las técnicas que aquí tratamos en un sitio web de WordPress. ¡Hasta la próxima!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.