В сети довольно много статей про то, как писать плагины для 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 = $("
", { text: $this.attr("title") }); // Если плагин еще не был инициализирован if (! data) { /* Здесь делаем еще какие-то вещи */ $(this).data("tooltip", { target: $this, tooltip: tooltip }); } }); }, destroy: function() { return this.each(function(){ var $this = $(this), data = $this.data("tooltip"); // Используем пространства имён FTW $(window).unbind(".tooltip"); data.tooltip.remove(); $this.removeData("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);Использование data помогает вам следить за переменными и состояниями между вызовами методов плагина. Хранение всех данных в одном объекте позволяет легко к ним обращаться, и, в случае необходимости, так же легко их удалять.
Написание jQuery-плагинов позволяет наиболее эффективно использовать возможности библиотеки. А повторное использование кода экономит ваше время и делает разработку более эффективной. Вот краткие итоги поста, держите их в уме, когда будите писать свой следующий плагин:
- Всегда оборачивайте свой плагин в функцию (function($){ // здесь сам плагин })(jQuery); .
- Не оборачивайте this в непосредственном scope плагина.
- Если ваш плагин не должен возвращать важных значений, то всегда возвращайте this , чтобы работали цепочки вызовов.
- Не запрашивайте большое количество аргументов при вызове плагина, лучше передавать объект, который переопределит настройки по умолчанию.
- Не добавляйте в объект jQuery.fn более чем одно пространство имён на плагин.
- Используйте пространства имён для ваших методов, событий и данных.
- jQuery.fn читается как "джейКуэри эффин".
Несмотря на столь большое количество документации о написании jquery плагинов, нигде не возможно, найти хороших практических советов. Нет ни одного примера документа, где описано, какими качествами должен обладать хороший jquery плагин. Но вам сегодня повезло, в этой статье мы рассмотрим 12 прекрасных советов, которые помогут вам написать великолепный плагин к jquery.
В этой статье мы меньше будем фокусироваться на самом Java Script коде, больше будем уделять внимания практическим советам.
1 - Пишите плагин по правильному шаблону
Существуют некоторые шаблоны, которые в той или иной степени, соответствуют «правильному способу» написания плагинов. Если вы не будете следовать этим шаблонам, ваш плагин может работать не правильно. Вот один из наиболее известных шаблонов:
(function($, window, undefined){ $.fn.myPlugin = function(opts) { var defaults = { // установите ваши сстандартные переменные } // дополните стандартные опции пользовательскими var options = $.extend(defaults, opts || {}); return this.each(function(){ // jQuery chainability // действия плагина }); })(jQuery, window);
Для начала, мы создаем анонимную функцию, которая защитит нас от использования глобальных переменных. По умолчанию передаются три аргумента $, window, и undefined. Они потребуются ядром jQuery.
Далее мы напишем шаблон jQuery плагина, $.fn.PluginName. Таким образом, мы регистрируем плагин, чтобы можно его было использовать в формате $(selector).method(). Если вы хотите вместо написания плагина использующего функции, сделать его напрямую, пишите следующим образом:
$.PluginName = function(options){ // опции и действия плагина }
Такой тип плагина не может иметь цепочку функций, он будет состоять из одной прямой функции. Для примера:
$.splitInHalf = function(stringToSplit){ var length = stringToSplit.length; var stringArray = stringToSplit.split(stringToSplit); return stringArray; }
В этом коде, мы возвращаем массив строк. Для большей ясности, еще один пример:
$.getOddEls = function(jQcollection){ // return jQcollection.filter(function(index){ var i = index+1; return (index % 2 != 0); }); }
В этом случае, пользователь получает jQuery объект, фильтр, которые берется из jQuery коллекции. Плагины могут возвращать, как массивы, так и строки, цифры, функции, и другие типы данных.
2 - Документируйте свой код (корректно)
Наиболее важная вещь которую вы можете сделать, когда публикуете свой код - документирование. Это значит, что вам нужно объяснить разработчикам, что ваш код делает или может делать. Никому из пользователей не хочется догадываться, на что способен ваш код.
Документация, это практика, которая не потребует особых правил для ее реализации. Хотя, и так понятно, что чем удобнее и подробнее расписана, тем лучше.
Нужно документировать как внутри кода (комментированием), так и снаружи - отдельным документом, расписать каждый класс, метод, опцию, их случаи использования и так далее.
3 - Сделайте ваш плагин гибким в настройках
Наиболее популярные плагины предрасполагают возможность доступа к переменным, чтобы пользователи могли контролировать некую функциональность плагина. Также, хорошей вещью является возможность вносить свои настройки. Для примера, при создании плагина слайдера, уместными настройками будут - скорость перелистывания, тип слайд шоу, и расширение блока слайдера.
Также хорошей практикой, является возможность доступа к именам классов и ID, с помощью которых мы выбираем DOM элемент. Наряду с этим, они также должны иметь возможность иметь доступ к callback функции, во время каждого ее вызова. Или, когда слайдер делает цикл и возвращается на первый элемент (картинку).
«Это ваша задача, думать об удобстве использования и потребностях пользователей»
Давайте рассмотрим еще один пример: плагин делает запрос к API, он должен иметь возможность доступа к возвращенному объекту. Вот пример этой концепции:
$.fn.getFlickr = function(opts) { return this.each(function(){ // jQuery chainability var defaults = { // опции по умолчанию cb: function(data){}, flickrUrl: // стандартные значения для вызова API } // расширяем опции пользовательскими var options = $.extend(defaults, opts || {}); // вызываем асинхронные функции потом callback // передаем в API объект, который возвратился $.ajax(flickrUrl, function(dataReturned){ options.cb.call(this, dataReturned); }); }); }
Такой код, позволяет нам иметь доступ к данным с помощью следующей строки:
$(selector).getFlickr(function(fdata){ // flickr данные в fdata объекте });
Иной способ доступа к данным, использование хуков (крючков), как опций. В jQuery версии 1.7.1 и выше, мы можем использовать.on(eventName, function(){}) после вызова нашего плагина, чтобы использовать поведение плагина в собственных функциях пользователей. Для примера, плагин ниже, хороший пример, как это реализовать:
$.fn.getFlickr = function(opts) { return this.each(function(i,el){ var $this = el; var defaults = { flickrUrl: "http://someurl.com" } var options = $.extend(defaults, opts || {}); $.ajax(flickrUrl, function(dataReturned){ $this.trigger("callback", dataReturned); }).error(function(){ $this.trigger("error", dataReturned); }); }); }
Это дает нам возможность вызывать getFlickr плагин, плюс к этому, прицеплять некоторые «пожелания».
$(selector).getFlickr(opts).on("callback", function(data){ // действие }).on("error", function(){ // обработка ошибки });
Вы даже не подозреваете, насколько важно снабжать свой jQuery плагин гибкостью и возможностью настройки. Чем более сложный ваш плагин - тем более настроек должен содержать.
4 - Не используйте слишком много конфигураций
Не смотря, на предыдущие слова, большой ошибкой является использования слишком большого числа настроек. Для примера, очень удобно при разработке UI использовать плагины, которые имеют все аргументы по умолчанию.
$(selector).myPlugin();
В целом, иногда это не реально, так как пользователя хотят иметь возможность настроить функциональность. В этом случае, вы должны предоставить возможность как «по умолчанию», так и возможность настроить плагин. Но, старайтесь использовать только необходимые параметры, как показано в этом примере получения твитов (плагин использует только один параметр «имя пользователя»).
$(selector).fetchTweets("jcutrell");
Такие плагины очень популярны среди разработчиков… он получает твиты, и обвертывает их в тег параграфа, при этом нужно ввести только имя пользователя.
5 - Выносите CSS указания в отдельный файл
Естественно, это касается только определенных плагинов… но, старайтесь все CSS указания выносить в отдельный файл. Так будет проще при создании UI.
Большинство плагинов содержат в комплекте картинки и CSS стили. Но не забывайте второй совет - документируйте CSS стили с картинками также. Разработчики, вряд ли желают просматривать код, чтобы найти то, что им нужно поменять.
Наиболее удобно использовать стилизацию основанную на class/ID доступе. Но классы и ID должны также быть доступными и описанными в документации, чтобы пользователю не приходилось определять, что там происходит.
6 - Предоставьте примеры использования вашего плагина
Если вы не можете предоставить примеры возможностей своего плагина, лучше и не начинайте писать его. Пользователи долго не будут смотреть на него, просто уйдут искать другой.
Это не сложно, ведь вы разработчик плагина. Не будьте ленивы. Вот хорошие идеи для примеров:
- «Hello World» пример - всегда удобно использовать в плагинах, которые работают с HTML и CSS.
- Расширенные примеры - предоставляют возможность увидеть все грани функциональности плагина. Примеры должны отображать максимальное количество опций и возможностей.
- Примеры интеграций - если ваш плагин имеет возможность использовать другие плагины. Обязательно покажите, как интегрировать другой плагин в код вашего.
7 - Пишите плагин, сопоставим с большинством версий jQuery
jQuery, как и любая хорошая библиотека, растет и развивается. Некоторые старые методы больше не доступны, некоторые новые вводятся. Хорошим примером этому является.on() метод, который решением «все в одном» для делегации событий. Если вы пишите плагин используя этот метод, люди, которые используют версию jQuery 1.6 будут обделены. Я не имею в виду, что ваш код должен содержать устаревшие методы, но в документации обязательно укажите используемую версию jQuery.
8 - Ведите Changelog
Наряду с обновлением кода плагина под новую версию jQuery, также необходимо контролировать и документировать все обновления. Наилучше делать это с помощью всем известного сервиса GitHub. Это публичный репозиторий, на котором можно хранить все версии плагина, changelog и другое.
9 - Пишите востребованный плагин
Давайте будем честными, некоторые плагины неудобные, есть такие, которые вообще нельзя назвать плагинами. Поэтому давайте писать востребованные плагины! Помните, миру не нужен еще один плагин слайдера, их и так предостаточно.
Если вы все таки решили написать плагин для социальной сферы разработчиков, найдите причину, по которой стоит его писать. Как мы любим выражаться: «Зачем изобретать колесо вновь»? Само собой, иногда новые и лучшие способы тех же вещей приветствуются. Но для этого должны быть вязкие практические причины.
10 - Предоставьте сжатую версию кода
Такой маленький, но очень разумный совет! Сжатая версия делает ваш плагин более востребованным. Разработчикам также важно знать, сколько будет «весить» ваш продукт.
Когда сжимаете код, не забывайте предоставлять не сжатую версию.
11 - Ваш код слишком заумный
Когда вы пишите плагин для jQuery, предполагается, что он будет использоваться другими… не так ли? По этой причине, код вашего плагина должен быть как можно лучше читаем. Если вы лепите все в одну строку или не семантично называете переменные, это создает трудности при чтении кода. Хорошо отформатированный код, это неплохое дополнение к документации. А насчет длинных названий переменных не волнуйтесь, ведь можно просто сжать код.
Если называете переменные «a» или «x» - это неправильно!
Также, старайтесь уменьшить число строк в каждой из функции. Так проще для понимания и более логично.
12 - Тестируйте
Надеюсь, вы всегда тестируете свой код, правда? Если нет, как вы можете публиковать его, если не уверены в работоспособности. Ручное тестирование всегда важно, но если вы обновляете страницу в браузере чтобы тестировать работоспособность плагина - это не правильно. Советую пользоваться такими инструментами, как - Qunit, Jasmine, Mocha.
Заканчивая мысли
Если вы собрались писать jQuery плагин, держите на виду эти советы. Может быть, я что-то пропустил. Если знаете, какими еще положительными качествами должен обладать хороший плагин, дайте знать в комментариях. Творческих вам успехов!
Плагинов для интеграции в ваших проектах. В заметке представлены множество галерей, слайдеров, меню и других плагинов.
1. Простой jQuery слайдер «Twirlie»
Компактный аккуратный слайдер.
2. jQuery портфолио с zoom-эффектом
Интересная реализация портфолио, созданная путем взаимосвязи двух jQuery плагинов: Cloud Zoom и Fancybox. При наведении курсора мыши на миниатюру появляется увеличенная копия области, находящейся под курсором. При нажатии на миниатюру открывается Fancybox галерея, с помощью которой можно просмотреть несколько полноразмерных изображений для данного проекта в портфолио.
3. Путеводитель по сайту с использованием jQuery
С помощью этого интересного плагина можно познакомить посетителя с основными функциями вашего сайта, если он попал на него впервые. При загрузке страницы в верхнем правом углу выезжает блок с предложением провести экскурсию по сайту. Если посетитель впервые зашел на ваш сайт, он может с помощью небольшого путеводителя познакомиться с основными функциями. При этом страница затемняется и необходимые блоки на каждом шаге помечаются пометкой. Если же посетитель уже был ранее на вашем сайте, он просто может закрыть окно с предложением экскурсии по сайту.
4. Мини-галерея на jQuery
Изображение увеличивается при наведении на него курсора мыши.
5. Симпатичный jQuery слайдер «Presentation Cycle»
jQuery слайдер с индикатором загрузки изображений. Предусмотрена автоматическая смена слайдов.
6. Изумительный jQuery слайдер с объемным фоновым эффектом «Parallax Slider»
Слайдер изображений на jQuery. Изюминка этого слайдера в движение фона, который состоит из нескольких слоев, каждый из которых прокручивается с различной скоростью. В итоге получается имитация объемного эффекта. Выглядит очень красиво, вы можете сами в этом убедиться. Более плавно эффект отображается в таких браузерах как: Opera, Google Chrome, IE.
7. Смена цвета фона и текста с помощью jQuery
Цвет изменяется при наведении курсора мыши. Можно сделать так, чтобы цвет изменялся случайным образом.
8. Элегантная Lightbox галерея «ppGallery»
9. jQuery слайд-шоу
Масштабируемое слайд-шоу с использованием jQuery. Вы сможете задать размеры для слайд-шоу, которые вам больше всего подходят.
10. Корзина заказов с использованием jQuery и PHP
Оригинальное решение для реализации корзины в интернет-магазине.
11. Мини-галерея jQuery «Touch-Gallery»
12. Выезжающее jQuery меню с изображениями
Для того чтобы появилось меню, необходимо нажать на стрелку в правом верхнем углу экрана. Спрятать меню на странице можно с помощью нажатия этой же стрелки.
13. jQuery плагин «MobilyBlocks» для отображения кругового меню
14. jQuery плагин «MobilyNotes»
jQuery плагин для необычного отображения изображений или другого содержимого.
15. jQuery слайдер
Навигация между изображениями может осуществляться с помощью кнопок «Вперед» «Назад» и при помощи ссылок на номер изображения, при этом смена изображений происходит с различными анимированными эффектами. Стилевое оформление ссылок можно прописать в файле.
16. jQuery слайдер изображений, плагин «slideJS»
Стильный jQuery слайдер, безусловно сможет украсить ваш проект.
17. jQuery слайдер контента, плагин «slideJS»
jQuery слайдер контента: один из вариантов использования плагина «slideJS».
С момента появления jQuery прошло почти 10 лет и на сегодняшний день это самая популярная JavaScript-библиотека. Десять лет назад доступ в интернет был возможен через ограниченное число браузеров, спроектированных таким образом, чтобы свести к минимуму возможность манипулирования HTML DOM (Document Object Model). JQuery оказался палочкой-выручалочкой для многих разработчиков, стремившихся к одинаковому отображению содержимого сайтов во всех существующих браузерах. Развивавшие jQuery энтузиасты стремились объединить возможности браузеров и таким образом создать общий для всех интерфейс, который будет работать независимо от типа и версии браузера. Основная заслуга разработчиков состоит в том, что они создали новые интерфейсы API, которые были лучше «родных» браузерных и реализовали функции, которые не поддерживались программным интерфейсом браузера. Однако некоторые разработчики не склоны переоценивать роль jQuery в решении проблем кроссбраузерности и настаивают на том, что библиотека стала столь популярной благодаря реализации querySelectors. Как обычно, истина где-то посередине.
На сегодняшний день браузерная экосистема является не такой сложной, как это было 10 лет назад. Несмотря на то, что некоторые браузеры не могут реализовать все, что предлагает HTML5 API, все же у разработчиков в наше время гораздо меньше проблем с кроссбраузерностью и реализацией различных функций. Если сегодня что-то отлично работает в Chrome, то, вероятно, это также будет работать в Firefox или Edge. Основные элементы JavaScript наряду с querySelectors хорошо задокументированы и поддерживаются всеми производителями браузеров. Поэтому на первый взгляд может показаться, что те проблемы, которые решает jQuery, более таковыми не являются. Чистый JavaScript всегда будет быстрее, чем решение с использованием библиотеки, так что возникает вопрос: а нужно ли сегодня использовать технологию, которая в какой-то мере уже устарела? Цикл CPU является товаром, а время нет. Будет ли экономия 30 кБ оправданной, если придется писать код, тестировать его, если уже есть готовое решение?
Все это вопрос выбора. Кто-то стремится к совершенному коду, кто-то использует фрагменты кода, созданные другими разработчиками. Библиотека jQuery насчитывает тысячи отлично работающих и хорошо задокументированных плагинов, которые повышают производительность и позволяют реализовывать самые смелые идеи. Многие из этих плагинов к тому же совершенно бесплатны. Предлагаем вашему вниманию 10 лучших jQuery-плагинов, которые активно поддерживаются и регулярно обновляются их создателями.
Firewall это очень интересный кроссбраузерный jQuery-плагин, предназначенный для работы с макетами на основе модульной сетки. Он позволяет создавать впечатляющие анимационные эффекты с использованием возможностей SCC3 и хорошо работает с call back events. Если нужно создавать гибкие макеты с множеством изображений типа Pinterest, то Firewall является наилучшим решением для создания динамических сеток. Freewall работает практически во всех современных браузерах и даже в древнем IE8, что делает этот плагин действительно универсальным инструментом.
Плагин multiscroll.js позволяет добавить на сайт разнонаправленную прокрутку основных элементов дизайна. Это облегчает создание мультипрокрутки для сайтов с двумя колонками или панелями. Основное назначение плагина заключается в привлечении внимания пользователя к главному контенту без ущерба для UX. Плагин отлично работает как на современных, так и на устаревших браузерах и, конечно, в мобильной среде.
RowGrid.js – это простенький плагин, которые позволяет расположить изображения на сайте ровными рядами, точно так же, как это сделано в поиске по изображениям Google. Это модно, красиво и не слишком навязчиво. RowGrid.js расставляет изображения в рядах, ориентируясь на размер родительского элемента: он подбирает картинки таким образом, чтобы они гармонично смотрелись в пределах установленных границ, при этом некоторые элементы подвергаются масштабированию. Однако при работе с этим плагином нужно помнить, что все изображения должны быть одинаковыми по высоте, иначе плагин не будет работать и красивой произвольной сетки не получится.
JQuery-плагин Slidebars, как понятно из названия, помогает добавить на сайт выезжающие элементы, такие как боковые панели или скрытые меню. Вторая версия плагина была полностью переписана с учетом всех прежних недоработок и позволяет использовать неограниченное число элементов, расположенных вне основного экрана.
Плагин pagePilings.js позволяет реализовать очень интересные эффекты прокрутки, которые особенно впечатляюще смотрятся на одностраничниках. Пользователь просматривает контент, которые перемещается вверх и вниз, а скрипт срезает верхние слои содержимого, тем самым реализуя слайдер. Использование плагина поможет создать незабываемый опыт пользователя. Направление и скорость прокрутки можно легко настроить – в этом плане плагин обладает очень большими возможностями. PagePilings.js полностью отзывчивый, он отлично работает на любом экране и хорошо отображается в большинстве современных браузеров.
Основное назначение jQuery-плагина - создание плавных переходов между страницами, что позволяет улучшить опыт пользователя. Этот небольшой плагин позволяет создавать плавные и красивые CSS-анимации, которые сопровождают смену страниц. Плагин имеет свыше 60 различных эффектов, включая такие распространенные, как затухание, проявление, поворот плоскости кадра, флип, зум и многое другое.
Такой эффект, как увеличение масштаба изображения при наведении курсора мыши, некоторых раздражает, но иногда он бывает очень нужен. Так что если в проекте нужно использовать подобную анимацию, то стоит обратить внимание на jQuery-плагин ZooMovie. Плагин не только масштабирует картинку, но и позволяет рассматривать детали изображения, передвигая курсор. Все работает очень просто и предсказуемо.
Rippleria является созданным на основе концепции Material Design плагином, который создает эффект волны при клики мышки по элементу. Эффект может применяться к различным объектам, например, к кнопкам, иконкам или изображениям. Плагин легко настраивается и хорошо работает во всех современных браузерах.
Плагин Flickity отличается очень подробной документацией. Весь функционал понятно описан и логически структурирован. Это один из самых «отшлифованных» jQuery-плагинов для реализации эффекта карусели. При помощи Flickity создание отзывчивых слайдеров превращается в легкую работу, так как в плагине есть все инструменты для реализации любой идеи. Плагин условно бесплатный, для использования в коммерческих проектах придется приобрести платную версию.
Если нужно быстро и без особых затей установить слайдер на свой сайт, то можно использовать jQuery-плагин Unslyder. Плагин небольшой, но достаточно гибкий, позволяющий разработчику менять сценарии с помощью разных параметров и опций, методов и событий обратного вызова.
В сегодняшнем нашем уроке пойдет речь о создании jquery плагина . На нашем сайте опубликован не один урок с использованием jquery. Чаще всего эти уроки базируются на простом написании кода для выполнения конкретной задачи, но формирование из такого кода плагинов предоставляет возможность использовать код повторно, так как в виде плагина этот код обретает большую гибкость благодаря использованию опций (настроек).
Для примера мы возьмем урок . Слайдер хороший пример, так как это достаточно востребованная вещь и при гибкости настроек может выполнять более-менее разные задачи (слайд шоу, карусель изображений и т.п.).
Все требования к верстке описаны в вышеуказанном уроке, поэтому на них останавливаться не будем. Назовем наш будущий плагин «mySimpleSlider».
Плагин представляет собой новый метод в объекте jquery, следственно, для создания плагина, необходимо добавить функцию с его реализацией в объект jQuery.fn, как это показано ниже.
(function($){ jQuery.fn.mySimpleSlider = function(options){ // Здесь будет реализация метода }; })(jQuery);
Теперь приступим к выделению свойств плагина, которые должны изменяться в зависимости от каждого конкретного случая использования. Для слайдера я выделил свойства перечисленные ниже. В плагине свойства должны быть записаны в следующем виде:
Options = $.extend({ nextBtn:null, // Селектор кнопки "следующий" prevBtn:null, // Селектор кнопки "предыдущий" playBtn:null, // Селектор кнопки play/pause selectors:null, // Селектор "переключателей" slideWidth:100, // Шаг прокрутки (px) delay:null, // Интервал между авто пролистыванием duration:500 // Скорость переключения слайдов }, options);
После этого внутри плагина мы можем обратиться к свойствам, используя запись вида options.имя_свойства . Теперь можем приступить к написанию функций необходимых для работы плагина, но прежде зададим глобальные, по отношению к плагину, переменные:
Var slider = this; // Объект, к которому применен плагин var intervalID; // Указатель таймера
И так, приступим к написанию функций. Как видно из урока, который мы взяли за пример, у слайдера есть управляющие элементы, которые не должны реагировать на действия пользователей в момент выполнения анимационных эффектов во избежание конфликтов. Поэтому в плагине необходимы функции, которые будут отключать/включать вызов функций при использовании пользователем управляющих элементов. Эти функции проиллюстрированы ниже.
// Функция «включения» function start(){ // Вызов функции next при нажатии на nextBtn $(options.nextBtn).on("click", next); // Вызов функции prev при нажатии на prevBtn $(options.prevBtn).on("click", prev); Запуск таймера для авто пролистывания setTimer(); /* Перелистывание на выбранный слайд при условии существования переключателей */ if(options.selectors) { $(options.selectors).on("click", function(){ selectSlide($(this).index()) }); } } // Функция «выключения» function finish(){ // Отключение вызова функций всех событий $(options.nextBtn).unbind(); $(options.prevBtn).unbind(); $(options.selectors).unbind(); // Остановка таймера авто переключения clearInterval(intervalID); }
Код запуска таймера авто пролистывания вынесен в отдельную функцию setTimer так как так как запускать таймер или нет, зависит от нескольких параметров, задаваемых при применении плагина. Эта функция изображена ниже.
Function setTimer(){ // Если задержка не задана - не запускаем таймер if(!options.delay) return false; /* Если задана кнопка play/pause И она в состоянии "pause" - не запускаем таймер */ if(options.playBtn) if($(options.playBtn).hasClass("pause")) return false; // Запуск таймера intervalID = setInterval(next, options.delay); }
Function next(){ /* Если текущий слайд - последний, то возвращаемся к первому */ if(getIndex() == (getCount()-1)) { selectSlide(0); } // Иначе идет перелистывание на следующий слайд else { selectSlide(getIndex()+1); } } function prev(){ /* Если текущий слайд - первый, то переходим к последнему */ if(getIndex() == 0) { selectSlide(getCount()-1); } // Иначе происходит переход на предыдущий слайд else { selectSlide(getIndex()-1); } }
В приведенных выше функциях используются еще три пользовательские функции, которые описаны ниже.
// Функция переключения на слайд //с выбранным индексом function selectSlide(index){ // Отключение срабатывания событий finish(); // Переключение на слайд $(slider).children("ul").animate({left:options.slideWidth *-1*index+"px"}, options.duration, start); // Отображение выбранного слайда в «статус баре» $(options.selectors).removeClass("active"); $(options.selectors).eq(index).addClass("active"); } // Функция, которая возвращает индекс текущего слайда function getIndex(){ return ($(slider).children("ul") .position().left / options.slideWidth)*(-1); } // Функция подсчета количества слайдов function getCount(){ return $(slider).children("ul") .children("li").length; }
Завершает наш плагин функция make , которая и запускается при вызове плагина. Она будет содержать функцию включения события, а так же код запускающий работу кнопки play/pause если такая имеется. Этот код не занесен в функцию start так как используется только один раз, при запуске плагина. Кнопка имеет два состояния: play и pause , которые контролируются через классы с соответствующими названиями. Функция make имеет следующий вид:
Var make = function(){ // Если задана кнопка play/pause if(options.playBtn) { /* При нажатии на кнопку меняем ее состояние на обратное текущему и запускаем либо останавливаем таймер в зависимости от состояния кнопки */ $(options.playBtn).on("click", function(){ if($(this).hasClass("pause")) { $(this).removeClass("pause"); $(this).addClass("play"); setTimer(); } else { clearInterval(intervalID); $(this).removeClass("play"); $(this).addClass("pause"); } }); } // Включение реакции на события // управляющих элементов start(); };
По завершению работы плагин возвращает функцию make :
Return this.each(make);
На этом наш урок по созданию собственных плагинов окончен. Удачной реализации собственных идей и до свидания!
