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