Како да направите бољи УКС са ХТМЛ5 подацима - * атрибутима
Да ли сте икада жељели додати прилагођене податке одређеном ХТМЛ елементу како бисте касније приступили ЈаваСцрипту? Пре него што се ХТМЛ5 појавио на тржишту, чување прилагођених података повезаних са ДОМ-ом било је права гужва, а програмери су морали да користе све врсте гадних хакова, као што је увођење нестандардних атрибута или коришћење застареле методе сетУсерДата () за решавање проблема.
Срећом, то више не морате да радите, јер је ХТМЛ5 увео нови глобални дата- * атрибуте који омогућавају уградњу додатних информација на било који ХТМЛ елемент. Нови дата- * атрибути учинити ХТМЛ проширивим, стога омогућују вам да направите сложеније апликације, и створити софистицираније корисничко искуство без употребе ресурсно интензивних техника као што су Ајак-позиви, или сервер-сиде упити за базе података.
Подршка за нове глобалне атрибуте прегледача је релативно добра јер их подржавају сви модерни претраживачи (ИЕ8-10 их делимично подржава).
Синтакса дата- * Атрибути
Синтакса новог дата- * атрибути су слични атрибутима префикса арије. Можете да убаците било који низ малих слова на место * знак. Такође морате да доделите вредност сваком атрибуту у облику низа.
Рецимо да желите да креирате О нама страницу, и сачувајте назив одељења у којем сваки запослени ради. Не морате да радите ништа друго осим додавања дата-департмент прилагођени атрибут одговарајућем ХТМЛ елементу на следећи начин:
- Н.Н. лице
- Јане Дое
Обичај дата- * атрибути су глобални, баш као и класа и ид атрибуте, тако да их можете користити на сваком ХТМЛ елементу. Можете додати и више дата- * атрибути за ХТМЛ таг како желите. У горе наведеном примеру, на пример, можете увести нови прилагођени атрибут позван корисник података за чување корисничких имена запослених.
- Н.Н. лице
- Јане Дое
Као опште правило, ако желите да додате свој прилагођени атрибут ХТМЛ елементу, увек га морате префиксовати са података- низ. Исто тако, када видите атрибут са префиксом података у неком другом коду, можете бити сигурни да је то прилагођени атрибут који је увео аутор.
Када користити и када не користити прилагођене атрибуте
В3Ц дефинише обичај дата- * атрибути као што су:
“Прилагођени атрибути података су намењени за чување приватних података на страници или апликацији, за које не постоје одговарајући атрибути или елементи.”
Вреди размотрити употребу дата- * атрибути када не можете пронаћи друге семантичке атрибуте за податке које желите да ускладиштите.
Није најбоље да их користите искључиво за потребе стила, јер то можете одабрати из класа анд тхе стил атрибути. Ако желите да сачувате тип података за који ХТМЛ5 има семантички атрибут, као што је Датум време атрибут за користите, уместо атрибута префикса података.
Важно је то напоменути дата- * атрибути садрже податке који су приватне стране или апликације, што значи да ће бити занемарени од стране корисничких агената, као што су роботи претраживача и вањске апликације. Атрибутима са префиксом података може се приступити искључиво помоћу кода који се покреће на локацији која садржи ХТМЛ.
Обичај дата- * атрибути су у великој мери коришћени од стране фронтенд оквира, као што су Боотстрап и Зурб Фоундатион, такође. Добра вијест је да не морате нужно знати како писати ЈаваСцрипт ако желите користити атрибуте с префиксом података као дио оквира, јер их морате само додати у ХТМЛ код да бисте покренули функционалност превриттен ЈаваСцрипт плугин.
Исјечак кода у наставку додаје опис алата на левој страни дугмета у програму Боотстрап тако што користи пребацивање података анд тхе постављање података прилагођених атрибута и додељивање одговарајућих вредности њима.
Циљ дата- * Атрибути са ЦСС-ом
Иако није препоручљиво користити дата- * атрибуте само за сврхе стила, можете одабрати ХТМЛ елементе којима припадају уз помоћ општих селектора атрибута. Ако желите да изаберете сваки елемент који има одређени префикс података, користите ову синтаксу у ЦСС-у:
ли [дата-усер] цолор: блуе;
Имајте на уму да то нису корисничка имена која ће бити приказана плавом бојом у горњем исечком коду - након што сви подаци ускладиштени у прилагођеним атрибутима нису видљиви - већ имена запослених који се налазе у елементи (у примеру “Н.Н. лице” и “Јане Дое”).
Ако желите да изаберете само елементе у којима атрибут префикс података има одређену вредност, ово је синтакса коју ћете користити:
ли [дата-департмент = "ИТ"] бордер: солид блуе 1пк;
Можете користити све компликованије ЦСС селекторе атрибута, као што је селектор општег сиблинг комбинатора ([дата-валуе ~ = "фоо"]) или џокер селектор ([дата-валуе * = "фоо"]), са атрибутима префикса података.
Приступ дата- * Атрибути са ЈаваСцрипт-ом
Можете приступити подацима похрањеним у обичају дата- * атрибути са ЈаваСцрипт-ом помоћу својства скупа података или јКуери-а дата () метода.
Ванилла ЈаваСцрипт
Тхе скуп података власништво је власништво ХТМЛЕлемент то значи да га можете користити на било којој ХТМЛ ознаци. Тхе скуп података власништво даје приступ свим обичајима дата- * атрибути датог ХТМЛ елемента. Атрибути се враћају као ДОМСтрингМап објекат који садржи један унос за сваки дата- * аттрибуте.
У нашем О нама Пример странице можете лако да проверите прилагођене атрибуте “Јане Дое” је употребом скуп података на следећи начин:
вар јане = доцумент.гетЕлементБиИд ("јане"); цонсоле.лог (јане.датасет); // ДОМСтрингМап усер: "јанедое", одељење: "ИТ" То се види на повратку ДОМСтрингМап објецт тхе података- префикси се уклањају из имена атрибута (корисник уместо корисник података, и одељење уместо дата-департмент). Потребно је да користите атрибуте у истом формату ако желите да приступите само вредности одређеног атрибута са префиксом података (уместо листе свих прилагођених атрибута као што је горе у исјечку кода).
Можете преузети вредност одређеног дата- * атрибут као својство скуп података својство. Као што сам већ споменуо, морате изоставити података- префикс из имена својства, па ако желите да приступите вредности Јане'с корисник података атрибут, можете то урадити на овај начин:
вар јане = доцумент.гетЕлементБиИд ("јане"); цонсоле.лог (јане.датасет.усер) // јанедое јКуери'с дата () метода
Тхе дата () јКуери методом омогућава да добијете вредност атрибута префикса података. Овде такође морате да изоставите података- префикс из имена атрибута за исправан приступ. У нашем примјеру, можете приказати поруку упозорења с називом одјела гдје “Јане” ради са следећим кодом:
$ ("# јане"). ховер (функција () вар департмент = $ ("# јане"). подаци ("одељење"); обавештење (одељење);); Тхе дата () Метод треба пажљиво користити, јер не делује само као средство за добијање вредности атрибута са префиксом података, већ и за додавање података ДОМ елементу на следећи начин:
вар товн = $ ("# јане") дата ("град", "Њујорк"); Додатни подаци које додајете јКуери-има дата () метод се очигледно неће појавити у ХТМЛ коду као нови дата- * атрибут, тако да ако се обе технике користе истовремено, дат елемент ХТМЛ ће сачувати два скупа података, један са ХТМЛ-ом, а други са јКуери.
У нашем примеру “Јане” добио је нове прилагођене податке ("Град") са јКуери, али овај нови пар кључ / вредност се неће појавити у ХТМЛ-у као нови дата-товн аттрибуте. Чување података на два различита начина није најбоља пракса у најмању руку, тако користити само један од два начина одједном.
Приступачност и дата- * Атрибути
Као подаци се чувају у обичајима дата- * атрибути су приватни, помоћне технологије им можда неће моћи приступити. Ако желите да садржај буде приступачан за кориснике са инвалидитетом, не препоручује се складиштење садржаја који може бити важан за кориснике на овај начин.
