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

Ствараем ваш першую убудову на jQuery UI

by
Difficulty:IntermediateLength:LongLanguages:

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

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


У ходзе гэтага ўроку я пакажу вам абмежаванні і агульныя рэкамендацыі да праграмавання, якія павінны выконвацца пры стварэнні убудоў для jQuery UI. Мы створым просты убудова, які дадасць загалоўкі да малюнкаў на старонцы. Ён спецыяльна вельмі просты, каб мы маглі засяродзіцца на тым, што неабходна для стварэння плагіна jQuery UI, ня блытаючыся ў кодзе. Любы, хто ўжо пісаў убудовы для jQuery, павінен усё зразумець. Веданне jQuery UI можа дапамагчы, але не абавязкова для завяршэння гэтага ўроку. Давайце пачнем.

Пачынаем

Нам спатрэбіцца копія jQuery, а таксама некалькі файлаў з jQuery UI, але гэта павінен быць jQuery UI 1.8 (яго можна знайсці ў блогу). Стварыце працоўны каталог на вашым кампутары з імем jqueryui-plugin, затым ўнутры яго стварыце тэчку css, тэчку js і тэчку img (малюнкі, якія выкарыстоўваюцца ў гэтым кіраўніцтве, можна знайсці ў раздзеле загрузак).

Загрузіце бібліятэку і распакуйце яе ў даступным месцы. Нам патрэбны толькі некалькі файлаў з архіва, а менавіта зыходны файл jQuery, які знаходзіцца ў корані архіва пад назвай jquery-1.4.1.js, і файлы jquery.ui.core.js і jquery.ui.widget.js, якія знаходзяцца ў тэчцы ui. Вазьміце іх і перамесціце ў тэчку js ў працоўным каталогу. Мы таксама будзем выкарыстоўваць палегчаны версію CSS, таму нам спатрэбіцца адна з табліц стыляў тым, даступных для загрузкі разам з бягучай стабільнай версіяй jQuery UI (у гэтым прыкладзе я выкарыстаў ui-lightness).

Мы створым віджэт captionator, таму нам спатрэбіцца старонка з кучай малюнкаў на ёй, каб распрацаваць / пратэставаць убудова. У гэтым прыкладзе выкарыстоўваецца наступная старонка:

На дадзены момант у нас будзе ўсё проста; усяго тры выявы на старонцы, за якімі ідуць чатыры файла сцэнарыяў; тры спасылкі на зыходныя файлы jQuery і jQuery UI, чацвёртая - на зыходны файл нашага плагіна, які мы створым у бліжэйшы час. Файл jquery.ui.core.js неабходны ўсім фішак / ўбудовам jQuery UI. Файл jquery.ui.widget.js з'яўляецца базавай часткай фішкі і дазваляе ствараць фішкі, якія валодаюць агульнымі функцыянальнымі магчымасцямі API. Большасць кампанентаў бібліятэкі выкарыстоўваюць гэта, і мы будзем выкарыстоўваць яго для стварэння нашага плагіна.

Стварэнне файла плагіна

Стварыце новы файл JavaScript і захавайце яго як jquery.ui.captionator.js ў тэчцы js; мы павінны прытрымлівацца рэкамендацый пра імёны jQuery UI, якое толькі што было абноўлена ў версіі 1.8 версіі бібліятэкі, і выкарыстоўваць фармат jquery.ui.plugin_name.js. Дадайце наступны код у новы файл:

Увесь код, які складае наш убудова, павінен быць інкапсуляваць ў самастойную выкананую ананімную функцыю. Аб'ект jQuery перадаецца ў гэтую функцыю і выкарыстоўваецца ўнутры функцыі праз псеўданім $; гэта значыць, што ўбудова сумяшчальны з метадам noConflict() у jQuery. Гэта выразнае патрабаванне і заўсёды павінна выконвацца.

Затым нам трэба вызначыць убудова; дадайце наступны код у нашу ананімную функцыю:

Шаблон для выкарыстання базы фішкі просты ў выкарыстанні, мы проста выклікаем метад widget(), які вызначае імя ўбудовы ў якасці першага аргументу, і литерал аб'екта, які змяшчае ўласцівасці і метады, якія складаюць функцыю плагіна. Гэта дазваляе нашаму плягіну працаваць (быць выкліканым) з выкарыстаннем агульнай сінтаксісу jQuery $("element_caption_applied_to").сaptionator(); як і любы іншы метад jQuery або jQuery UI.

База фішкі падае нам шэраг гэтых уласцівасцяў і метадаў; напрыклад, мы можам усталяваць параметры па змаўчанні для плагіна, выкарыстоўваючы ўласцівасць options, і дадаць функцыю ініцыялізацыі, якая аўтаматычна запускаецца базай фішкі, як толькі выклікаецца асобнік плагіна. Ўнутры аб'екта, які з'яўляецца ў якасці другога аргументу ў папярэднім кодзе, дадайце наступны код:

Гэта ўсё налады, якія мы будзем выкарыстоўваць яе ў нашым прыкладзе; карыстальнікі (і карыстальнікі, я маю на ўвазе распрацоўшчыкі, а не канчатковыя карыстальнікі) плагіна могуць пазначыць становішча загалоўка як у верхняй часткі выявы, на якое ён накладваецца, так і ў ніжняй часткі, таксама можна паказаць колер тэксту загалоўка або змяніць яго фонавы колер надпісы. Каб змяніць параметр любога фішкі на jQuery UI да ініцыялізацыі, распрацоўшчык проста выкарыстоўвае нешта падобнае:

$("element_caption_applied_to").captionator({ location: "top" });

Затым мы можам стварыць нашу функцыю ініцыялізацыі, для гэтага, пасля аб'екта options дадайце наступны метад:

Імя метаду павінна пачынацца з падкрэслення, так як jQuery UI прадухіляе любы метад, які пачынаецца з падкрэслення, ад выканання за межамі плагіна, так што гэта прадухіляе выпадковае выкананне з HTML-старонкі. Любы метад, які мы пачынаем з падкрэслення, будзе абаронены такім чынам.

Большая частка нашага метаду ініцыялізацыі ўяўляе сабой шэраг зменных; ўнутры нашай функцыі ключавое слова this ставіцца да аб'екта, перададзеным у метад, які ўяўляе сабой асобнік плагіна. Першая пераменная кэшуецца спасылку на бягучы асобнік плагіна; метад _create выклікаецца для кожнага элемента, на які выконваецца метад плагіна, ён можа быць адным элементам або адразу некалькімі.

Мы можам атрымаць доступ да налад па змаўчанні для плагіна (якія аўтаматычна перавызначаць, калі распрацоўшчык настройвае любы з іх), выкарыстоўваючы ўласцівасць аб'екта options; мы кэшируем гэта ў другі зменнай. Элемент, які быў выкліканы метадам плагіна (captionator ()), які ў гэтым прыкладзе будзе малюнкам, можа быць даступны з выкарыстаннем ўласцівасці элемента аб'екта. Мы захоўваем яго ў трэцяй зменнай.

Мы выкарыстоўваем чацвёртую зменную для захоўвання спасылкі на новы элемент загалоўка, які пабудаваны з простага тэга <span>; <span>, мае свой innerText, усталяваны ў атрыбуце alt бягучага малюнка, і да яго дадаюцца некалькі імёнаў класаў; мы даем яму імя класа ui-widget, каб ён набыў стыль па змаўчанні з бягучай тэмы jQuery UI. Мы таксама прысвойваем яму карыстацкае імя класа, каб мы маглі дадаць некаторыя з нашых уласных стыляў.

Затым нам трэба наладзіць некаторыя ўласцівасці CSS; мы будзем выкарыстоўваць асобную табліцу стыляў для некаторых стыляў, але абавязковыя рэчы, такія як стылі колеру і фону, кіруюцца з дапамогай наладжвальных параметраў, таму нам трэба ўсталяваць іх з дапамогай плагіна. Шырыня загалоўка павінна адпавядаць шырыні малюнка, на якое яно накладваецца, таму нам неабходна вызначыць гэта і ўсталяваць праграмным спосабам. Нарэшце, новы <span> ўбудоўваецца на старонку непасрэдна пасля мэтавага выявы.

Пасля таго, як загаловак быў устаўлены, неабходна змяніць памер і размясціць яго правільна; адзіны спосаб, якім памер можа быць дакладна ўстаноўлены, - калі аб'ект ужо існуе ў DOM і валодае прымацаваны да яго правіламі CSS, такімі як памер шрыфта. Вось чаму мы ўбудавальных загаловак у старонку, а затым вызначаем яе дакладныя памеры, якія затым захоўваюцца ў зменных capWidth і capHeight.

Як толькі надпіс будзе дададзеная на старонку (толькі пасля гэтага), мы зможам усталяваць правільную шырыню, вышыню і становішча кожнай надпісы, якія мы зноў усталёўваем з дапамогай метаду css(). Загалоўкі фактычна цалкам аддзеленыя ад малюнкаў; яны ўстаўляюцца непасрэдна пасля кожнага малюнка, а затым перамяшчаюцца для таго, каб перакрыць яго, у рэшце рэшт, мы не можам проста дадаць <span> у якасці даччынага элемента <img>.

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

Іншым метадам, які павінен выкарыстоўваць наш убудова, гэта метад destroy(), які з'яўляецца агульным для ўсіх убудоў jQuery UI. Мы павінны забяспечыць рэалізацыю гэтага метаду для ачысткі дадзеных пасля завяршэння працы плагіна. Для нашага плагіна гэты метад будзе простым:

Усё, што нам трэба зрабіць, гэта выдаліць загалоўкі і адвязаць апрацоўшчык змены памеру акна. Гэты метад можа быць выкананы убудовай, таму мы не павінны пачынаць назву гэтага метаду з падкрэслення. Каб выклікаць гэты метад, мы будзем выкарыстоўваць $("element_caption_attached_to").captionator( "destroy"); так як будзе выкананы любы з нашых публічных метадаў.

Нам трэба даць іншы метад, кіраваны / выкананы на базе фішкі; мы бачылі раней, як распрацоўшчык можа змяніць наладжвальны параметр да ініцыялізацыі, але што калі трэба пасля ініцыялізацыі? Гэта робіцца з выкарыстаннем метаду опцый, выкарыстоўваючы наступны сінтаксіс: $("element_caption_attached_to").captionator("option", "location","top"); таму нам трэба дадаць убудаваны метад _setOption:

Мы пачынаем гэты метад з падкрэслення, таму што распрацоўшчык выкарыстоўвае параметр, а не _setOption, каб фактычна зьмяняць устаноўкі; нам не трэба турбавацца аб тым, як гэта апрацоўваецца, нам проста трэба даць гэты метад для вырашэння чаго-небудзь канкрэтнага для нашага плагіна. Паколькі гэты метад ўжо існуе на базе фішкі, мы павінны выклікаць арыгінальны метад, які мы робім у першую чаргу з дапамогай прататыпа аб'екта Widget, паказаўшы імя метаду (_setOption ў гэтым выпадку, але мы маглі б зрабіць гэта для ўбудаваных метадах таксама), і выкарыстоўвайце apply для яго выкліку. Затым мы можам перайсці да кода, спецыфічнага для нашага плагіна.

Функцыя аўтаматычна атрымае два аргументу, якія могуць быць зменены, і новае значэнне. Мы кэшируем некаторыя звычайна выкарыстоўваюцца элементы, такія як малюнак і загаловак, і атрымліваем бягучую вышыню кожнага загалоўка. Затым мы выкарыстоўваем просты аператар switch-case для апрацоўкі кожнага з трох нашых змяняных параметраў. Перастаноўка падтыпаў з'яўляецца самай складанай часткай, але ўсё ж даволі трывіяльнай і падобнай на тое, як мы пазіцыянавалі іх у пачатку.

Даданне падзей

Важна дадаць падзеі, у якія распрацоўшчыкі, якія выкарыстоўваюць ваш плягін, змогуць дадаваць зваротныя выклікі, каб яны маглі рэагаваць на розныя рэчы, якія адбываюцца, калі карыстальнікі нейкім чынам ўзаемадзейнічае з фішкамі. База фішкі апрацоўвае большую частку гэтай задачы для нас, усё, што нам трэба зрабіць, гэта ініцыяваць падзея. Гэты убудова на самай справе не робіць вельмі шмат, але мы ўсё роўна можам выклікаць падзея пасля дадання кожнага загалоўка на старонку; для гэтага дадайце наступны код непасрэдна перад апрацоўшчыкам падзеі resize:

Гэта ўсё, што нам трэба зрабіць! Адзін радок кода, і ў нас ёсць наладжвальнае падзея, на якое можна замацаваць дзеянне. Мы выклікаем метад _trigger() асобніка плагіна, (які мы захавалі ў зменнай self) і перадаем у метад тры аргументу; першае - для назву падзеі, другое - для аб'екта падзеі (нам не трэба выкарыстоўваць гэта ў нашым прыкладзе плагіна, такім чынам, усталюем нулявое значэнне), а трэцяя - спасылка на элемент загалоўка. База фішкі аўтаматычна перадае аб'ект падзеі (калі ён паказаны) і дадзеныя, перададзеныя трэцім параметрам, у функцыю зваротнага выкліку, якая выкарыстоўвае дададзены падзея. Распрацоўшчык можа выканаць хук да гэтай падзеі, выкарыстоўваючы наступны сінтаксіс: $("element_caption_attached_to").сaptionator({ added: function(e, ui) { //do stuff });

Стылізацыя ўбудовы

Нам патрэбна зусім невялікая табліца стыляў для нашага плагіна, літаральна толькі тры стылю. Нават і не варта ствараць асобны файл для стыляў! Але мы створым новы файл з імем ui.captionator.css, фармат назвы якога з'яўляецца абавязковым фарматам для табліц стыляў плагіна і захаваем яго ў каталогу css. Дадайце да яго наступныя стылі:

Вось і ўсё. Наш убудова цяпер функцыянальна і візуальна завершаны. Загалоўкі павінны выглядаць наступным чынам:

Final Product

Вынік

Як і метад стварэння плагіна jQuery - fn.extend(), Query UI таксама мае свой уласны механізм, які дазваляе распрацоўнікам хутка і лёгка ствараць надзейныя і маштабуюцца убудовы, якія адпавядаюць высокім стандартам jQuery UI, хоць з пункту гледжання таго, што ён на самай справе робіць для нас, гэта нават лепш, чым у jQuery. База фішкі была створана такім чынам, што практычна ўся цяжкая праца выносіцца за рамкі стварэння ўбудовы.

Лёгка працаваць з метадамі, якія прадстаўляюцца базай фішкі, каб дадаваць метады да нашым ўбудовам, якія з'яўляюцца агульнымі для віджэтаў карыстацкага інтэрфейсу, напрыклад метады знішчэння і опцый, якія распрацоўшчыкі чакалі знайсці ў любым убудове. Мы таксама бачылі, наколькі лёгка запускаць прыстасаваныя падзеі, якія распрацоўнікі могуць выкарыстоўваць для рэагавання на ўзаемадзеяння або з'яўлення з фішкамі.

  • Сачыце за намі ў Твітэры або падпішыцеся на стужку навін Nettuts + каб атрымліваць інфармацыю пра лепшых навучальных дапаможніках па вэб-распрацоўцы ў Інтэрнэце.
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.