Создаем jQuery плагин

jQuery предлагает очень практичные и легкие пути по созданию плагинов. В этом уроке мы рассмотрим некоторые советы по созданию плагинов на jQuery. Создать jQuery плагин на самом деле очень просто. Для этого Вам не нужно быть специалистов и тратить много времени не его создание. Это просто как написание любого сценария.

Начнем.

1. Файл, в котором будет находиться плагин, назовем jquery.PLUGINNAME.js.

2. Псевдоним устанавливаем с помощью метода noConflict ().

Структура, которой мы будем пользоваться для определения jQuery.fn, следующая:

				jQuery.fn.firstPlugin  = function () {
					return  this.each (function () {
						alert (this.id); 
					});
			    }
				

Назвать Ваш плагин Вы можете, как хотите.

 $('#test').firstPlugin ();

Это действие покажет окно предупреждения с id данными

Теперь давайте выясним, как можно разобрать более сложный плагин. Своему плагину Вы можете задать различные параметры. Если Ваш плагин состоит из двух чисел, можно написать следующим образом:

 
				jQuery.fn.secondPlugin  = function (number1, number2, options) {
					  myoptions =  jQuery.extend ({
						  operation:  "sum",
						  label:  "Результат"
					  },  options);
					  $(this).html  (myoptions.label + " (" + myoptions.operation + ")" +  myoptions.number1+myoptions.number2);
			    }
				

В выше приведенном коде проверяется, как мы представим значение по умолчанию, в случае если две строки не передают функцию. Таким образом, мы можем вызвать одним из двух способов:

 $('#test').secondPlugin (1, 2);

Получаем:

 
				<span id =  "test">результат  (сумма) 3 </ span>
				

Или другим способом

 
				$('#test').secondPlugin  (1, 2, { operation: "sums two numbers together", label: "We  got" });
				

Если Вы предпочитаете такой вывод

 
				<span id =  "test"> Мы  получили (суммы двух чисел) 3 </ span>
				

Досих пор мы не упоминали объект jQuery, который обрабатывается внутренней обработкой. Распространив ее, мы создадим наши собственные функции и селекторы. Вот так это может быть добавлено.

 
				jQuery.fn.extend  ({
					myFirstFunction  : function () { alert ("Первая  функция") },
					thisIsTheSecond  : function (message) { alert ("2nd: "+ message) }
			    });
				

Затем вызываем, без каких либо проблем:

 
				$.myFirstFunction ();
					$.thisIsTheSecond ("Привет");
					Также мы можем создать собственный селектор, если он еще не  существует:
					jQuery.expr[":"].startsWith  = function (element, index, tokens) { 
						if  (!tokens[3]) return false;
						return eval  ("/^[/s]*" + tokens[3] + "/i").test ($(element).text());
					};
				

Как вы можете видеть, функция принимает три аргумента, а именно:

1) соответствующего элемента.

2) индекс элемента.

3) объект, который анализирует tokens.

Первый элемент массива является полная строка фильтра (в том числе параметры ), а вторая является ":", третий это имя фильтра и, наконец, четвертый параметр.

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

Это лишь некоторые советы для создания собственных плагинов.