Динамички ХТМЛ (ДХТМЛ) вам омогућава да створите доживљај у стилу апликације на својим веб локацијама, смањујући учесталост пуног учитавања читавих страница. У апликацијама, када кликнете на нешто, апликација се одмах мења како би приказала тај одређени садржај или вам пружила ваш одговор.
Насупрот томе, веб странице се обично морају поново учитати или се учитава потпуно нова страница. То може учинити корисничко неиспуњено. Ваши купци морају сачекати учитавање прве странице, а затим поново чекати учитавање друге странице итд.
Коришћење за побољшање искуства гледалаца
Коришћење ДХТМЛ-а један од најједноставнијих начина за побољшање овог искуства је имати див елементи се укључују и искључују за приказ садржаја када се то затражи. А. див елемент дефинише логичке поделе на вашој веб страници. Замислите див као оквир који може садржати пасусе, наслове, везе, слике, па чак и друге див-ове.
Шта ће вам требати
Да бисте креирали див који се може укључивати и искључивати, потребно вам је следеће:
- Веза за контролу див-а укључивањем и искључивањем када се кликне.
- Див који треба приказати и сакрити.
- ЦСС за обликовање див скривеног или видљивог.
- ЈаваСцрипт за извођење радње.
Контролна веза
Контролна веза је најлакши део. Једноставно створите везу као на другу страницу. За сада, оставите атрибут хреф празно.
Научите ХТМЛ
Поставите ово било где на својој веб страници.
Див за приказ и скривање
Направите елемент див који желите да прикажете и сакријете. Уверите се да ваш див има јединствени ИД на себи. У примеру, јединствени ид је научите ХТМЛ.
Ово је колона са садржајем. Почиње празно, осим овог текста објашњења. Изаберите оно што желите да научите у колони за навигацију са леве стране. Текст ће се појавити испод:
Научите ХТМЛ
- Бесплатна ХТМЛ класа
- ХТМЛ Туториал
- Шта је КСХТМЛ?
ЦСС за приказ и скривање див
Направите две класе за свој ЦСС: један да сакрије див, а други да га прикаже. За то имате две могућности: приказ и видљивост.
Екран уклања див из тока странице, а видљивост само мења начин на који се види. Неки кодери више воле приказ, али понекад видљивост има смисла, такође. На пример:
.скривени {приказ: ниједан; }
.унхидден {приказ: блок; }
Ако желите да користите видљивост, промените ове класе у:
.скривен {видљивост: скривен; }
.унхидден {видљивост: видљиво; }
Додајте скривену класу у див тако да започне као скривена на страници:
ЈаваСцрипт да би то успело
Све што ова скрипта ради је да погледа тренутну класу подешену на вашем див и пребаци је на нескривену ако је означена као скривена или обрнуто.
Ово је само неколико редова ЈаваСцрипт-а. Ставите следеће у главу свог ХТМЛ документ (пре.
Шта ова скрипта ради, ред по ред:
Позива функцију открити, и дивИД је тачно јединствени ИД који желите да прикажете или сакријете.
Поставља променљиву итем са вредношћу вашег див.
Обавља једноставну проверу прегледача; ако прегледач не подржава гетЕлементБиИд, ова скрипта неће радити.
Проверава класу на див. Ако је сакривен, мења га у нескривени. У супротном, мења га у сакривен.
Затвара ако изјава.
Затвара функцију.
Да би скрипта функционисала, треба да урадите још једну ствар. Вратите се на везу и додајте јавасцрипт у атрибут хреф. Обавезно користите тачно јединствени ИД који сте именовали у овом хреф-у:
Научите ХТМЛ
Честитам! Сада имате див који ће се приказати и сакрити сваки пут када кликнете на везу.
Могући проблеми на које треба пазити
Овај скрипт није сигуран. Постоје неке ситуације у којима би то могло да вам створи проблеме:
ЈаваСцрипт није укључен. Ако ваши читаоци немају ЈаваСцрипт или је искључен, ова скрипта неће радити. Скривени див-ови остају скривени без обзира на то шта читаоци раде. Један од начина да се ово поправи је стављање скривених див-ова у подручје носцрипт-а, али мораћете да се поиграте с тим да бисте их правилно приказали.
Превише садржаја. Ово може бити одличан алат који ће читаоцима омогућити да виде само садржај који им је потребан, али ако ставите превише унутар скривених див-ова, то може драстично утицати на то како се страница учитава. Имајте на уму да, иако се садржај не приказује, веб прегледач га и даље преузима, зато добро разумите колико садржаја сакривате.
Купци не разумеју. Коначно, купци можда нису навикли да кликћу на везу која приказује или скрива садржај. Поиграјте се иконама (плус знакови и стрелице добро раде) или текстом како бисте објаснили шта ће се догодити са вашим купцима. Друго решење је да један од див-ова остане отворен док су други затворени. Ово може пренети идеју вашим купцима, тако да могу брже да схвате како да отворе преостали садржај.
Овакав динамички ХТМЛ увек треба да тестирате са својим купцима. Једном када се осећате уверено да они то могу да разумеју и користе, ово може бити одличан начин за доношење велике количине садржаја на ваше веб странице без заузимања пуно видљивог простора.