Share
Uno dei miei nuovi tag HTML5 preferiti, che è stato integrato solo di recente in Chrome (dalla versione 12), è il dettagli elemento. Ti mostrerò di usarlo nel suggerimento rapido di oggi.
Accentsconagua
dettagli Tag Do?In sostanza, ci consente di mostrare e nascondere i contenuti con il clic di un pulsante. Hai sicuramente familiarità con questo tipo di effetto, ma, fino ad ora, era sempre stato raggiunto con JavaScript. Immagina un'intestazione con una freccia accanto ad essa e quando fai clic su di essa, le informazioni aggiuntive di seguito diventano visibili. Cliccando di nuovo sulla freccia si nasconde il contenuto. Questo tipo di funzionalità è molto comune nelle pagine delle domande frequenti.
Ecco un esempio di due minuti di questo tipo di effetto. (Genere
Control + Invioper elaborare il codice JavaScript.)
Il dettagli elemento ci consente di omettere completamente il JavaScript. O, meglio, alla fine lo farà. Il supporto del browser è ancora un po 'scarso.
Quindi tuffiamoci e impariamo come usare questo nuovo tag. Iniziamo creando un nuovo dettagli elemento.
Successivamente, dobbiamo dargli un titolo, o sommario del contenuto all'interno.
Chi va al college?
Di default, nei browser che capiscono il dettagli elemento, tutto all'interno di esso - diverso dal sommario tag: sarà nascosto. Aggiungiamo un paragrafo dopo il sommario.
Chi va al college?
Tua mamma.
Vai avanti e prova la demo in Chrome 12 o versione successiva (a partire dal 17 novembre 2011).
Ok, facciamo qualcosa di un po 'più pratico. Voglio visualizzare vari articoli di Nettuts + usando il dettagli elemento. Per prima cosa creiamo il markup per un singolo articolo.
Dig Into Dojo
Scava nel dojo: DOM Nozioni di base
Forse hai visto quel tweet: "jQuery è un farmaco di base. Porta a un utilizzo JavaScript completo. "Parte di questa dipendenza, sostengo, è l'apprendimento di altri framework JavaScript. E questo è ciò che fa questa serie in quattro parti sull'incredibile Dojo Toolkit: portarti al livello successivo della tua dipendenza da JavaScript.
Successivamente, gli daremo solo un tocco di stile.
body font-family: sans-serif; dettagli overflow: hidden; sfondo: # e3e3e3; margin-bottom: 10px; blocco di visualizzazione; riepilogo dei dettagli cursor: pointer; imbottitura: 10px; details div float: left; larghezza: 65%; dettagli div h3 margin-top: 0; dettagli img float: left; larghezza: 200 px; imbottitura: 0 30px 10px 10px;
Si prega di notare che ti sto mostrando il Aperto stato per comodità, ma, quando la pagina viene caricata, vedrai solo il sommario testo.
Se preferisci essere in questo stato per impostazione predefinita, aggiungi il
Apertoattributo aldettaglielemento:
Non è altrettanto semplice definire la freccia stessa come potremmo sperare. Tuttavia, è possibile; la chiave è usare il -Webkit dettagli-marcatore pseudo classe.
dettagli riassuntivi :: - webkit-details-marker color: green; font-size: 20px;
Se hai bisogno di usare un'icona personalizzata, probabilmente la soluzione più semplice è quella di nascondere la freccia (usando la pseudo classe sopra) e poi applicare un'immagine di sfondo al sommario elemento, o usare il :dopo o :prima elementi pseudo.
Guarda il progetto finale.
È certamente un effetto semplice, ma sicuramente è bello avere una funzionalità così comune integrata. Fino a quando non possiamo usare in modo affidabile il dettagli elemento su tutti i browser, è possibile utilizzare questo polyfill per fornire supporto fallback. Un'ultima nota: al momento in cui scrivo, non sembra essere un modo per alternare il contenuto con una tastiera. Questo potrebbe potenzialmente presentare alcuni problemi di accessibilità.
