Как вы уже знаете, одним из главных качеств библиотеки jQuery является очень удобный поиск элементов и возможность дальнейших манипуляций с ними. Так вот, список этих манипуляций можно расширять, организуя новые методы для объекта jQuery. Вынесенные в отдельный файл, такие расширения образуют плагины для библиотеки jQuery.
Далее, описывая правила создания собственных плагинов мы будем реализовывать отдельный полноценный плагин в качестве примера. Его функциональность будет состоять в добавлении нового поведения для выбранных элементов — изменение цвета при наведении курсора. Назовем плагин responsiveBlock (отзывчивый блочный элемент).
Обычно, javascript-плагины располагаются в отдельных файлах. Для файлов с плагинами jQuery существует соглашение касательно их названия — оно должно удовлетворять формату jquery.plaginName.js. Таким образом, файл с нашим плагином нужно будет назвать jquery.responsiveBlock.js.
Чтобы наш плагин стал доступен на странице необходимо подключить файл с библиотекой jQuery, а затем js-файл с нашим плагином плагина:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" language="javascript"></script>
<script src="jquery.responsiveBlock.js" type="text/javascript" language="javascript"></script>Чтобы добавить новый метод в объект jQuery, необходимо добавить функцию с его реализацией в объект jQuery.fn. В нашем плагине нужно организовать один метод — который будет добавлять элементам умение изменять цвет при наведении курсора. Назовем его так же как и сам плагин responsiveBlock:
jQuery.fn.responsiveBlock = function(){
// здесь будет реализация метода
}; // точка с запятой в конце реализации очень важны! Без нее плагин не заработает.Чтобы избежать возможных конфликтов имен, обернем наш код в конструкцию
jQuery.noConflict():
```javascript
(function($){
jQuery.fn.responsiveBlock = function(){
// здесь будет реализация метода
};
})(jQuery);
```
Переменная this, в теле метода, всегда содержит текущий объект jQuery (тот, на котором и был вызван метод). Для того, чтобы обойти все выбранные элементы по отдельности, используем метод .each(). А для возможности продолжить цепочку методов наш метод должен будет возвратить текущий объект jQuery:
(function($){
jQuery.fn.responsiveBlock = function(){
var make = function(){
// реализация работы метода с отдельным элементом страницы
};
return this.each(make);
// в итоге, метод responsiveBlock вернет текущий объект jQuery обратно
};
})(jQuery);В большинстве плагинов требуется наличие настроек. В нашем плагине например, будет очень полезна возможность указывать цвет элемента пока на него не наведен курсор и цвет после наведения. Существует один простой вариант организации настроек у плагина jQuery. Он позволят задавать список свойств, а так же их значения по умолчанию. Свои значения этих свойств, при этом, можно будет задавать в момент установки плагина на элемент, в первом параметре:
(function($){
jQuery.fn.responsiveBlock = function(options){
// Зададим список свойств и укажем для них значения по умолчанию.
// Если при вызове метода будут указаны пользовательские
// варианты некоторых из них, то они автоматически перепишут
// соответствующие значения по умолчанию
options = $.extend({
defColor:"white", //цвет элемента над которым нет курсора
hoverColor:"red" //цвет элемента на который наведен курсор
}, options};
var make = function(){
// реализация работы метода с отдельным элементом страницы
};
return this.each(make);
// в итоге, метод responsiveBlock вернет текущий объект jQuery обратно
};
})(jQuery);// теперь можно задавать плагин с настройками по умолчанию:
$('div:first').responsiveBlock();
// или указать свои значения некоторых или всех настроек
$('div:last').responsiveBlock({defColor:"#bbbbbb"});
$('ul').responsiveBlock({defColor:"#aaaaaa", hoverColor:"green"});Для лучшего понимания данного примера стоит ознакомиться с назначением функции
$.extend
Полученная выше заготовка, является наиболее распространенным вариантом шаблона для плагинов jQuery. Поэтому если вы решили написать свой плагин, то можете смело начинать именно с нее (естественно со своим именем плагина и своим списком настроек).
<script async src="https://jsfiddle.net/moalex/xtLpb7g0/embed/js,result/?bodyColor=fff"></script>Библиотека jQuery позволяет организовывать собственные события на элементах, и в дальнейшем устанавливать их обработчики (как на события onClick или onMousemove). Чтобы генерировать собственные события на выбранных элементах необходимо воспользоваться методом .trigger(), а устанавливать их обработчики можно с помощью .on(). Таким образом, плагины могут предоставлять не только новую функциональность но и связанную с ней систему событий, которой сможет воспользоваться любой пользователь вашего плагина.
Чтобы имена событий вашего плагина не пересекались с чужими именами событий, используйте пространства имен. Для этого удобнее всего использовать имя самого плагина.
В нашем плагине можно организовать событие stateChange, которое будет происходить при смене состояния элемента (наведен курсор или нет):
(function($){
jQuery.fn.responsiveBlock = function(options){
options = $.extend({
defColor: "white", // цвет элемента над которым нет курсора
hoverColor: "red"
}, options);
var make = function(){
// здесь переменная this будет содержать отдельный DOM-элемент, к которому и нужно будет применить воздействия плагина
$(this).css({ background: options.defColor })
.mouseenter( function(){
$(this).css({
background: options.hoverColor
});
})
.mouseleave( function(){
$(this).css({
background: options.defColor
});
});
};
return this.each(make);
};
})(jQuery);// теперь к элементам страницы можно будет привязывать обработчики события stateChange:
$('div').on('responsiveBlock.stateChange', handler);Создавать более продвинутые плагины с возможностями ООП, можно воспользоваться фабрикой виджетов jQuery UI.