Para darle estilo al elemento, CSS debería ser suficiente. Pero, bueno, no es suficiente en términos de accesibilidad. Presentamos EasyDropDown.js, un plugin de jQuery gratuito para cubrir todos esos defectos.
EasyDropDown.js puede personalizar fácilmente el elemento de select antigua en su página web con muchas características. Después de la elemento se ha aplicado con este complemento, obtendrá control completo del teclado con búsqueda textual. Esta herramienta también proporciona un desplazamiento interno para los elementos en listas largas para limitar el tamaño del cuadro desplegable. La forma y la validación están disponibles también, lo que ayuda con la compatibilidad.
Instalación
Para instalar EasyDropDown, primero incluya la biblioteca jQuery en su página web. Asegúrate de incluir también el javascript (obténgalo aquí) así:
Y su archivo CSS dentro de la etiqueta principal:
.. ..
Si está usando otro tema, asegúrese de copiar los archivos dentro de su carpeta web. No se preocupe, ya que no necesita incluirlos en el HTML para llamarlos.
Diseñando el Select
Al usar EasyDropDown.js, puede crear un menú desplegable personalizable con un marcado semántico limpio. Los elementos select se pueden diseñar solo en HTML. Puede desactivar el elemento, definir una opción seleccionada o agregar una etiqueta fácilmente .
Para darle un estilo, primero debe incluir una clase dropdown en las etiquetas. Se puede agregar una label dando una clase de label dentro de la opción. Aquí está el marcado básico:
Eso es todo, no necesitas ningún javascript personalizado para agregar. Ahora el pésimo y pasado de moda se ha convertido en una hermosa y elegante entrada desplegable.
Si desea agregar una opción preseleccionada simplemente entregue su menú desplegable con el atributo selected . Recomendamos no utilizar etiquetas con esta configuración ya que el valor seleccionado anulará la etiqueta .
... ...
También puede desactivar el menú desplegable utilizando el atributo disabled manera:
...
Listo para usar temas
EasyDropDown.js viene con 2 temas más listos para usar: Metro y Flat . Para usar los temas, puede utilizar el data-attribute HTML5.
Dentro de etiqueta, llame data-settings='{"wrapperClass":"theme-name"}' para aplicar otro tema. Siéntase libre de cambiar el theme-name del theme-name con los nombres de tema disponibles: metro o flat . Aquí está el ejemplo:
...
Además de wrapperClass, hay más configuraciones que puede agregar, consulte la página de documentación para obtener más información. Si está satisfecho con el código de JavaScript, puede ver el tutorial allí.
Hablemos de la alineación vertical en CSS o, para ser más precisos, de cómo no es factible. CSS aún no ha proporcionado una forma oficial de centrar el contenido verticalmente dentro de su contenedor. Es un problema que probablemente ha frustrado a los desarrolladores web de todo el mundo. Pero no temas, en este post, vamos a correr por ti algunos trucos que pueden ayudarte a imitar el efecto .Sin
PowerPoint es una de las herramientas de presentación más populares. Sin embargo, carece de funciones interactivas, sin las cuales su presentación puede llegar a ser lo suficientemente aburrida como para llevar a la gente al aburrimiento. Bueno, eso es lo último que deseas al crear una presentación, ¿verdad?No se