jquery обзор плагинов

Написать свой плагин для jQuery достаточно легко. Если вы будете следовать приведенным ниже правилам, то и использовать ваш плагин также будет очень просто.

Источник

• Tutorials:Getting_Started_with_jQuery

Название плагина

Нужно придумать название плагина, например “foobar”. Создайте файл с именем jquery.[имя плагина].js

jquery.foobar.js

Добавьте необходимые методы

Создайте один или несколько методов, расширяя объект jQuery:

1
2
3

jQuery.fn.foobar = function() {
   // do something
};

Доступ к ним можно получить следующим образом:

1

$(...).foobar();

Настроки по умолчанию

Задайте дефолтные настройки плагина, которые могут быть переопределены пользователем:

1
2
3
4
5

jQuery.fn.foobar = function(options) {
   var settings = jQuery.extend({
       value: 5, name: "pete", bar: 655
   }, options);
};

Вызвать плагин jQuery с настройками по умолчанию:

1

$("...").foobar();

Или передать некоторые параметры

1

$("...").foobar({ value: 123, bar: 9 });

Документация

Перед тем как выкладывать jQuery плагин для скачивания, вам необходимо создать страницу с примерами его использования и документацию к плагину. Примеры оформления плагинов jQuery вы можете посмотреть на этой странице.

Теперь у вас есть базовые представления о написание плагинов jQuery. Давайте используем полученные знания и попробуем написать свой плагин jQuery.

Checkbox плагин

Множество людей работают с формами используя jQuery, на пример, для изменения состояния радиокнопок и чекбоксов. Код для этого выглядит примерно так:

1
2
3
4
5

$(":checkbox").each(function() {
   this.checked = true;
   this.checked = false; // or, to uncheck
   this.checked = !this.checked; // or, to toggle
});

Все использования цикла each в коде можно заменить при помощи плагина:

1
2
3
4
5

jQuery.fn.check = function() {
   return this.each(function() {
      this.checked = true;
   });
};

Теперь этот плагин jQuery можно использовать так:

1

$(":checkbox").check();

Мы также можем создать плагины uncheck() и toggleCheck(), но вместо этого мы будем использовать передаваемые в плагин параметры:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

jQuery.fn.check = function(mode) {
   // если параметр mode не определен, то используется значение 'on'
   var mode = mode || 'on';
   return this.each(function() {
      switch(mode) {
         case 'on':
            this.checked = true;
         break;
         case 'off':
            this.checked = false;
         break;
         case 'toggle':
            this.checked = !this.checked;
         break;
      }
   });
};

При вызове плагина jQuery пользователь может использовать значение по умолчанию или указать одно из следующих – «on«, «off» или «toggle»

1
2
3
4

$(":checkbox").check();
$(":checkbox").check('on');
$(":checkbox").check('off');
$(":checkbox").check('toggle');

Настройка параметров

Если необходимо использовать несколько параметров, то необходимо помять подход написания плагина jQuery, поскольку необходимо дать пользователю возможность опустить часть параметров и задать только необходимые уму.

В приведенном ниже коде вы можете увидеть как эта проблема решается при пощи использования объекта. Пользователь может опустить все параметры или передать их как объект парами ключ/значение для всех параметров, которые необходимо переопределить.

Структура плагина должна быть похожа на эту:

1
2
3
4
5
6
7
8
9
10
11
12
13

jQuery.fn.rateMe = function(options) {
   // Вместо того чтобы использовать статический контейнер
   // $("#rating"), мы используем jQuery ссылку
   var container = this;
   var settings = jQuery.extend({
      url: "rate.php"
      // укажите другие настройки по умолчанию здесь
   }, options);
   // ... остальной код ...
   // если возможно, верните ссылку на текущий объект - "this" 
   // чтобы не прерывать возможную jquery цепочку
   return this;
});

Вызвать плагин можно так:

1

$(...).rateMe({ url: "test.php" });