В сегодняшнем нашем уроке пойдет речь о создании jquery плагина. На нашем сайте опубликован не один урок с использованием 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);
}
Далее рассмотрим функции next и prev, которые отвечают за перелистывание на слайд вперед и назад соответственно.
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);
На этом наш урок по созданию собственных плагинов окончен. Удачной реализации собственных идей и до свидания!