Share
Una de mis nuevas etiquetas HTML5 favoritas, que recientemente se ha integrado en Chrome (a partir de la versión 12), es la detalles elemento. Te enseñaré a usarlo en el consejo rápido de hoy..
Accentsconagua
detalles Etiqueta hacer?Básicamente, nos permite mostrar y ocultar contenido con el clic de un botón. Seguramente estás familiarizado con este tipo de efecto, pero, hasta ahora, siempre se había logrado con JavaScript. Imagine un encabezado con una flecha al lado, y cuando haga clic en él, se mostrará información adicional a continuación. Al hacer clic en la flecha nuevamente se oculta el contenido. Este tipo de funcionalidad es muy común en las páginas de preguntas frecuentes..
Aquí hay un ejemplo de dos minutos de este tipo de efecto. (Tipo
Control + Enterpara procesar el JavaScript.)
los detalles Element nos permite omitir el JavaScript por completo. O, mejor dicho, eventualmente lo hará. El soporte del navegador es todavía un poco escaso.
Así que vamos a bucear y aprender a usar esta nueva etiqueta. Comenzamos creando una nueva detalles elemento.
A continuación, tenemos que darle un título, o resumen del contenido dentro de.
Quien va a la universidad?
Por defecto, en los navegadores que entienden el detalles elemento, todo dentro de él - aparte de la resumen etiqueta - se ocultará. Añadamos un párrafo después de la resumen.
Quien va a la universidad?
Tu mamá.
Continúe y pruebe la demostración en Chrome 12 o superior (a partir del 17 de noviembre de 2011).
Está bien, vamos a hacer algo un poco más práctico. Quiero mostrar varios artículos de Nettuts + usando el detalles elemento. Primero creamos el marcado para un solo artículo..
Cavar en dojo
Cavar en Dojo: DOM Basics
Tal vez viste ese tweet: “jQuery es una droga de entrada. Esto lleva a un uso completo de JavaScript. "Parte de esa adicción, sostengo, es aprender otros marcos de JavaScript. Y de eso se trata esta serie de cuatro partes en el increíble Dojo Toolkit: llevarte al siguiente nivel de tu adicción a JavaScript.
A continuación, le daremos un toque de estilo..
body font-family: sans-serif; detalles desbordamiento: oculto; fondo: # e3e3e3; margen inferior: 10px; bloqueo de pantalla; resumen de detalles cursor: puntero; relleno: 10px; detalles div float: left; ancho: 65%; detalles div h3 margen superior: 0; detalles img float: left; ancho: 200px; relleno: 0 30px 10px 10px;
Tenga en cuenta que le estoy mostrando la abierto Estado para mayor comodidad, pero cuando se carga la página, solo verá el resumen texto.
Si prefiere estar en este estado por defecto, agregue el
abiertoatribuir a ladetalleselemento:
No es tan sencillo diseñar la flecha como podemos esperar. Sin embargo, es posible; la clave es usar el -webkit-detalles-marcador pseudo clase.
resumen de detalles :: - webkit-details-marker color: verde; tamaño de fuente: 20px;
En caso de que necesite utilizar un icono personalizado, posiblemente la solución más fácil es ocultar la flecha (utilizando la pseudo clase anterior) y luego aplicar una imagen de fondo a la resumen elemento, o utilizar el :después o :antes de pseudo elementos.
Ver el proyecto final..
Ciertamente es un efecto simple, pero seguro que es bueno tener una característica tan común incorporada. Hasta que podamos utilizar de forma fiable el detalles En todos los navegadores, puede utilizar este polyfill para proporcionar soporte de respaldo. Una nota final: en el momento de escribir esto, no parece haber una manera de alternar los contenidos con un teclado. Esto podría presentar algunos problemas de accesibilidad..
