Како аутоматски генерисати табелу садржаја са ХТМЛ слотовима
Преглед садржаја може знатно побољшати корисничко искуство многих веб сајтова, на пример документацију или онлине енцицлопедиас лике Википедиа. Добро дизајниран садржај даје преглед странице и помаже корисницима да брзо прелазе у одељак који их занима.
Традиционално, можете креирати табелу садржаја у ХТМЛ-у или са ЈаваСцрипт-ом, али у задње вријеме стандардизирани ХТМЛ слотови пружају а средњи пут између ова два. ХТМЛ Слот је веб стандард који вам омогућава додајте резервисана места на веб страницу а касније испуните га динамички.
Када користити
Можеш да ставиш
Овом техником морате ручно креирати ХТМЛ изворни код табеле садржаја. ЈаваСцрипт само аутоматски генерише текстуални садржај садржаја, на основу наслова или поднаслова на страници.
Ако не желите да садржај буде присутан у ХТМЛ-у који требате генеришу и изглед и садржај помоћу ЈаваСцрипт-а.
1. Креирајте ХТМЛ
ХТМЛ изворни код за ТОЦ (садржај) ће бити унутра а таг. Код унутра не добија се док се не дода у документ помоћу ЈаваСцрипт-а. Наш ТОЦ ће имати плацехолдерс, одржан у
Тхе име атрибут сваког слот у одговарајућим насловима и поднасловима документа.
Испод можете видети а сампле ХТМЛ Велоцираптор (што значи "брзи сеизер" на латинском) је… Велоцираптор је био дромеосаурид средње величине, са одраслима ... Фосили дромаеосаурида су примитивнији од ... Током експедиције Америчког музеја природне историје ... Велоцираптор је члан групе Еудромаеосауриа, изведене подгрупе… Узорак "Борбени диносаури", пронађен 1971. године, чува ... Године 2010, Хоне и колеге су објавили рад о ... Велоцираптор је донекле био топлокрвни, јер је био потребан ... Једна лубања Велоциратоптор монголиенсис има две паралеле ... Као што видите, сваки наслов је дати јединствен И, ево га ХТМЛ код ТОЦ-а, унутра а У два исечака кода изнад, приметите подударање Пре него што погледате у ЈаваСцрипт код који ће додати ТОЦ из Уверите се да Сада додајемо скрипту убацује ТОЦ изнад Горњи одломак кода креира копију Онда, клонирани Ако би ресетовали ЦСС бројач на Ево снимка екрана: Ако желиш да повезати ТОЦ наслове са њиховим насловима и поднасловима додавањем Велоцираптор (што значи "брзи сеизер" на латинском) је… Велоцираптор је био дромеосаурид средње величине, са одраслима ... Фосили дромаеосаурида су примитивнији од ... Као што можете видети изнад И, наслови унутар табеле садржаја су усидрени: У додатној линији изнад, све Погледајте снимак екрана повезан садржај испод: Можете погледати, скинути или раширити код који се користи у овом посту из нашег Гитхуб Репо-а. са неким насловима и поднасловима. Тхе
Опис
Феатхерс
Историја открића
Класификација
Палеобиологи
Понашање чишћења
Метаболизам
Патологија
слот вредност. таг.
слот и име атрибути унутар заглавља и 2. Набројите наслове
у документ, хајде додајте серијске бројеве за наслове, користећи ЦСС бројаче. чланак цоунтер-ресет: заглавље; артицле х2 :: бефоре цоунтер-инцремент: титле; цонтент: '0'цоунтер (титле)': ';
цоунтер-ресет Правило припада елементу који је непосредни родитељ свих наслова који носе наслов слот аттрибуте (који је елемент у нашем коду).3. Убаците ТОЦ у документ
таг, унутар контејнер. темплатеЦонтент = доцумент.куериСелецтор ('темплате'). артицле = доцумент.куериСелецтор ('артицле'). цлонеНоде (труе); артицле.аттацхСхадов (моде: 'цлосед'). аппендЦхилд (темплатеЦонтент.цлонеНоде (труе)); доцумент.куериСелецтор ('# тоц'). аппендЦхилд (артицле); и додаје Схадов ДОМ Трее. Ми такође додајте копију садржаја на ово дрво Схадов ДОМ-а. се убацује у елемент ис сада је присутан иу ТОЦ-у, међутим, видљиви су само њени наслови и поднаслови који су пронашли резервисано место унутар ТОЦ-а. тело или хтмл елемент уместо чланак, бројач би пребројао и листу наслова унутар ТОЦ-а. Зато би требало ресетирајте бројаче на непосредног родитеља заглавља.
4. Додајте хипервезе
ид на заглавља и причврстити одговарајући ТОЦ текст који ћете морати уклоните понављајуће ид вредности из клонираног чланак.
Опис
Феатхерс
ид аттрибуте ис додају се сваком наслову и поднасловима чланка.
ид атрибути су уклоњен из клонираног чланка пре него што причвршћивање Схадов ДОМ стабла на њега. темплатеЦонтент = доцумент.куериСелецтор ('темплате'). артицле = доцумент.куериСелецтор ('артицле'). цлонеНоде (труе); артицле.куериСелецторАлл ('* [ид]'). форЕацх ((еле) => еле.ремовеАттрибуте ('ид')) артицле.аттацхСхадов (моде: 'цлосед'). аппендЦхилд (темплатеЦонтент.цлонеНоде (труе) )); доцумент.куериСелецтор ('# тоц'). аппендЦхилд (артицле); 
Гитхуб демо
