Изучаем Java

В этой главе мы поучимся, как создавать свои собственные модули на jQuery

Создание собственных модулей на jQuery

Библиотека jQuery предоставляет возможность расширения функциональности за счет добавления новых методов и функций. Вы можете создать собственный модуль и добавить его в хранилище на сайте разработчика библиотеки. Модуль принято размещать в отдельном файле с названием.

jquery. Название модуля . j s

Код в модуле обычно располагают внутри следующей конструкции:

(function($) {
// Код модуля
})(jQuery);

Символ $, указанный в качестве параметра, означает, что мы можем использовать этот символ внутри конструкции как псевдоним функции j Query ().

Вместо этого символа можно указать любой другой допустимый идентификатор и использовать его внутри конструкции.

(function(js) {
// Код модуля
})(jQuery);

В этом случае мы можем использовать идентификатор j s вместо символа $.

Подключать модуль необходимо после подключения библиотеки jQuery.

<script src="jquery.js" type="text/javascript"x/script>
<!-- Подключение модуля -->
<script src=11 j query. myPlugin. js" type=” text/ javascript” >
</script >

Создать собственный метод можно, добавив его в объект fn. Для примера добавим метод newcolor (), позволяющий изменить цвет текста.

(function($) {
$.fn.newcolor = function() {
return this.css("color", "red");
}
}) (jQuery) ;
$("div").click(function() {
$(this).newcolor();
});

Внутри нового метода доступен указатель (this) на коллекцию элементов jQuery. По этой причине мы можем использовать метод css () для изменения цвета текста. Для того чтобы не прерывать цепочку вызовов, метод должен возвращать указатель. В нашем примере этот указатель возвращает метод css (), а мы в свою очередь возвращаем его из метода newcolor ().

Добавить собственный метод можно с помощью функции $ . fn.extend (). В качестве параметра указывается объект. Переделаем наш предыдущий пример и используем функцию $ . f n. extend ().

(function($)   { $.fп.extend({
newcolor:  function()   {
return this.css("color",   "red");
}
});
}) (jQuery) ;

Добавить функцию, которая будет доступна без создания коллекции элементов, можно с помощью функции $. extend (). В качестве параметра указывается объект. Для примера добавим функцию суммирования двух чисел.

(function($)   { $.extend({
sum:  function(x,  у)   { x =
  parselnt(x); if   (isNaN(x))   x =
  0; у = parselnt(y); if  
 (isNaN(y))  у = 0; return  (x + y);
}
});
})(jQuery);
$("#btnl").click(function ()   {
alert($.sum($("#txtl").val(),  $("#txt2").val()));
});

Число 1:
<input type="text" id="txtl"><br>
Число 2:
<input type="text" id="txt2"><br>
<input type="button" id="btnl" value="Получить сумму чисел">

После щелчка на кнопке Получить сумму чисел будет вызвана функция $ . sum (). В качестве параметров функции мы указываем значения текстовых полей.

Функция $. extend () позволяет также произвести слияние нескольких объектов. Формат функции:

Объект = $.extend(Начальный объект, Объект1[, ОбъектЫ])

Если в начальном объекте существует такое же свойство, как в других объектах, то его значение будет перезаписано, а если не существует, то свойство будет добавлено. Это позволяет определять значения опций по умолчанию. В качестве примера добавим метод newmsg (), который выводит сообщение.

(function($)   {
  $.fп.extend({
newmsg:  function(obj)   {
var m = { mcssage:  "Сообщение no умолчанию"  }; m =
$.extend(m,  obj); alert(m.mcssage); return this;
}
});
})(jQuery);
$("p").click(function()   {
$(this).newmsg().newmsg({ mcssage:"Новое сообщение"  });
});
< div >Нажмите для вывода сообщений</ div >

В этом примере при щелчке на абзаце вначале будет выведено сообщение Сообщение по умолчанию, так как мы не передали параметр. Затем получим сообщение Новое сообщение за счет перезаписи значения свойства message с помощью функции $ . extend ().
Обратите внимание на цепочку вызовов. $ (this) .newmsg () .newmsg ({ mcssage : “ Новое сообщение" });

Это достигается за счет возвращения указателя из метода с помощью строки: return this;

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

$(this).newmsg().newmsg({ message:"Новое сообщение" }) .css("color", "red");