Jquery плагин. Реализация страницы «Предложить по проекту». Плагин Plasm The Wall

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

Картинки в статье ведут на демонстрационные примеры и страницы плагинов.

jQuery Scroll Path

jQuery Scroll Path – это плагин для определения пользовательских маршрутов прокрутки. Для начертания линий и дуг он применяет вариацию синтаксиса канвы.

freetile.js

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

gridster.js

Вот она – появилась мифическая многоколонная сетка типа «перетащи и брось» (drag-and-drop). Gridster – это плагин jQuery, позволяющий строить интуитивные разметки с возможностью перетаскивания из элементов, прокручивающихся во множестве колонок.

Fancy Input

Эффекты ввода текста CSS3 для полей ввода.

Superscrollorama

Плагин jQuery для суперклассной анимации прокрутки.

jQuery File Upload

Виджет выгрузки с множественным выбором файлов, поддержкой drag&drop, полосами прогресса и изображениями-превью для jQuery. Поддерживает кроссдоменные, отрывочные и возобновляемые выгрузки файлов и изменение размеров изображения на стороне клиента.

jQuery Validation Engine

jQuery validation engine – это плагин Javascript для валидации полей формы в браузере (IE 6-8, Chrome, Firefox, Safari, Opera 10). Плагин обеспечивает визуально привлекательные подсказки, привлекающие внимание пользователя к предмету обсуждения.

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

kerning.js

Контролируйте свою типографскую веб-разметку.

equalize.js

Плагин jQuery для выравнивания высоты или ширины элементов.

MeanMenu

Бесплатный плагин jQuery Responsive Menu для скрытия или показа дочерних элементов меню, элемента целевой навигации для обмена с MeanMenu, контрольной ширины экрана, при которой активируется MeanMenu, и многого другого.

Toolbar.Js

Toolbar позволяет быстро создавать панели инструментов в стиле строк-подсказок для использования в веб-приложениях и веб-сайтах. Строка-подсказка легко модифицируется с помощью иконок twitter bootstrap и обеспечивает гибкость отображения панелей инструментов и множества иконок.

Smart Menus

Меню вебсайта, которые работают во всех устройствах.

NProgress

Микроскопическая полоса прогресса. Отражает реалистичную анимацию, убеждающую ваших пользователей в том, что что-то происходит!

FlowType

Веб-разметка в своем лучшем виде: размер шрифта и высота строки на основе ширины элемента.

Device.js

Device.js облегчает написание условного CSS и/или JavaScript’а на базе операционной системы устройства (iOS, Android, Blackberry, Windows), ориентации (книжная vs. альбомная) и типа (планшет vs. мобильный телефон).

С момента появления 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 плагины являются одними из самых необходимых компонентов при построении сайта, да и вообще любого веб-приложения. Именно они позволяют вам расширить свой функционал. В этой статье перечислены самые полезные плагины за 2012 год. Для более удобного поиска все плагины разделены на следующие категории: Web Page Layout — плагины, плагины для навигации, Form Plugins, плагины для создания слайдеров, плагины для диаграмм и графиков, эффекты для изображений и другие. Также среди этих плагинов есть плагины, которые помогут вам в создании ваших адаптивных приложений.

Page Layout плагины

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

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

Gridster.JS jquery плагин для построения drag and drop — сетки. Также с помощью него можно динамично удалять и добавлять элементы из сетки.

Zoomooz.js - это простой в использовании jQuery-плагин для увеличения любого элемента веб-страницы. Вы можете легко добавить zoom-эффект, просто добавив класс «zoomTarget» к любому HTML-элементу. Увеличение можно сбросить, кликнув на страницу. Плагин был протестирован в Internet Explorer 9, Safari 3 +, Firefox 3.6 +, Opera и Chrome.

Wookmark — плагин для создания динамичного многоколоночного шаблона.

jQuery HiddenPosition — плагин, который позволяет добавлять любой элемент, даже если он является скрытым.

Stellar.js — JQuery-плагин, который обеспечивает эффект параллакса для элементов.

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

Плагин для адаптивной типографики. Он позволяет вам использовать селектор, генерирующий идеальный размер шрифта.

Позволяет построить анимированные перемещения по сайту, включая все возможные трансформации

Плагины для навигации

HorizontalNav - это jQuery плагин, который растягивает горизонтальное меню, чтобы она соответствовала всей ширине контейнера. Если Вы когда-либо пытались создать эффект правильной натяжки меню навигации на CSS контейнер у проекта, то Вы однозначно знаете насколько это тяжело сделать для кросс-браузерной совместимости. Данный плагин делает это с легкостью.

stickyMojo – это легкий, быстрый и гибкий плагин «липучей» боковой панели на jQuery. Он работает с Firefox, Chrome, Safari и IE8 + (неплохо поддерживает старые версии IE).

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

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

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

Формирующие плагины

Плагин позволяет определять уровень сложности пароля.

JQuery-плагин для визуализации процесса загрузки файлов. Он поддерживает drag&drop и создает моментальные превью для фотографий.

Плагин, который определяет и проверяет номера кредитных карт. Он позволяет вам определить тип кредитной карты.

Плагин для фильтрации данных. Вы можете фильтровать данные по тегу и по нескольких тегам и категориям.

Плагин, который проверяет ввод электронной почты на правильность по заранее подготовленному списку (сюда можно включить самые популярные почтовые сервисы mail.ru, yandrex.ru, gmail и т.п.).

Плагины для создания слайдеров и каруселей

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

iosSlider

iosSlider — плагин для адаптивного кроссбраузерного слайдера.

RSlider — полноэкраннный адаптивный слайдер. О н будет автоматически подстраиваться под ширину вашего экрана.

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

BookBlock — jQuery-плагин, который можно использовать для создания компонентов в виде буклетов, которые позволят вам создавать навигацию наподобие «переворачивающихся страниц». Здесь можно задействовать любой контент, будь то изображения или текст. Плагин трансформирует структуру только при необходимости (другими словами, только при переворачивании страницы) и использует наложения и тени для придания реалистичности.

Adapter — легкий слайдер контента, который предоставляет простой интерфейс разработчикам для создания красивой 2D или 3D анимации перелистывания слайдов. В настоящее время имеется поддержка 3D свойств в браузерах webkit и Firefox. Все 2D переходы были протестированы в IE6 + и других современных браузерах.

Непрерывная карусель с несколькими полезными возможностями. Она легко настраивается и поддерживает даже старые браузеры.

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

Sequence – это jQuery-плагин для прокрутки контента оригинальным образом и предоставляет вам полноценный контроль. Можно использовать любой тип контента; он будет прокручиваться бесконечно. Здесь используется семантическая разметка, а также поддерживаются адаптивные шаблоны и устройства, основанные на технологии touch.

Glisse.js — простая, адаптивная и легко настраиваемая JQuery-фото-галерея.

Плагины для диаграмм и графиков

Morris.js представляет собой облегченную библиотеку, которая использует JQuery и Raphaël, чтобы облегчить рисование графиков временных рядов.

JQuery Org Chart представляет собой плагин, который позволяет создавать древовидные структуры с вложенными элементами. Данные вводятся во вложенный неупорядоченный список, что делает плагин невероятно простым в использовании.

Плагины для типографики

Bacon.js является JQuery плагином, который позволяет обернуть текст вокруг кривой Безье или линии.

Textualizer - jQuery плагин для создания красивых эффектов над текстом. Поддерживается работа в: Chrome, Safari 4+, Firefox 3.5+, IE 6,7,8,9+, Opera 10.6+, Mobile Safari (iOS 4)

SlabText — очень полезный JQuery-плагин, который построчно разбивает заголовки перед изменением размеров каждой строки, чтобы заполнить доступное пространство по горизонтали.

trunk8 — это плагин усечения текста в JQuery. Позволяет сократить большой блок текста на меньшую часть для предварительного осмотра.

Плагины для создание различных эффектов для изображений

Это плагин для jQuery, который использует фильтры на CSS3 для создания tilt-эффекта.

Плагин для реализации эффекта адаптивных изображений.

jQuery-плагин, который позволяет легко создавать карты-изображения. С помощью этого инструмента, любая карта-изображение может быть подсвечена или выбрана, а также картой можно управлять различными способами. Он работает на всех основных браузерах, в том числе Internet Explorer 6, он не использует Flash, и не требует ничего кроме jQuery. Некоторые продвинутые эффекты требуют поддержки HTML5, но он все равно будет работать в старых браузерах.

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

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

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

JQuery.fn.myPlugin = function() { // здесь помещаете код Вашего плагина };

Но постойте! Где же мой знак доллара, который я знаю и люблю?- спросите Вы. Он по прежнему доступен, однако надо убедиться, что Ваш плагин не будет конфликтовать с другими библиотеками, которые также могут использовать знак доллара(Mootools, Prototype). Для этого код Вашего плагина нужно поместить в само вызывающееся замыкание.

(function($){ $.fn.myPlugin = function() { // здесь код Вашего плагина }; })(jQuery);

Так-то лучше. После этого, другие библиотеки сколько угодно могут изменять знак $, на Вас это не отразится. Внутри замыкания, $ будет равен jQuery.

Контекст

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

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

Hello World!!!

Теперь, когда мы понимаем контекст 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"а

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

Поддержка цепочек вызовов

В предыдущем примере плагин возвращает целое значение, высоту самого высокого 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 в непосредственном теле функции плагина. Кроме того, параметры которые вы подаете при вызове плагина, подаются как аргументы функции плагина. В примере выше таким аргументом является type, а при вызове в него подается значение "width". Кстати, плагин Выше закрепляет высоту или ширину каждого блока на странице, в соответствии с его текущими размерами.

Умолчания и опции

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

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

В этом примере, после вызова плагина tooltip с соответствующими опциями, в настройках по умолчанию затирается поле location на значение "left". В итоге Так настройки примут вид:

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

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

$("div.tools").tooltip(); // все настройки останутся по умолчанию

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

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

Методы плагина

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

(function($){ $.fn.tooltip = function(options) { // ЭТО }; $.fn.tooltipShow = function() { // ОЧЕНЬ }; $.fn.tooltipHide = function() { // ПЛОХО }; $.fn.tooltipUpdate = function(content) { // !!! }; })(jQuery);

Такой код загромождает объект $.fn . Это рекомендуется, поскольку может помех до $. 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 является то, что он позволяет для одного пространства имен установить события. Если ваш плагин порождает некие события, хорошей практикой будет, чтобы событие привязывалось к Вашему пространству имен. Таким образом, если Вам нужно отключить позже, Вы можете сделать это без вмешательства в другие события, которые, возможно, были привязаны к одному типу событий. Вы можете использовать уникальные имена Ваших событий, путем добавления ".<название плагина>".

(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 инициализируется методом init, он связывает метод reposition с событием resize окна в пространстве имен "tooltip". Позже, если разработчик должен уничтожить tooltip, мы можем отключить события, связанные c плагином, передав его имя, в данном случае "tooltip", в метод unbind. Это позволяет безопасно отключить события плагина, без случайной отмены привязки событий, которые были связаны с событиями за пределами плагина.

Данные

Часто при разработке плагинов, Вам может понадобиться проверить состояние плагина или проверить, инициализирован ли уже Ваш плагин на данный элемент. Использование метода jQuery.data является отличным способом для отслеживания и хранения переменных для каждого элемента. Однако вместо того, чтобы обслуживать кучу отдельных вызовов data с разными именами, лучше использовать один объект содержащий все переменные, и доступ к этому объекту будет через одно имя.

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