Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Як стварыць надзвычайны jQuery Style Switcher

by
Difficulty:IntermediateLength:MediumLanguages:

Belarusian (беларуская мова) translation by Alex Grigorovich (you can also view the original English article)

У гэтым уроку я пакажу вам, як стварыць стыльны перамыкач з выкарыстаннем jQuery і PHP.  Канчатковым вынікам будзе ненадакучлівы і адаптыўны стыльны перамыкач, які будзе хутка і лёгка выкарыстоўваць.




Крок 1: HTML

Па-першае, нам трэба стварыць наш асноўны HTML-файл і захаваць яго як index.php:

Вы ўбачыце, што там ёсць код PHP, які знаходзіцца крыху ніжэй атрыбуту title ў загалоўнай частцы старонкі. Гэта вельмі проста - усё, што тут адбываецца, гэта праверка на наяўнасць печыва пад назвай «style» - калі ён існуе, ён замацоўваецца да бягучай зменнай (таксама званай «lestz»), а калі файл cookie не існуе, то тэма прызначаецца па змаўчанні ( «day») да зменнай $style. Затым гэтая пераменная выклікаюць у атрыбуце href спасылкі (href="css/.сss"/?php echo $style?>. css").

Вы ўбачыце, што пласт div style-switcher прыведзены вышэй у нашым HTML-кодзе. Ня трэба дадаваць яго з дапамогай JavaScript, таму што метад, які мы выкарыстоўваем, дазволіць працаваць перамыкачу стылю, нават калі JavaScript адключаны. Дзве спасылкі (night і day) пераносяць карыстальніка ў файл пад назвай style-switcher.php з дабаўленай радком ў запыце, якая вызначае адпаведную тэму (напрыклад, href = "style-switcher.php?style=day").

Я таксама назваў убудова для jQuery styleSwitcher. Гэта яшчэ ў стадыі распрацоўкі (ну, мы скончым да таго моманту, калі вы прачытаеце артыкул), так што трымайцеся! ... ...Мы будзем пісаць гэты убудова на 4 кроку ўрока.

Крок 2: CSS

Цяпер нам трэба стварыць пару табліц стыляў CSS для нашага HTML. Я вырашыў стварыць толькі дзве табліцы - у вас будзе тэма «Day», а ў іншы будзе тэма «Night», і я назваў іх адпаведным чынам.  (day.css & night.css) 

Тэма Day:

Night Theme

Тэма Night:

Night Theme

Лепш за ўсё стварыць адзін стыль, а затым скапіяваць ўсе селектары ў іншую табліцу - і тады ўсё, што трэба змяніць, - гэта дадаць розныя правілы і канструкцыі CSS. Відавочна, што ў вас можа быць столькі табліц, колькі хочаце, але ў гэтым уроку мы выкарыстоўваем толькі дзве. Да таго ж дзень і ноч добра стасуюцца!

day.css:

night.css:

На самай справе гэта не ўрок па CSS, таму я не буду разбірацца з усімі пытаннямі, але калі яны ў вас ёсць, калі ласка, не саромейцеся, задавайце іх у раздзеле каментароў. І так, я ведаю, што ўласцівасць min-width не падтрымліваецца ў старых браўзэрах!  ;)

Крок 3: style-switcher.php

Тут мы пішам асноўныя функцыі перамыкача стылю. На самой справе гэта ўсяго толькі некалькі радкоў вельмі простага кода PHP. Вы павінны стварыць новы файл пад назвай «style-switcher.php» і скапіяваць у яго наступнае:

Такім чынам, вышэйпрыведзены код прысвойвае значэнне зменнай GET "style" лакальнай зменнай $style. Іншымі словамі, скрыпт прыме значэнне ўласцівасці стылю з радка запыту (style-switcher.php? Style=day).  Затым ён усталюе cookie (на адзін тыдзень), званы «style», - мы зможам запытаць гэты файл cookie праз наш асноўны файл index.php з дапамогай кодам, створанага за крок № 1 (памятаеце, гэта невялікая частка PHP ў head?). Затым скрыпт правярае, дадаецца Ці «js» да радка запыту.  Калі гэта так, то мы даведаемся, што запыт адбыўся з дапамогай JavaScript (які мы яшчэ не стварылі). Ўмова else выконваецца, калі карыстальнік не ўключыў JavaScript і выкарыстоўвае перанакіраванне (т. Е. Старонку, з якой яны толькі што прыйшлі) - гэта стане больш зразумелым, як толькі мы напішам код jQuery!

Крок 4: код jQuery

Калі хочаце, можаце спыніцца прама тут! ...  Наша рашэнне будзе працаваць выдатна, але, як я казаў ва ўступе, мы зробім яго яшчэ строме з дапамогай jQuery! Мы не толькі дазволім карыстачу памяняць сваю тэму, ня абнаўляючы старонку, але мы таксама збіраемся дадаць круты эфект згасання ...  Я маю на ўвазе, што б гэта быў за ўрок jQuery без эфекту згасання

Гэта ўсё магчыма без стварэння плагіна, але я думаю, гэта будзе добрая практыка для ўсіх вас, а таксама дазваляе хутка і лёгка адаптаваць і перадаваць код.

Перш за ўсё, давайце створым файл пад назвай «styleswitcher.jquery.js».

Стварэнне новай убудовы ў jQuery надзвычай проста; усё, што патрабуецца, гэта напісаць наступны код:

Такім чынам, спачатку мы хочам паказаць, што адбываецца, калі націскаецца адна з спасылак табліцы стыляў (г.зн. тыя спасылкі, якія знаходзяцца ў пласце div# style-switcher):

loadStyleSheet:

Цяпер нам трэба напісаць функцыю loadStyleSheet:

Спадзяюся, што каментары патлумачылі гэты працэс дастаткова. Вы заўважыце, што мы выклікаем ў дадзены момант нявызначаную функцыю (cssDummy.check ()). Але не хвалюйцеся, пра гэта ў наступным кроку ...

cssDummy:

Нам патрэбен спосаб, каб праверыць, загружаная Ці табліца стыляў. Калі гэта так, мы схаваем які перакрывае пласт, але, калі яго няма, то нам трэба працягваць праверку, пакуль ён не загрузіцца. Я знайшоў у сеткі надзейны спосаб тэставання. Ён уключае ў сябе праверку значэння шырыні фіктыўнага элемента. Шырыня гэтага элемента будзе вызначана ў CSS - і таму шырыня элемента будзе роўная шырыні, вызначанай у CSS, калі табліца будзе загружаная. Спадзяюся, цяпер вы зразумееце, чаму мы павінны былі ўключыць правіла "#dummy-element у кожны файл CSS ...

Такім чынам, вось яно:

У канцы нашага плагіна мы выклічам функцыю cssDummy.init

Усё гатова! Усё гатова! 

Мы можам выклікаць убудова jQuery наступным чынам:

Выснова!

Калі вы не ўпэўненыя ў структуры файлаў, загрузіце зыходнікі файлаў, каб іх паглядзець. Спадзяюся, вам спадабаўся гэты ўрок. Як заўсёды, калі ў вас ёсць пытанні, не саромейцеся, задавайце іх у каментарах! Калі вам спадабалася наша артыкул, калі ласка, падзяліцеся ёю ў Digg!


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.