Як написати плагін для jquery, розробка

За останній час було багато прохань розповісти про те, як написати свій власний плагін до jQuery. Йдучи назустріч побажанням трудящих безкраїх полів Інтернету - виконую ці прохання ...

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

Для початку засвоїмо правила, яких необхідно дотримуватися при написанні плагіна для jQuery:

Слідуючи першому правилу, назвемо файл нашого плагіна jquery.zebra.js і перше, що ми напишемо в цьому файлі, буде визначення плагіна:

jQuery. fn. zebra = function ()

// тут ми розмістимо код плагіна

І хоча наш плагін ще не містить взагалі ніякого коду, його вже можна викликати наступним чином:

Але ми домовилися, що наш плагін повинен вміти приймати деякі параметри, тому давайте трохи доповнимо наш код:

jQuery. fn. zebra = function (options)

// тут ми розмістимо код плагіна

де options - це об'єкт, який може містить призначені для користувача настройки. А може і не містити .... Тому перше, що ми зробимо - визначимо параметри, скориставшись для цього jQuery.extend (object).

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

Доступні опції.

bgEven - рядок: колір фону для парних рядків.
bgOdd - рядок: колір фону для непарних рядків.
fontEven - рядок: колір шрифту парних рядків.
fontOdd - рядок: колір шрифту непарних рядків.
bgHover - рядок: колір фону при проходженні покажчика миші над рядком.
fontHover - рядок: колір шрифту при проходженні покажчика миші над рядком.

Демонстрація роботи.

От і все. Залишилося хіба що привести пару посилань по темі:

і тепер Ви знаєте як написати свій плагін для бібліотеки jQuery. Успіхів!