Лучшие плагины jquery. Приступая к работе. jQuery плагин для постраничной навигации

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

Постановка задачи

Прежде чем продолжить, давайте разобьем нашу задачу на несколько этапов:

• Когда пользователь скролит страницу вниз больше чем на одну высоту экрана, то у него внизу экрана должен плавно появиться блок с изображением стрелочки вверх
• При клике на этот блок страница должна автоматически прокрутиться в начало страницы
• Если пользователь будет скролить страницу вверх, то блок должен автоматически прятаться

Требования к плагину

Плагин должен иметь настройки:

• для задания изображения, которое будет появляться в блоке
• установка высоты прокрутки экрана, после которой будет появляться блок для скрола

Итак, с требованиями и задачами разобрались. Теперь можно смело переходить к реализации данного плагина на jQuery.

При создании плагина на jQuery необходимо код плагина поместить в отдельный файл, который бы имел название: jquery.название_плагина.js . Это такой стандарт. Так что лучше ему придерживаться.

Итак, наш плагин будет называться scroller , поэтому создадим пустой файлик с именем jquery.scroller.js

Для того чтобы создать плагин необходимо объекту jQuery.fn добавить новый метод, где имя метода — это название нашего плагина. Давайте взглянем на пример:

Как Вы успели заметить, вместо знака доллара $ мы используем слово jQuery . Это делается для того, чтобы наш плагин не конфликтовал с другими javascript библиотеками (например,Mootools, Prototype), которые также используют знак доллара $ . Если же Вам привычнее работать со знаком доллара $ , то тогда весь код плагина надо обвернуть в само вызывающееся замыкание:

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

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

(function($){ $.fn.scroller = function(options){ //Значения по умолчанию options = $.extend({ img_src: "images/scrollup.png", height: 1.5, }, options); }; }(jQuery);

Все параметры хранятся в переменной options . Для инициализации этой переменной мы используем фунцию $.extend() , первым аргументом которой указываем объект, с параметрами по умолчанию, второй аргумент - параметры, указанные пользователем. В нашем случае используется 2 параметра:

• img_src — полный путь к картинке на сервере, которая будет выводится в блоке внизу страницы. По умолчанию равен - "images/scrollup.png"
• height — высота прокрутки страницы, после которой будет появляться блок. По умолчанию равна — 1.5

Прежде чем продолжить, следует сказать несколько слов о контексте. Внутри плагина зарезервированное слово this это ссылка на объект jQuery , к которому вызывается плагин. Но когда, в коде плагина используются callback функции, то там this - это ссылка на нативный DOM элемент. Ошибки возникают тогда, когда разработчики лишний раз делают $(this) или наоборот забывают это делать. Ниже по тексту Вы все поймете.

Итак, движемся дальше. Так как наш плагин может быть вызван сразу к набору элементов ($(".class").scroller(); ), то нам надо этот момент учесть и обойти все элементы которые вошли в этот набор и к каждому применить наш плагин. Реализуется это очень просто. Используется функция each() . Давайте посмотрим на пример:

Как видите в данном случае this — это ссылка на объект jQuery, поэтому здесь не надо делать $(this) ! Кроме того наш плагин возвращает этот объект this , так как используется ключевое слово return . Это сделано для того, чтобы поддерживать цепочки вызовов jQuery. Ведь красота и лаконичность цепочек вызовов jQuery является одной из причин, почему jQuery так популярна. Поэтому для того, чтобы Ваш плагин поддерживал эти цепочки вызовов, Вы должны убедиться, что Ваш плагин возвращает этот this в своей главной функции

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

(function($) { $.fn.scroller = function(options) { //Значения по умолчанию options = $.extend({ img_src: "images/scrollup.png", height: 1.5, }, options); return this.each(function(){ //ссылка на нативный элемент DOM var $this = $(this), //Высота прокручиваемого элемента height = $this.height(), content = "

Для того чтобы не путаться в дальнейшем, я создал локальную переменную $this , которой присвоил объект jQuery. Также определили начальную высоту объекта, так как именно от неё будет зависеть, когда будет появляться блок внизу экрана. Кроме этого создали html разметку нашего блока и вставили его внутрь объекта, для которого вызывался плагин.

Теперь осталось повесить собыите scroll , для выбранного элемента и в зависимости от установок плагина и прокрутки страницы, выводить или прятать блок внизу экрана. А также при клике на этот блок прокручивать страницу в начало экрана.

(function($) { $.fn.scroller = function(options) { //Значения по умолчанию options = $.extend({ img_src: "images/scrollup.png", height: 1.5, }, options); return this.each(function(){ var $this = $(this), height = $this.height(), content = "

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

В сети довольно много статей про то, как писать плагины для jQuery, но я решил, что лучше читать первоисточник. А поскольку русской версии мне найти не удалось, и руки чесались что-нибудь попереводить, я попереводил. Оригинал статьи , а мой перевод — ниже.

Итак, вы уже разобрались с jQuery и теперь хотели бы научиться писать собственные плагины. Отлично! Вы пришли в правильное место. Расширение возможностей jQuery с помощью плагинов и методов - это очень мощный механизм, который сэкономит вам и вашим коллегам не один час разработки. Эта статья описывает базовые моменты, рекомендации и распространённые ошибки, которые случаются при написании плагина.

Приступая к работе

Начните писать jQuery-плагин с добавления новой функции-свойства к объекту jQuery.fn . Название функции и будет названием вашего плагина:

JQuery.fn.myPlugin = function() { // Творить волшебство здесь };

Но постойте! Где же чудный значок доллара, к которому я так привык? Он есть, но чтобы убедиться, что ваш плагин не будет конфликтовать с другими библиотеками, которые тоже могут использовать знак доллара, будет лучше сделать так. Передадим объект jQuery в самовызывающуюся функцию (замыкание), которая привяжет его к знаку доллара, так что никакая другая библиотека не сможет его переопределить в текущем scopе"е исполнения.

(function($){ $.fn.myPlugin = function() { // Творить волшебство здесь }; })(jQuery);

Да, так лучше. Теперь внутри этого замыкания мы можем сколько угодно использовать знак доллара вместо jQuery .

Контекст

Теперь, когда у нас есть заготовка, мы можем начать писать собственно код плагина. Но перед этим, я бы хотел сказать пару слов про контекст. В непосредственном scope"е функции-плагина, ключевое слово this - это тот самый jQuery-объект, из которого был вызван плагин.

(function($){ $.fn.myPlugin = function() { // нет необходимости делать $(this), потому что // "this" уже является jQuery-объектом // $(this) - это тоже самое, что и $($("#element")); this.fadeIn("normal", function() { // this - элемент DOM }); }; })(jQuery); $("#element").myPlugin();

Основы

Теперь, когда мы знаем, что такое контекст jQuery-плагинов, давайте напишем плагин, который действительно что-то делает.

(function($){ $.fn.maxHeight = function() { var max = 0; this.each(function() { max = Math.max(max, $(this).height()); }); return max; }; })(jQuery); var tallest = $("div").maxHeight(); // Возвращает высоту самого высокого div"а

Этот простой плагин возвращает высоту самого высокого div "а на странице, используя метод .height() .

Цепочки вызовов

Предыдущий пример возвращает высоту самого высокого div "а на странице, но зачастую задача плагина не вернуть определённое значение, а модифицировать каким-то образом набор элементов, и передать их дальше, следующему методу в цепочке. В этом красота разработки с использованием jQuery и это одна из причин, почему jQuery так популярен. Чтобы цепочки вызовов работали с вашим плагином, вы должны убедиться, что он возвращает this .

(function($){ $.fn.lockDimensions = function(type) { return this.each(function() { var $this = $(this); if (!type || type == "width") { $this.width($this.width()); } if (!type || type == "height") { $this.height($this.height()); } }); }; })(jQuery); $("div").lockDimensions("width").css("color", "red");

Благодаря тому, что плагин возвращает this , работают цепочки вызовов и jQuery-коллекция может быть передана следующему методу jQuery, например методу .css . Так что, если ваш плагин не должен возвращать какое-то значение, вам всегда следует возвращать this . Кроме того, как вы уже могли заметить, передаваемые в вызове плагина аргументы попадают в текущий scope функции-плагина. Так в предыдущем примере строка "width" становится аргументом type внутри функции-плагина.

Опции и значения по умолчанию

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

(function($){ $.fn.tooltip = function(options) { var settings = { "location" : "top", "background-color" : "blue" }; return this.each(function() { // Если опции существуют, давайте объединим из с нашими значениями по умолчанию if (options) { $.extend(settings, options); } // Здесь идёт код плагина tooltip }); }; })(jQuery); $("div").tooltip({ "location" : "left" });

В этом примере, после вызова плагина tooltip с заданными параметрами, значение для параметра location переписывается и становится равным "left" , а значение background-color остаётся как и было "blue" . Итоговый объект с параметрами будет выглядеть так:

{ "location" : "left", "background-color" : "blue" }

Значения по умолчанию - это отличный способ предоставить максимальную гибкость настройки плагина без необходимости указывать все параметры сразу.

Пространства имён

Важная часть разработки плагинов - пространства имён. Правильное применение пространств имён почти наверняка гарантирует, что ваш плагин не будут переопределён другим плагином или кодом, расположенным на той же странице. Так же, с помощью пространств имён разработчику плагинов легче следить за своими методами, событиями и данными.

Методы

Ни при каких обстоятельствах плагин не должен использовать больше одного пространства имён в объекте jQuery.fn .

(function($){ $.fn.tooltip = function(options) { // ТАК }; $.fn.tooltipShow = function() { // ДЕЛАТЬ }; $.fn.tooltipHide = function() { // НЕЛЬЗЯ }; $.fn.tooltipUpdate = function(content) { // !!! }; })(jQuery);

Такой подход создаёт беспорядок в пространствах имён $.fn . Чтобы этого избежать, соберите все методы вашего плагина в один объект и вызывайте их путем передачи плагину названия нужного метода в качестве параметра.

(function($){ var methods = { init: function(options) { // ТАК }, show: function() { // ДЕЛАТЬ }, hide: function() { // ПРАВИЛЬНО }, update: function(content) { // !!! } }; $.fn.tooltip = function(method) { // Логика вызова метода if (methods) { return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === "object" || ! method) { return methods.init.apply(this, arguments); } else { $.error("Метод " + method + " не существует в jQuery.tooltip"); } }; })(jQuery); $("div").tooltip(); // вызов метода init $("div").tooltip({ // вызов метода init foo: "bar" }); $("div").tooltip("hide"); // вызов метода hide $("div").tooltip("update", "Это новый контент тултипа!"); // вызов метода update

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

События

У метода bind есть возможность, о которой мало кто знает, - использование пространств имён для привязки обработчиков событий. Если ваш плагин обрабатывает события, то было бы неплохо для обработчиков указать своё пространство имён. Тогда, если понадобится отвязать эти обработчики от событий, то вы сможете легко это сделать не затрагивая другие обработчики тех же событий. Чтобы назначить пространство имён нужно дописать.namespace к типу привязываемого события.

(function($){ var methods = { init: function(options) { return this.each(function(){ $(window).bind("resize.tooltip", methods.reposition); }); }, destroy: function() { return this.each(function(){ $(window).unbind(".tooltip"); }) }, reposition: function() { // ... }, show: function() { // ... }, hide: function() { // ... }, update: function(content) { // ... } }; $.fn.tooltip = function(method) { if (methods) { return methods.apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === "object" || ! method) { return methods.init.apply(this, arguments); } else { $.error("Метод " + method + " не существует в jQuery.tooltip"); } }; })(jQuery); $("#fun").tooltip(); // А потом... $("#fun").tooltip("destroy");

В этом примере, при инициализации плагина tooltip, происходит привязка обработчика reposition к событию resize объекта window с использованием пространства имён tooltip. Если потом понадобится отключить плагин, то отвязать привязанные им события можно будет передав методу unbind название пространства имён, в нашем случае - "tooltip". Таким образом можно отвязывать обработчики событий, привязанные плагином, не опасаясь случайно отвязать чужие.

Данные

Зачастую, при разработке плагинов, требуется сохранять состояния или проверять, был ли ваш плагин инициализирован на конкретном DOM-элементе. Удобный способ следить за переменными на уровне отдельных элементов - использование метода jQuery data . Но, вместо того, чтобы следить за кучей отдельных data -вызовов с разными именами, лучше сохранить все ваши переменные в один объект, используя его как пространство имён, и делать data -вызов к нему.

(function($){ var methods = { init: function(options) { return this.each(function(){ var $this = $(this), data = $this.data("tooltip"), tooltip = $("