Стварэнне вопыт прыкладання ў стылі на вашых сайтах
Dynamic HTML (DHTML) дазваляе стварыць вопыт прыкладнога стылю на вашых вэб - сайтаў, памяншаючы частату , што цэлыя старонкі павінны быць цалкам загружаныя. У прыкладаннях, калі вы націскаеце на тое, прыкладанне адразу змяняецца, каб паказаць, што канкрэтны змест ці даць вам свой адказ.
У адрозненні ад гэтага, вэб-старонкі, як правіла, павінны быць перазагружаныя, або цэлая новая старонка павінна быць загружаная. Гэта можа зрабіць карыстацкі досвед больш няскладным. Вашы кліенты павінны чакаць першай загрузкі старонкі, а затым зноў чакаць на другую старонку для загрузкі, і гэтак далей.
Выкарыстоўваючы & л; DIV & GT; для паляпшэння прагляду Вопыту
Выкарыстанне DHTML, адзін з самых простых спосабаў палепшыць гэты вопыт, каб мець DIV элементы ўключэння і выключэнні для адлюстравання змесціва пры запыце. DIV элемент вызначае лагічныя падзелу на вашай старонцы. Падумайце аб DIV як поле, якое можа ўтрымліваць пункты, загалоўкі, спасылкі, малюнкі і нават іншыя дзіваў.
Што Вы & # 39; будзеце патрэбныя
Для таго, каб стварыць DIV, які можа быць ўключаць і выключаць, вам неабходна наступнае:
- Спасылка для кіравання DIV, павярнуўшы яго і выключаецца пры націску
- Дзіў, каб паказаць і схаваць
- CSS, каб стыль DIV схаваны або бачны
- JavaScript для выканання дзеяння
які кантралюе Link
Кіравання звяном з'яўляецца лёгкай часткай. Проста стварыць спасылку, як вы б на іншую старонку. Пакуль пакіньце HREF атрыбуту пустым.
Learn HTMLЗмесціце гэта ў любым месцы на вашым сайце.
Div Паказаць і паказваць
Стварыць Div элемент, які вы хочаце, каб паказаць і схаваць. Пераканайцеся, што ваш DIV мае унікальны ідэнтыфікатар на ім. У прыкладзе, унікальны ідэнтыфікатар даведацца HTML .
Learn HTML - Free HTML класа
- падручнік HTML
- Што такое XHTML?
CSS Паказаць і схаваць Div
Стварыць два класа для вашага CSS: адзін, каб схаваць DIV, а другі, каб паказаць яго. У вас ёсць два варыянты для гэтага: дысплей і бачнасць.
Дысплей выдаляе DIV з патоку старонкі, а бачнасць толькі змены, як гэта відаць. Некаторыя кодэры аддаюць перавагу дысплей, але часам бачнасць мае сэнс таксама. Напрыклад:
.hidden {дысплей: не; } .unhidden {дысплей: блок; } Калі вы хочаце выкарыстоўваць бачнасць, а затым змяніць гэтыя класы:
.hidden {бачнасць: схаваны; } .unhidden {бачнасць: бачны; } Дадайце схаваны клас у DIV так, што яна пачынаецца, як прыхаваная на старонцы:
клас "learnHTML" = "схаваны"> JavaScript, каб прымусіць яго працаваць
Усё гэта скрыпт робіць гэта паглядзець на бягучы клас, усталяванага на вашым DIV і перамыкае яго непрыхаваным калі ён адзначаны як схаваны ці наадварот.
Гэта ўсяго толькі некалькі радкоў JavaScript. Змесціце наступнае ў галаве вашага HTML-дакуменце (перад тэгам
:
<Тып скрыпту = "тэкст / JavaScript"> Функцыя Unhide (DIVID) {вар элемент = document.getElementById (DIVID); ? Калі (пункт) {item.className = (item.className == 'схаваны') 'непрыхаваным': 'схаваны'; }} Што робіць гэты сцэнар, радок за радком:
- Выклік функцыі Unhide і DIVID з'яўляецца дакладным унікальным ідэнтыфікатарам вы хочаце паказаць або схаваць.
- Ўсталёўвае зменную я TEM са значэннем вашага спраў.
- Выконвае простую праверку браўзэра; калі браўзэр не падтрымлівае getElementById, гэты сцэнар не будзе працаваць.
- Правярае клас на справах. Калі гэта прыхаваная, яна змяняе яго непрыхаваным. У адваротным выпадку, ён змяняе яго схаваным.
- Закрывае калі заяву.
- Закрывае функцыю.
Для таго, каб зрабіць працу скрыпту, вам трэба зрабіць яшчэ адну рэч. Вярніцеся да вашай спасылцы і дадаць JavaScript у HREF атрыбуту. Абавязкова выкарыстоўвайце дакладны унікальны ідэнтыфікатар, які вы назвалі ваш DIV у гэтым HREF:
href=" javascript:unhide('learnHTML'); "> тут HTML Віншуем! Зараз у вас ёсць DIV, які будзе паказваць і хаваць, калі вы націскаеце на спасылку.
Магчымыя праблемы ў Асцерагацца
Гэты сцэнар не дурань доказы. Ёсць некалькі сітуацый, у якіх ён можа выклікаць праблемы для вас:
- JavaScript не ўключаны. Калі вашы чытачы не маюць JavaScript ці ён адключаны, гэты сцэнар не будзе працаваць. Схаваная дзівы не застаюцца ўтоенымі, незалежна ад таго, што робяць вашы чытачы. Адзін са спосабаў выправіць гэта паставіць схаваныя дзівы ў галіне NoScript, але вы павінны будзеце гуляць вакол з тым, каб прымусіць іх правільна адлюстраваць.
- Занадта шмат кантэнту. Гэта можа быць выдатным інструментам, каб вашыя чытачы, каб бачыць толькі змест яны маюць патрэбу, але калі вы паклалі занадта шмат ўнутры схаваных дзівы, гэта можа істотна паўплываць на як загрузкі старонкі. Памятаеце, што нават калі змест не адлюстроўваецца, вэб-браўзэр па-ранейшаму загрузкі, так што выкарыстоўвайце здаровы сэнс у тым, колькі вы зачыніце.
- Кліенты не разумеюць. Нарэшце, кліенты не могуць быць прывучаны да націснуўшы на спасылку, якая паказвае або хавае змесціва. Пагуляйце з абразкамі (плюс знакі і стралкі працуюць добра) або тэкст, каб растлумачыць, што будзе з вашымі кліентамі. Іншым рашэннем з'яўляецца пакінуць адзін з дзівы адкрыты, а астатнія зачыненыя. Гэта можа перадаць ідэю сваім кліентам, каб яны маглі больш хутка высветліць, як адкрыць пакінуты змесціва.
Вы павінны заўсёды правяраць Dynamic HTML, як гэта з вашымі кліентамі. Пасля таго, як вы ўпэўненыя, што яны могуць зразумець і выкарыстоўваць яго, гэта можа быць выдатным спосабам, каб атрымаць вялікую колькасць кантэнту на вэб-старонках, не займаючы шмат бачнага прасторы.
CSS Паказаць і схаваць Div
Стварыць два класа для вашага CSS: адзін, каб схаваць DIV, а другі, каб паказаць яго. У вас ёсць два варыянты для гэтага: дысплей і бачнасць.
Дысплей выдаляе DIV з патоку старонкі, а бачнасць толькі змены, як гэта відаць. Некаторыя кодэры аддаюць перавагу дысплей, але часам бачнасць мае сэнс таксама. Напрыклад:
.hidden {дысплей: не; } .unhidden {дысплей: блок; }Калі вы хочаце выкарыстоўваць бачнасць, а затым змяніць гэтыя класы:
.hidden {бачнасць: схаваны; } .unhidden {бачнасць: бачны; }Дадайце схаваны клас у DIV так, што яна пачынаецца, як прыхаваная на старонцы:
JavaScript, каб прымусіць яго працаваць
Усё гэта скрыпт робіць гэта паглядзець на бягучы клас, усталяванага на вашым DIV і перамыкае яго непрыхаваным калі ён адзначаны як схаваны ці наадварот.
Гэта ўсяго толькі некалькі радкоў JavaScript. Змесціце наступнае ў галаве вашага HTML-дакуменце (перад тэгам
: <Тып скрыпту = "тэкст / JavaScript"> Функцыя Unhide (DIVID) {вар элемент = document.getElementById (DIVID); ? Калі (пункт) {item.className = (item.className == 'схаваны') 'непрыхаваным': 'схаваны'; }}Што робіць гэты сцэнар, радок за радком:
- Выклік функцыі Unhide і DIVID з'яўляецца дакладным унікальным ідэнтыфікатарам вы хочаце паказаць або схаваць.
- Ўсталёўвае зменную я TEM са значэннем вашага спраў.
- Выконвае простую праверку браўзэра; калі браўзэр не падтрымлівае getElementById, гэты сцэнар не будзе працаваць.
- Правярае клас на справах. Калі гэта прыхаваная, яна змяняе яго непрыхаваным. У адваротным выпадку, ён змяняе яго схаваным.
- Закрывае калі заяву.
- Закрывае функцыю.
Для таго, каб зрабіць працу скрыпту, вам трэба зрабіць яшчэ адну рэч. Вярніцеся да вашай спасылцы і дадаць JavaScript у HREF атрыбуту. Абавязкова выкарыстоўвайце дакладны унікальны ідэнтыфікатар, які вы назвалі ваш DIV у гэтым HREF:
Віншуем! Зараз у вас ёсць DIV, які будзе паказваць і хаваць, калі вы націскаеце на спасылку.
Магчымыя праблемы ў Асцерагацца
Гэты сцэнар не дурань доказы. Ёсць некалькі сітуацый, у якіх ён можа выклікаць праблемы для вас:
- JavaScript не ўключаны. Калі вашы чытачы не маюць JavaScript ці ён адключаны, гэты сцэнар не будзе працаваць. Схаваная дзівы не застаюцца ўтоенымі, незалежна ад таго, што робяць вашы чытачы. Адзін са спосабаў выправіць гэта паставіць схаваныя дзівы ў галіне NoScript, але вы павінны будзеце гуляць вакол з тым, каб прымусіць іх правільна адлюстраваць.
- Занадта шмат кантэнту. Гэта можа быць выдатным інструментам, каб вашыя чытачы, каб бачыць толькі змест яны маюць патрэбу, але калі вы паклалі занадта шмат ўнутры схаваных дзівы, гэта можа істотна паўплываць на як загрузкі старонкі. Памятаеце, што нават калі змест не адлюстроўваецца, вэб-браўзэр па-ранейшаму загрузкі, так што выкарыстоўвайце здаровы сэнс у тым, колькі вы зачыніце.
- Кліенты не разумеюць. Нарэшце, кліенты не могуць быць прывучаны да націснуўшы на спасылку, якая паказвае або хавае змесціва. Пагуляйце з абразкамі (плюс знакі і стралкі працуюць добра) або тэкст, каб растлумачыць, што будзе з вашымі кліентамі. Іншым рашэннем з'яўляецца пакінуць адзін з дзівы адкрыты, а астатнія зачыненыя. Гэта можа перадаць ідэю сваім кліентам, каб яны маглі больш хутка высветліць, як адкрыць пакінуты змесціва.
Вы павінны заўсёды правяраць Dynamic HTML, як гэта з вашымі кліентамі. Пасля таго, як вы ўпэўненыя, што яны могуць зразумець і выкарыстоўваць яго, гэта можа быць выдатным спосабам, каб атрымаць вялікую колькасць кантэнту на вэб-старонках, не займаючы шмат бачнага прасторы.