HTML5 Ako používať značky a
Medzi niekoľkými novými tagmi, ktoré sú k dispozícii v jazyku HTML5, špecifikácie (napríklad: figúra, figcaption, a stranou), detail a zhrnutie značky, podľa môjho názoru sú najužitočnejšie. Pomocou týchto nových značiek môžete skryť časť dlhého obsahu a zobraziť iba súhrn.
V skutočnosti tento efekt často vidíme, ale väčšina z nich je stále postavená na javore alebo na svojom bratovi: jQuery, o ktorom väčšina ľudí nerozumie. Teraz, s týmito novými prvkami - podrobnosti a zhrnutie - veci sa uľahčia.
Pozrime sa teda, ako značky fungujú v reálnom prípade.
V tomto demo zhrníme popis produktu. Najskôr vytvorte značku "podrobnosti" a potom vložte všetok obsah spolu so značkou "súhrn" do nej, ako je to v nižšie uvedenom príklade:
Špecifikácia MacBook Pro
- 13,3-palcový LED-podsvietený lesklý širokouhlý displej s neprerušovaným sklom od okraja po okraj (rozlíšenie 1280 x 800 pixelov).
- Dvojjadrový procesor Intel Core i5 s výkonom 2,4 GHz s 3 MB zdieľanej vyrovnávacej pamäte L3 pre vynikajúci multitasking.
- Grafická karta Intel HD s 384 MB pamäte DDR3 SDRAM zdieľanej s hlavnou pamäťou.
- 500 GB pevného disku Serial ATA (5400 ot./min.)
- 4 GB nainštalovanej pamäte RAM (1333 MHz DDR3, podporuje až 8 GB)
V tomto príklade som pridala podrobnosti o špecifikácii MacBooku a teraz sa pozrime, ako prehliadač vykresľuje tieto značky.
Tiež som pridal názov a viac popisov produktu nad detaily, aby ste urobili vyššie uvedené demo pre vás citlivejšie. Tak čo si myslíte? Je to úplne jednoduché, správne?
Prehliadač podporuje
Predtým, než začnete používať túto značku na celú vašu webovú stránku, je potrebné poznamenať, že podrobnosti a súhrnná značka sú v súčasnosti podporované iba pre Chrome 12 a vyššie.
Dokonca aj najnovší program Firefox ich zatiaľ nepodporuje.
Ak chcete použiť túto značku, musíte pre nepodporované prehliadače zahrnúť záložnú funkciu. Dobrou správou je, je to jednoduché; môžete použiť túto podrobnosť polyfill, ktorá automaticky replikuje funkciu značky pre staré prehliadače.
Stiahnite si tento súbor a prepojte ho s html dokumentom spolu s jQuery (minimálne 1,7+) a uistite sa, že umiestnite polyfill pred značku uzavretého tela.
A vo vnútri tagu hlavičky vložte nasledujúcu podmienenú značku, ktorá bude obsahovať HTML5shiv pre IE8 a staršie, inak Internet Explorer nerozpozná tieto nové značky.
Teraz sa pozrime, ako to vyzerá v programe Internet Explorer:
A teraz funguje aj v programe Internet Explorer.
- demonštrácie
- Stiahnuť zdroj
záver
Vytvorenie takéhoto efektu skrývania a zobrazovania pomocou jazyka JavaScript alebo jQuery je skutočne pomerne jednoduché, ale jeho natívne podporovanie z prehliadača je určite oveľa jednoduchším riešením pre mnoho ľudí. Či to chcete robiť v jazyku JavaScript alebo HTML5, je to vaše rozhodnutie. Ďakujem za čítanie a dúfam, že sa vám páčilo.
