Взгляните на первую и последнюю строки плагина

Взгляните на первую и последнюю строки плагина. Мы объявили функцию, которая принимает в качестве параметра $, и сразу же вызвали её с параметром jQuery. С помощью такого приёма мы получаем возможность использовать внутри нашего плагина функцию $ и при этом не создаём проблем другим библиотекам (например, prototype), которые также используют $. После этого мы создаем новый метод sticker (строка 2) (его название должно совпадать с названием плагина). На этом этапе плагин создан, и его можно использовать. Правда он ничего не делает.

Исправляем этот недостаток. 1) Если при вызове плагина были указаны параметры, заменяем ими значения, установленные по-умолчанию (строки 3-6). 2) Сохраняем текущий элемент в переменной element. 3) Делаем этот элемент перемещаемым (draggable) (строка 8), параметр containment: ‘parent’ указывает, что стикер нельзя перемещать за границы родительского элемента. 4) Назначаем обработчик события dragstop (строки 9-19), которое возникает после того как пользователь отпустит стикер. 5) Принцип работы обработчика очень простой. Мы рассчитываем расстояния от стикера до правого и левого края страницы. А после этого сравниваем его с заданным значением (stickingZone). Если условие выполняется, перемещаем стикер к краю страницы. Для этого используем метод animate, в параметрах которого передаем координаты левого края стикера и время, за которое он должен переместиться. 6) Возвращаем текущий элемент (строка 20). Если этого не сделать, плагин работать будет, но мы не сможем использовать цепочки вызовов. Как видите, плагин для jQuery создать совсем не сложно. Главное понимать, как получить желаемый эффект. В остальном, плагин не на много отличается от обычного метода. Если возникли вопросы или замечания, пишите в комментариях, обсудим

Понравилась статья? Получай обновления и будь всегда в курсе событий!
Подпишись на RSS или
blog comments powered by Disqus