ХТМЛ5 Како користити ознаке <ДЕТАИЛС> и <СУММАРИ>
Међу неколико нових ознака које су доступне у ХТМЛ5, Спецификације (као што су: фигура, фигцаптион, и у страну), детаљ и суммари ознаке, по мом мишљењу, су најкорисније. Са овим новим ознакама можете сакрити део дугог садржаја и приказати само резиме.
Ми заправо често видимо овај ефекат, али већина њих је још увек изграђена на ЈаваСцрипту или његовом брату: јКуери, који већина људи не разуме. Сада, са овим новим елементима - детаљи и суммари - ствари ће бити лакше.
Дакле, да видимо како ознаке функционишу у реалном случају.
У овом приказу ћемо сумирати опис производа. Прво креирамо ознаку "детаљи", а затим стављамо сав садржај заједно са ознаком "суммари" у њој, као у примјеру испод:
МацБоок Про спецификација
- 13,3-инчни ЛЕД екран са позадинским осветљењем и сјајним широким екраном са непрекидним стаклом од ивице до ивице (резолуција 1280 к 800 пиксела).
- 2.4 ГХз Интел Цоре и5 дуал-цоре процесор са 3 МБ дељеног Л3 кеша за одличан мултитаскинг.
- Интел ХД Грапхицс 3000 са 384 МБ ДДР3 СДРАМ-а који се дели са главном меморијом.
- 500 ГБ Сериал АТА хард диск (5400 о / мин)
- РАМ инсталиран на 4 ГБ (1333 МХз ДДР3; подржава до 8 ГБ)
У том примеру, додао сам детаље спецификације за МацБоок Про, а сада да видимо како претраживач прави те ознаке.
Такође сам додао наслов и више описа производа изнад детаља да би овај демо био разумнији за вас. Па шта ти мислиш? То је прилично лако?
Бровсер Суппортс
Међутим, пре него што пожурите да примените ову ознаку на читаву Веб локацију, треба напоменути да су детаљи и ознака сажетка тренутно подржани само за Цхроме 12 и новији.
Чак и најновији Фирефок их још не подржава.
Дакле, ако желите да примените ову ознаку, морате да укључите функцију резервног за неподржане прегледаче. Добра вест је једноставна; можете користити ове детаље полифилл, који ће аутоматски реплицирати функционалност ознака за старе претраживаче.
Преузмите овај фајл и повежите га са хтмл документом заједно са јКуери (минимално 1.7+) и проверите да ли полифил ставите испред ознаке тела.
И унутар ознаке главе, убаците следећу условну ознаку да бисте укључили ХТМЛ5схив за ИЕ8 и раније, иначе Интернет Екплорер неће препознати те нове ознаке.
Сада да видимо како се испоставило у програму Интернет Екплорер:
И сада ради и на Интернет Екплореру.
- Демо
- Довнлоад Соурце
Закључак
Стварање таквог ефекта сакривања и приказивања помоћу ЈаваСцрипт-а или јКуери-а је заправо релативно лако, али ако га подржите из прегледника, то је много лакше решење за многе људе. Било да желите да то урадите у ЈаваСцрипту или у ХТМЛ5, то је ваша одлука. Хвала на читању и надам се да сте уживали.
