Створення спеціального плагіна jQuery

  1. Часто використовувані скорочення
  2. попередні зауваження
  3. Приступаємо до роботи
  4. Лістинг 1. Визначення нового jQuery-плагіна з ім'ям accordion
  5. Лістинг 2. Упаковка нового jQuery-плагіна з ім'ям accordion в функцію-оболонку
  6. збереження chainability
  7. Лістинг 3. Використання ключового слова return перед циклом each
  8. Структурування "акордеона"
  9. Лістинг 4. Одна ланцюжок викликів методів
  10. Малюнок 1. Структура "акордеон" без CSS
  11. Лістинг 5. Клас CSS accordion, який використовується для завдання стилів загального визначення списку
  12. Лістинг 6. Загальні стилі заголовків і областей вмісту "акордеон"
  13. Лістинг 7. Стилі CSS для заголовків і областей вмісту "акордеон"
  14. Малюнок 2. Структура "акордеон" із застосуванням CSS
  15. Лістинг 8. Спеціальні функції accordion, використовувані для створення jQuery-плагіна
  16. Значення за замовчуванням і параметри налаштування
  17. Лістинг 9. Додавання параметрів настройки і значень за замовчуванням в плагін jQuery
  18. Можливість багаторазового використання
  19. Лістинг 10. Використання декількох "акордеонів" в межах одного і того ж документа HTML
  20. Малюнок 3. Кілька структур "акордеон" в одному і тому ж HTML-документі
  21. Лістинг 11. Визначення двох структур "акордеон" як jQuery-акордеонів
  22. Ресурси для скачування

Доповніть бібліотеку jQuery своїм власним кодом

Бібліотека jQuery прискорює програмування на мові JavaScript. Вона дозволяє писати менше коду, спрощуючи процес програмування. Іноді, використовуючи бібліотеку jQuery, можна виявити, що раз у раз переписуєш один і той же код часто використовуваних функцій. У цьому випадку має сенс написати свій власний спеціальний плагін jQuery.

Модулі jQuery дозволяють поповнювати бібліотеку jQuery своїм кодом; їх можна використовувати для будь-яких повторюваних функцій. Наприклад, є безліч плагінів для демонстрації слайд-шоу і створення списку або меню "акордеон". Якщо пошукати плагіни jQuery, то можна знайти безліч прикладів, які можна використовувати у власних проектах (і подивитися, як вони побудовані).

Часто використовувані скорочення
  • CSS: Cascading style sheet / Каскадна таблиця стилів
  • HTML: Hypertext Markup Language

Ця стаття вчить, як швидко створити спеціальний плагін jQuery. На прикладі коду з покрокові інструкції демонструється процес створення jQuery-плагіна accordion. Стаття розрахована на тих, хто знайомий з jQuery і готовий підняти свої навички на наступний рівень.

В розділі завантаження є вихідний код прикладів, наведених в цій статті.

попередні зауваження

Передбачається наявність у читача загального уявлення про JavaScript, jQuery і каскадних таблицях стилів. Детальніше про це див. У розділі ресурси .

Приступаємо до роботи

jQuery - це бібліотека, яка розширює мову JavaScript. Створюючи новий плагін, ви, по суті, розширюєте бібліотеку jQuery, яка, в свою чергу, розширює JavaScript. Щоб зрозуміти, як саме ваш плагін розширює бібліотеку jQuery, потрібне розуміння властивості JavaScript prototype. Це властивість використовується не явно, а приховано - через властивість jQuery fn, яке представляє собою jQuery- псевдонім власного властивості prototype JavaScript.

Щоб створити новий jQuery-плагін, використовуючи властивість fn, досить привласнити його ім'я властивості fn і вказати йому на нову функцію, яка буде виступати в якості опції-конструктора, як в звичайному JavaScript. Код, наведений у лістингу 1, показує, як визначити новий jQuery-плагін з ім'ям accordion за допомогою об'єкта jQuery і властивості fn, а потім привласнити йому нову функцію конструктора.

Лістинг 1. Визначення нового jQuery-плагіна з ім'ям accordion
jQuery.fn.accordion = function () {// Додати тут код плагіна};

У лістингу 1 показаний один із способів створення jQuery-плагіна; в цьому прикладі немає нічого функціонально неправильного. Однак рекомендується спочатку створити функцію-оболонку, яка дозволить використовувати знак долара ($). За замовчуванням знак долара може викликати конфлікти з іншими структурами JavaScript. Якщо ж упакувати плагін в функцію, конфліктів не буде, і знак долара можна використовувати. Приклад коду, наведений у лістингу 2, демонструє, як застосувати функцію-оболонку до визначення jQuery-плагіна.

Лістинг 2. Упаковка нового jQuery-плагіна з ім'ям accordion в функцію-оболонку
(Function ($) {$ .fn.accordion = function () {// Додати тут код плагіна};}) (jQuery);

У лістингу 2 ключове слово jQuery застосовується до функції-оболонці, що дозволяє використовувати знак долара в межах плагіна, як це робиться при використанні властивості fn. З функцією-оболонкою можна використовувати знак долара замість ключового слова jQuery у всьому плагін без перешкод для інших плагінів. Це дозволяє писати менше коду і допомагає зберегти код плагіна чистим і простим в обслуговуванні.

збереження chainability

Перевагою jQuery є можливість використовувати будь-який тип селектора. Однак потрібно мати на увазі, що ваш плагін може працювати з декількома різними типами елементів. Використовуючи ключове слово this, можна застосовувати пов'язані функції, звертаючись до кожного елементу в циклі, незалежно від типу цього елемента. Якщо ключове слово return передує циклу each, то можна зберегти властивість chainability свого плагіна. У лістингу 3 показаний цикл each, призначений оброблювачу функції і скомбінований з ключовим словом return.

Лістинг 3. Використання ключового слова return перед циклом each
(Function ($) {$ .fn.accordion = function () {return this.each (function () {// Використання return дозволяє зберегти chainability});};}) (jQuery);

Завдяки коду, наведеному в лістингу 3, приклад плагіна accordion можна використовувати в ланцюжку викликів методів. Chainability - ще одна важлива особливість jQuery - дозволяє використовувати плагін в ланцюжку викликів методів. Наприклад, наступний код показує, як HTML-елемент поступово гаситься, а потім видаляється з об'єктної моделі документів (DOM) в одному ланцюжку викликів методів.

$ ( "# My-div"). FadeOut (). Remove ();

Структурування "акордеона"

Типова конструкція "акордеон" включає в себе рядки заголовків і суміжні з ними області з деяким вмістом. "Акордеони" відмінно підходять для HTML-структури визначення списків; для заголовків використовуються елементи dt, а для областей вмісту - елементи dd. Структура HTML з лістингу 4 представляє собою визначення списку з чотирма заголовками і відповідними областями вмісту.

Лістинг 4. Одна ланцюжок викликів методів
<Dl class = "accordion" id = "my-accordion"> <dt> Section 1 </ dt> <dd> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. </ Dd> <dt> Section 2 </ dt> <dd> Vestibulum a velit eu ante scelerisque vulputate. </ dd> <dt> Section 3 </ dt> <dd> Nam mi. Proin viverra leo ut odio. Curabitur malesuada. </ Dd> <dt> Section 4 </ dt> <dd> Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. </ Dd> </ dl>

У визначенні списку з лістингу 4 також є клас CSS з присвоєним йому ім'ям accordion. Без всяких CSS ця структура "акордеон" відповідає неформатований структурі з малюнка 1.

Малюнок 1. Структура "акордеон" без CSS

Клас accordion використовується для застосування стилів до загального визначення списку, заголовкам і області вмісту. У прикладі, наведеному в лістингу 5, в самому класі accordion вказані ширина, кордони, шрифт і розмір шрифту. Будь-який з прикладів застосування CSS можна змінити, вибравши свої власні стилі, такі як колір, шрифт, розміри і інтервали.

Лістинг 5. Клас CSS accordion, який використовується для завдання стилів загального визначення списку
.accordion {width: 500px; border: 1px solid #ccc; border-bottom: none; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }

Потім клас CSS accordion використовується для визначення стилів заголовків (dt) і вмісту dd. І заголовки, і вміст містять загальні стилі, які визначають нижню межу і задають значення полів 0, що дозволяє областям заголовків і вмісту розташовуватися впритул один до одного, як показано в лістингу 6.

Лістинг 6. Загальні стилі заголовків і областей вмісту "акордеон"
.accordion dt, .accordion dd {border-bottom: 1px solid #ccc; margin: 0px; }

Щоб елемент dt був більше схожий на заголовок, задамо колір фону і додамо покажчик курсору, щоб створити враження активного заголовка. У цьому класі є і інші стилі, такі як відбиття або розмір і щільність шрифту. Елемент dd додає відбиття, щоб відокремити опис від заголовка. Приклад приведений в лістингу 7.

Лістинг 7. Стилі CSS для заголовків і областей вмісту "акордеон"
.accordion dt {background: #eaeaea; cursor: pointer; padding: 8px 4px; font-size: 13px; font-weight: bold; } .Accordion dd {padding: 12px 8px; }

Коли всі класи CSS додані, візуальний результат більше нагадує акордеон, як показано на малюнку 2.

Малюнок 2. Структура "акордеон" із застосуванням CSS

програмування плагіна

Щоб зробити акордеон функціональним, необхідно написати код функцій jQuery-плагін, який ми почали створювати в попередньому розділі. Плагін accordion починається з циклічного зчитування всіх визначених "клавіш акордеона". Для визначення "акордеона" використовується наступний виклик jQuery в межах HTML-документа або в зовнішньому упровадженому файлі JavaScript.

$ ( 'Dl # my-accordion'). Accordion ();

Для кожної "клавіші" викликаються відповідні визначення за допомогою методу jQuery children, який повертає масив елементів dt. Застосуємо подія click до елементів dt, а потім до кожного dt - метод з ім'ям reset. Метод reset дозволяє згорнути всі елементи dd при першому завантаженні accordion. Подія click викликає спеціальний метод з ім'ям onClick при натисканні на елемент dt або заголовок. Метод onClick виконує пошук всіх елементів dt в "акордеоні". Він викликає спеціальний метод hide, який приховує кожен відповідний елемент dd за допомогою методу next для пошуку елемента dd, суміжного з елементом dt, а потім зрушує його вгору для анімації процесу закриття.

Коли всі елементи dd приховані, елемент dd, пов'язаний з натиснутим елементом dt, стає видимим завдяки методу slideDown і створює анімацію розширення і стиснення, як показано в лістингу 8. Останній рядок коду в методі onClick - це рядок return false, яка гарантує, що ніякої натиснутий заголовок не проявлятиме свою звичайну поведінку. Наприклад, при використанні елемента anchor як заголовок знадобиться метод return false, щоб користувач не потрапив на іншу сторінку або в іншу частину існуючої сторінки.

Лістинг 8. Спеціальні функції accordion, використовувані для створення jQuery-плагіна
(Function ($) {$ .fn.accordion = function (options) {return this.each (function () {var dts = $ (this) .children ( 'dt'); dts.click (onClick); dts. each (reset);}); function onClick () {$ (this) .siblings ( 'dt'). each (hide); $ (this) .next (). slideDown ( 'fast'); return false;} function hide () {$ (this) .next (). slideUp ( 'fast');} function reset () {$ (this) .next (). hide ();}}}) (jQuery);

Якщо плагін accordion пов'язаний зі структурою списку HTML-визначень, як той, що ми створили раніше, буде застосовуватися функція accordion. У функціях accordion при натисканні на один заголовок або елемент dt відкривається відповідна область вмісту, а будь-які інші відкриті області вмісту закриваються. Іншими словами, в кожен момент часу може бути відкрита тільки одна область вмісту.

Значення за замовчуванням і параметри налаштування

Плагін JQuery може містити значення за замовчуванням і параметри налаштування. Параметри настройки - це, по суті, ті аргументи, які передаються плагіну. Замість передачі декількох аргументів з параметрами налаштування можна передати один аргумент як литерала об'єкта, що є стандартним прийомом для jQuery. Якщо в плагіні дозволені параметри, то слід вказати для них значення за замовчуванням за допомогою об'єкта defaults. Як і параметри, значення за замовчуванням є буквальний об'єкта, який повинен містити властивості, що передаються в плагін.

Наприклад, якщо допускається властивість, яке можна використовувати для відкриття першої області вмісту "акордеона" при його першому завантаженні, то в плагіні слід вказати значення за замовчуванням для цієї властивості. Використовуйте значення за замовчуванням для визначення стану функцій за замовчуванням, а параметри налаштування - для перевизначення значень за замовчуванням. Коли плагін отримує параметри, для фактичного перевизначення можна використовувати метод $ .extend. Метод $ .extend jQuery об'єднує два або більше об'єктів. Приклад, наведений у лістингу 9, демонструє звичайну практику використання методу $ .extend для з'єднання визначаються користувачем параметрів зі значеннями за замовчуванням в плагіні jQuery.

Лістинг 9. Додавання параметрів настройки і значень за замовчуванням в плагін jQuery
(Function ($) {$ .fn.accordion = function (options) {var settings = $ .extend ({}, {open: false}, options); return this.each (function () {var dts = $ ( this) .children ( 'dt'); dts.click (onClick); dts.each (reset); if (settings.open) $ (this) .children ( 'dt: first-child'). next (). show ();}); function onClick () {$ (this) .siblings ( 'dt'). each (hide); $ (this) .next (). slideDown ( 'fast'); return false;} function hide () {$ (this) .next (). slideUp ( 'fast');} function reset () {$ (this) .next (). hide ();}}}) (jQuery);

Аргументами методу $ .extend служать цільовий об'єкт і два або більше об'єктів, що підлягають об'єднанню. У цьому прикладі цільовим об'єктом є порожній літерал об'єкта, який служить контейнером для об'єднуються об'єктів. Мета стає єдиним об'єктом, який містить значення об'єднуються об'єктів - в даному випадку змінної settings. Другий аргумент - це буквальний об'єкта, що містить властивості плагіна за замовчуванням. Третій аргумент - визначені користувачем параметри налаштування. Щоб передати параметри налаштування за допомогою плагіна accordion в HTML-елементі, потрібно знати, які властивості плагін виключає, щоб їх можна було передати у вигляді литерала об'єкта, як показано нижче.

$ ( 'Dl # my-accordion'). Accordion ({open: true});

У прикладі, наведеному в лістингу 9, параметри, що передаються плагіну, скасовують значення за замовчуванням за допомогою методу $ .extend. Якщо ніякі параметри не передаються, використовуються значення за замовчуванням. У прикладі плагіна властивість open використовується для визначення того, чи повинна при його завантаженні відкриватися перша область вмісту.

Можливість багаторазового використання

Приклад плагіна accordion можна багаторазово використовувати в будь-якому HTML-документі, в тому числі в одному і тому ж. Використовуючи новий створений нами плагін accordion, можна включити кілька таких структур "акордеон" і визначити кожну з них окремо як jQuery accordion. Щоб додати в HTML-документ кілька "акордеонів", просто додайте потрібну кількість структур accordion. Код, наведений у лістингу 10, включає дві структури accordion, розділених знаком кінця абзацу.

Лістинг 10. Використання декількох "акордеонів" в межах одного і того ж документа HTML
<Dl class = "accordion" id = "my-accordion"> <dt> Section 1 </ dt> <dd> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. </ Dd> <dt> Section 2 </ dt> <dd> Vestibulum a velit eu ante scelerisque vulputate. </ dd> <dt> Section 3 </ dt> <dd> Nam mi. Proin viverra leo ut odio. Curabitur malesuada. </ Dd> <dt> Section 4 </ dt> <dd> Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. </ Dd> </ dl> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ p> <dl class = "accordion" id = "my-accordion2"> <dt> Section 1 </ dt> <dd> mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. </ dd> <dt> Section 2 </ dt> <dd> Vestibulum a velit eu ante scelerisque vulputate. </ dd> </ dl>

Дві структури accordion в лістингу 10 майже ідентичні, крім них змісту і, що ще важливіше, значень їх ідентифікаторів. Перша структура містить значення ідентифікатора my-accordion. Друга структура містить значення ідентифікатора my-accordion2. Тепер до цих структур можна звертатися незалежно один від одного. Наприклад, наступний сценарій jQuery визначає кожну структуру "акордеон" з використанням нового створеного нами плагіна.

$ ( 'Dl # my-accordion'). Accordion ({open: true}); $ ( 'Dl # my-accordion2'). Accordion ({open: true});

Обидві структури "акордеон" визначаються з відкритою першою панеллю за замовчуванням. На малюнку 3 наведено приклад використання декількох плагінів accordion в одному і тому ж HTML-документі.

Малюнок 3. Кілька структур "акордеон" в одному і тому ж HTML-документі

Збираємо всі разом

Створивши новий спеціальний jQuery-плагін accordion, написавши CSS і розмістивши розмітку HTML, можна зібрати все це разом на остаточної Web-сторінці. Щоб jQuery-плагін accordion працював, необхідно впровадити бібліотеку jQuery. Я вважаю за краще використовувати мережу доставки контенту (CDN), яка доставляє бібліотеки в залежності від географічного положення користувача і тому забезпечує максимально можливу швидкість завантаження файлу. Бібліотека jQuery є в CDN Google, і цей файл можна впровадити на Web-сторінку, скориставшись URL https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js.

Є й інші версії бібліотеки. Див. Посилання в розділі ресурси на бібліотеки на сайті Google для розробників. Єдині додаткові файли, які потрібно вказати в HTML-документі, це файл CSS, який визначає стилі "акордеона", і jQuery-плагін accordion. Після цього HTML-розмітка фактичних структур "акордеон" зміниться. Приклад приведений в лістингу 11.

Лістинг 11. Визначення двох структур "акордеон" як jQuery-акордеонів
<! DOCTYPE HTML> <html> <head> <meta http-equiv = "Content-Type" content = "text / html; charset = UTF-8"> <title> Creating a Custom jQuery Plugin </ title> <link type = "text / css" rel = "stylesheet" href = "jquery.accordion.css" /> <script type = "text / javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery /1.7.2/jquery.min.js "> </ script> <script type =" text / javascript "src =" jquery.accordion.js "> </ script> <script type =" text / javascript "> $ (document) .ready (function () {$ ( 'dl # my-accordion'). accordion ({open: true}); $ ( 'dl # my-accordion2'). accordion ({open: true}); }); </ Script> </ head> <body> <dl class = "accordion" id = "my-accordion"> <dt> Section 1 </ dt> <dd> Mauris mauris ante, blandit et, ultrices a, suscipit eget , quam. </ dd> <dt> Section 2 </ dt> <dd> Vestibulum a velit eu ante scelerisque vulputate. </ dd> <dt> Section 3 </ dt> <dd> Nam mi. Proin viverra leo ut odio. Curabitur malesuada. </ Dd> <dt> Section 4 </ dt> <dd> Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. </ Dd> </ dl> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ p> <dl class = "accordion" id = "my-accordion2"> <dt> Section 1 </ dt> <dd> mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. </ dd> <dt> Section 2 </ dt> <dd> Vestibulum a velit eu ante scelerisque vulputate. </ dd> </ dl> </ body> </ html>

висновок

У цій статті показано, як легко створити спеціальний jQuery-плагін. Будь-які повторюються функції, які ви створюєте, можна швидко перетворити в плагін для прискорення і підвищення ефективності розробки. Ключ до будь-якого плагіну - багаторазове використання, а багаторазове використання - запорука підвищення продуктивності.

Ресурси для скачування

Схожі теми

  • Оригінал статті: Create a custom jQuery plug-in .
  • JavaScript and the Document Object Model (DeveloperWorks, липень 2002 г.): дослідження підходу JavaScript DOM і спосіб побудови Web-сторінки, на якій користувач може залишати замітки і редагувати їх зміст.
  • Get started with the JavaScript language, Part 1: JavaScript language fundamentals (DeveloperWorks, квітень 2011 року): основні концепції JavaScript.
  • Understanding built-in objects in JavaScript (DeveloperWorks, серпень 2011 року): про вбудованих об'єктах, доступних в мові JavaScript.
  • Achieve cross-browser functionality with HTML5 and CSS3 (DeveloperWorks, лютий 2011 року): нові методи, використовувані з новітніми браузерами.
  • Розділ IBM developerWorks, присвячений бібліотеці jQuery : Статті, блоги і форуми.
  • API Google Libraries-керівництво розробника : CDN-версія бібліотеки jQuery.

Підпишіть мене на повідомлення до коментарів

Уважаемые партнеры, если Вас заинтересовала наша продукция, мы готовы с Вами сотрудничать. Вам необходимо заполнить эту форму и отправить нам. Наши менеджеры в оперативном режиме обработают Вашу заявку, свяжутся с Вами и ответят на все интересующее Вас вопросы.

Или позвоните нам по телефонам: (048) 823-25-64

Организация (обязательно) *

Адрес доставки

Объем

Как с вами связаться:

Имя

Телефон (обязательно) *

Мобильный телефон

Ваш E-Mail

Дополнительная информация: