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.

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

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

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

No related posts.