Чаще всего мне приходится писать скрипты под jQuery, и иногда очень удобно реализовывать функциональность путем создания плагина. В этой статье я покажу как это можно сделать. Пример будет тривиальный, но надеюсь понятный. Фунцкиональнось учебного плагина аналогична hover эффекту – при наведении указателя мыши на элемент, его фон меняется, если убрать указатель, то фон меняется на первоначальный (этого можно достичь при помощи CSS, но не забывайте, что это всего-лишь пример). В основе библиотеки jQuery лежит класс с аналогичным названием jQuery (у него есть псевдоним $). Подобно тому, как классы в JavaScript можно расширять, используя свойство prototype, точно также мы можем расширить функциональность класса jQuery. Именно таким образом и создаются плагины. Поскольку в jQuery для свойства prototype есть псевдоним fn, то он чаще всего и используется для этой цели.
Наш плагин начинаем следующим образом:
Code
(function($){
$.fn.backgroundHover = function(options) {
return this.each(function () {
// Код плагина
});
};
})(jQuery);
Первая и последняя строка этого блока представляют собой вызов анонимной функции, единственным аргументом которого будет объект jQuery. В результате, мы получим еще одну область определения переменных (scope), то есть, все переменные и функции, объявленные внутри этой анонимной функции будут недоступны извне (не распространяются на глобальную область видимости window). Поскольку плагин выполняет действия над некоторым множеством элементов DOM в одном вызове, то мы должны обрабатывать все эти элементы в одном цикле. Это делается при помощи функции each в строке 3. Все плагины способны принимать некоторое количество параметров, выполним эту функциональность следующим образом:
Code
$.fn.backgroundHover = function(options) {
options = $.extend({
background: 'red',
}, options);
Все параметры хранятся в переменной options. Для инициализации этой переменной мы используем фунцию $.extend(), первым аргументом которой указываем объект, с параметрами по умолчанию, второй аргумент – параметры, указанные пользователем. В нашем случае, имеем всего лишь один параметр – цвет фона (background), по умолчанию он имеет значение red. Ну и последний шаг – добавляем функциональность плагина внутрь функции each:
Code
var self = $(this);
self.mouseover(function() {
self.oldBG = self.css('backgroundColor');
self.css('backgroundColor',options.background);
});
self.mouseout(function() {
self.css('backgroundColor',self.oldBG);
});
В первой строке мы создаем переменную self, которая будет ссылаться на текущий элемент DOM. Для всех выбранных элементов будут добавлены два обработчика событий – mouseover и mouseout, которые будут менять цвет фона в соответсвии с параметром options.background. На этом создание плагина закончено, используется он следующим образом:
Code
$('.someNodes').backgroundHover({background: "#fce"});
Исходный код плагина можно посмотреть здесь: background.jquery.js.
Источник: www.jstoolbox.com
Главная 
