Micaela 10 de Septiembre de 2009 a las 14.19

jQuery: Transformar dropdowns en listados al imprimir la página

javascript, imprimir, jQuery, diseño web, dropdowns, select

jquery Al imprimir una página web con elementos <select> en la misma, el dropdown selecto se imprime tal cual luce. Esto por supuesto limita la utilidad en una página impresa ya que se puede estar ocultando detalles de vital importancia.

Por eso, en esta nota te explicaremos una buena forma de transformar los menúes desplegables en listas para las versiones imprimibles de nuestra página web.
Una opción es conseguir que todos los elementos HTML select de una lista desordenada dupliquen el mismo contenido. Ocultar las listas desordenadas en tu pantalla CSS regular, pero luego revelarlas con tu hoja de estilo de impresión. Este es un enfoque razonable en mi opinión, excepto por el hecho de que es una molestia importante tener que hacer esto cada vez.

Como tan a menudo hacemos, vamos a apoyarnos en jQuery para que haga el trabajo pesado en nuestro lugar:

1. Recorrer cada select en la página
2. Insertar un DIV después de estos con un UL para las opciones.
3. Recorrer cada opción en ese select y agregar LI 's al UL .
4. Asegurarse de que el DIV esté oculto en general (display: none está bien) y se muestra en la hoja de estilos de impresión.

PLAIN TEXT