Вы можете расширять возможности jQuery с помощью плагинов.
ТвитнутьРеализация одних и тех же функций в различных приложениях побуждает разработчиков заново писать один и тот же код несколько раз лишь незначительно изменяя его под конкретное приложение.
Плагины jQuery позволяют забыть разработчикам о данной проблеме. Разработчик может один раз написать плагин, который позволяет реализовать определенную функцию и затем использовать его в необходимых приложениях написав только одну строчку кода.
В интернете можно найти огромное количество бесплатных jQuery плагинов написанных другими разработчиками и использовать их для создания своих приложений. Можете начать поиски интересных jQuery плагинов на сайте PluginDetector.com.
Для того, чтобы создать плагин необходимо добавить к объекту jQuery.fn свойство, имя которого будет является именем плагина:
Синтаксис:
//Определяем код плагина
(function($){
$.fn.имяПлагина = function() {
// Код плагина
};
})(jQuery);
//Вызываем плагин
$(селектор).имяПлагина();
Обратите внимание: обертка (function($){ }) (jQuery) используется здесь для того, чтобы внутри кода плагина можно было использовать знак $ не боясь при этом, что он будет конфликтовать с другими библиотеками JavaScript.
При написании плагинов следует обратить внимание на то, что в коде плагина ключевое слово this будет относиться к jQuery объекту, который вызвал этот плагин, а не к DOM объекту как в функциях обратного вызова.
Это значит, что в коде плагина для того, чтобы обратится к jQuery объекту необходимо использовать this, а в коде функций обратного вызова использовать $(this).
Пример
(function($){
/* Создаем плагин с именем plugin, который будет находить сумму содержимого всех
выбранных абзацев на странице */
$.fn.plugin=function(){
var sum=0;
/* Для того, чтобы сослаться на выбранный элемент в коде плагина мы
используем this, но в функции обратного вызова мы уже должны использовать
$(this) для этих же целей */
this.each(function(){
sum=sum+Number($(this).html());
});
// Возвращаем полученную сумму
return sum;
}
})(jQuery)
Плагин в предыдущем примере возвращал целое значение, но часто плагины используются для модификации группы элементов и передачи их следующему методу в цепочке.
Пример цепочки методов:
//Пример цепочки из двух методов css и html
$("p").css("color","red").html("Новое содержимое");
Для того, чтобы Ваш плагин не "разрывал" цепочку методов необходимо, чтобы он возвращал ключевое слово this.
Пример
(function($){
/* Создаем плагин с именем adjust, который будет устанавливать размер текста
выбранных элементов равным 1.4em и передавать их дальше по цепочки методов. */
$.fn.adjust=function(){
/* Для того, чтобы поддержать цепочку методов нужно вернуть из плагина
преобразованную группу выбранных элементов */
return this.each(function(){
$(this).css("fontSize","1.4em");
});
}
})(jQuery)
Многие плагины позволяют пользователям настраивать их поведение с помощью передаваемых им опций.
Пример
(function($){
/* Создаем плагин с именем adjust, который будет устанавливать указанный размер и
цвет выбранным элементам. */
$.fn.adjust=function(option){
/* Установим значения опций по умолчанию. Они будут использованы если пользователь
при вызове плагина не передаст значений. */
var setting={size:'1.4em',color:'red'};
return this.each(function(){
// Если пользователь передал опции соединить их с опциями по умолчанию
if (option){$.extend(setting,option);}
$(this).css("fontSize",setting.size);
$(this).css("color",setting.color);
});
}
})(jQuery)
Заключительным шагом в создании плагинов должно стать вынесение кода плагина в отдельный файл. И написания инструкций, которые должны разъяснить потенциальным пользователям как и зачем можно использовать Ваш плагин.
Пример
<script src="/editor/plugin1.js"></script>
$(document).ready(function(){
$("#but1").click(function(){
$("#demo p").adjust();
});
$("#but2").click(function(){
$("#demo p").adjust({size:"2em"});
});
$("#but3").click(function(){
$("#demo p").adjust({size:"1.7em",color:"green"});
});
});