Створюємо плагін jquery ui

В ході уроку буде створено простий плагін jQuery UI, який додає назви зображень. Функції плагіна дуже прості і ми зможемо сфокусуватися на тому, що потрібно для організації плагіна jQuery UI без втрати часу на кодування. Знання jQuery UI може бути корисним, але не зробить істотного впливу на успішне завершення уроку.

Потрібно скопіювати jQuery, також пару файлів з jQuery UI (потрібна версія jQuery UI 1.8). Створіть робочу директорію де-небудь на Вашому комп'ютері і назвіть її jqueryui-plugin. потім створіть в ній папки css. js і img (зображення, які використовуються в уроці можна знайти в архіві з кодами).

Завантажте бібіліотека і розпакуйте її. Нам потрібно тільки кілька файлів з архіву, і іменноо jquery-1.4.1.js. jquery.ui.core.js і jquery.ui.widget.js. Помістіть дані файли в папку js у Вашій робочій директорії. Також знадобиться якась тема поточної стабільної версії jQuery UI (в уроці використовується ui-lightness).

Ми будемо робити віджет назв, тому нам знадобиться сторінка з набором зображень для розробки і тестітрованія плагіна. Код тестової сторінки:

Все досить просто. На сторінці розміщені тільки три зображення. За ними слідують чотири файли зі скриптами. Три посилаються на вихідні файли jQuery і jQuery UI, а четвертий на наш плагін. Файл jquery.ui.core.js потрібно для віджетів / плагінів jQuery UI. Файл jquery.ui.widget.js дозволяє створювати повноцінні віджети, які володіють загальною функціональністю API. Більшість бібліотечних компонентів вимагають ісользованія цього файлу, ми буде також використовувати його для створення нашого плагіна.

Створюємо файл плагіна

Весь код, який виконується нашим плагіном повинен бути инкапсулирован в анонімну фуункцію. Об'єкт jQuery передається в цю функцію і використовується всередині неї через псевдонім $. Таким чином забезпечується сумісність з методом jQuery noConflict (). Це специфіковану вимога і його необхідно виконувати.

Потім потрібно визначити плагін. Додаємо наступний код в нашу анонімну функцію:

Шаблон використання фабрики віджета дуже простий. Ми викликаємо метод widget (). вказуючи ім'я плагіна як перший аргумент. Об'єкт містить властивості та методи, які виконують функції плагіна. Такий підхід дозволяє нам викликати плагін (і створювати), використовуючи загальний синтаксис jQuery $ ( "елемент_к_ которому_пріменяется_плагін"). Captionator (), також як і інші методи jQuery або jQuery UI.

Фабрика віджета має набір методів і властивостей. Наприклад, ми можемо встановити певні опції для плагіна, використовуючи властивість options. Або додати функцію ініціалізації, яка буде виконуватися автоматично фабрикою віджета, як тільки екземпляр плагіна буде викликаний. В об'єкті, який є другим аргументом в попередньому коді, вставимо рядки:

Це тільки опції, які використовуються в нашому плагін. Користувач плагіна може вказати позицію назви (зверху чи знизу) по відношенню до зображення, колір тексту і фону назви. Для змін установок за замовчуванням розробник може використовувати такий запис у своєму коді.

Потім ми створюємо функцію ініціалізації:

Ім'я методу повинно мати підкреслення на початку, так як jQuery UI запобігає виклик таких методів поза плагіна, що може викликати раптову зупинку при виклику коду HTML сторінки.

Основна частина нашого методу ініціалізації - це набір змінних. В нашій функції this посилається на об'єкт, який передається в метод примірника плагіна. Перша змінна містить посилання на поточний екземпляр плагіна. Метод _create викликається для кожного елемента (одного або декількох), для якого викликається метод плагіна.

Ми можемо отримати доступ до опцій плагіну за замовчуванням (які змінюються автоматично, якщо користувач встановлює котрусь із них) використовуючи властивість об'єкта options. Ми зберігаємо її в другій змінної. До елементу, для якого викликаний метод плагіна (captionator ()) можна отримати доступ, використовуючи властивість об'єкта element. Ми зберігаємо його в третій змінної.

Ми використовуємо четверту зміну для зберігання посилання на новий елемент назви, який будується з простого . innerText. що належить . використовує має атрибут alt поточного зображення, і до нього додано кілька класів. Ми використовуємо ім'я класу ui-widget. таким чином він може використовувати стилі за замовчуванням з поточної теми jQuery UI. Також ми даємо йому ім'я класу користувача, і можения робити установки нашого власного стилю.

Потім потрібно встановити деякі властивості. Ми використовуємо окрему таблицю стилів, але деякі установки, такі як color і background-color контролюються через конфігуровані опції, тому нам треба встановити їх при використанні плагіна. Ширина назви повинна відповідати ширині зображення, яке його перекриває. Таким чином її треба визначити і використовувати в програмі. На завершення новий вставляється в сторінку безпосередньо за цільовим зображенням.

Як тільки зображення вставлено, потрібно змінити розмір і позиціонувати його. Зробити таку дію акуратно можна в тому випадку, якщо зображення вже сущесвуют в DOM, і до нього застосовані правила CSS, такі як font-size. Тому ми додаємо назву на сторінку, і потім визначаємо його розміри, які збереглися в змінних capWidth і capHeight.

Як тільки назва додано на сторінку (і тільки тоді) ми можемо встановлювати коректні ширину, висоту і положення для кожного назви, використовуючи для цього метод css () знову. Назва насправді повністю відокремлена від зображення. Воно вставлется відразу після кожного зображення і потім позиціонується.

Все чудово, поки в браузері не буде змінений розмір вікна. Зображення перемістяться, а назви немає, тому, що вони позиціонування абсолютно. Щоб виправити становище, ми використовуємо обробник події ізененія розміру, прив'язаний до вікна, який просто змінює положення кожної назви відповідно до становищем його зображення. Даний обробник події є останнім пунктом нашого методу ініціалізації.

Інший метод нашого плагіна - це метод destroy (). який є загальним для всіх плагінів jQuery UI. Ми повинні реалізувати даний метод для очищення після використання нашого плагіна. У нашому прикладі метод може бути дуже простим:

Все що потрібно - видалити назву і відв'язати обробник події зміни розміру вікна. Даний метод може бути викликаний розробником при використанні плагіна, тому ім'я методу не має попереднього підкреслення. Для виклику даного методу розробник використовує запис $ ( "елемент_к_ которому_пріменяется_плагін"). Captionator ( "destroy").

Нам потрібно забезпечити інший метод, який контролюється / виконується фабрикою віджета. Опції плагіна можна встановлювати під час його виклику $ ( "елемент_к_ которому_пріменяется_плагін"). Captionator ( "option", "location", "top"). А для застосування опцій потрібно написати метод _setOption.

Назва даного методу забезпечено підкресленням, так як розробник використовує option. а не _setOption для дійсного зміни опцій. Нам не потрібно беспопкоітся про те, як це обрабитивается, ми тільки забезпечуємо даний метод тим, що потрібно для нашого плагіна. Так цей метод вже існує в фабриці віджета, то потрібно викликати оригінальний метод, який виконатися перед нашим кодом, з використанням прототипу об'єкта Widget. вказівки імені методу (в нашому випадку це _setOption. але можна також використовувати будь-який інший вбудований метод) і вказуємо apply для його виклику. Потім можна виконувати код для нашого плагіна.

Функція автоматично отримує два аргументи, які є змінною опцією і новим значенням. Ми зберігаємо загальні елементи, такі як зображення і назва, поточну висоту кожного назви. Потім використовується просте вираження switch-case для виділення кожної з трьох опцій для зміни.

додаємо події

Дуже важливо додати події, які розробник, що використовує ваш плагін, може обробляти в момент, коли кінцевий користувач впливає на плагін якимось чином. Фабрика віджета обробляє більшість таких завдань для нас. Все що потрібно - це запустити подія. Наш плагін має трохи функцій, але ми можемо запускати подія кожен раз, коли назва додається на сторінку. Додамо наступний код безпосередньо перед обробником події змінено розмір:

стилізація плагіна

Для нашого плагіна потрібна маленька таблиця стилів. Буквально нам потрібно встановити три стилю. Ми створимо новий файл з назвою ui.captionator.css. збережемо його в папці css. Він містить наступний код:

Тепер наші назви повинні виглядати так:

висновок

Як і метод створення плагінів jQuery fn.extend (). jQuery UI також має свій власний механізм, який дозволяє розробнику швидко і легко створювати масштабовані і продуктивні плагіни, які відповідають високим стандартам проектів jQuery UI. Фабрика віджета бере на себе великий обсяг складної роботи зі створення плагіна.

5 останніх уроків рубрики "jQuery"

Сьогодні ми б хотіли вам розповісти про бібліотеку TypeIt - безкоштовному jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна домогтися дуже реалістичного ефекту.

jQuery плагін для створення тимчасової шкали.

jQuery плагін для створення діаграми Ганта.

Приклад того як здійснити завантаження файлу через PHP і jQuery ajax.

\ Фуункцію. \ Ага) А по уроку відпишуся коли дочитаю

Для чого городити такий город, (який до всього іншого абсолютно по-різному виглядає в різних браузерах) якщо все це можна зробити парою DIV-ів + пара рядків css (кроссброузерно)

Це всеголішь демонстрація написання плагіна! Людям, які навчаються писати плагіни, пофігу скільки рядків можна написати їм гавно зрозуміти

Мда занадто складна структура для дво блоків, але як практика відмінно. Якщо правильно застосувати всі уроки які описані тут раніше, то можна зібрати некволий плагін для своїх цілей. Так я в своїй студії написав плагін для слайдшоу. Тепер всі мої замовники волають від задоволення.

Павло, в світі існує кілька часових поясів =)

За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!

Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!

Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.