Уроки Создание JQuery плагина
8 октября 2013
2569
создание jquery плагина, слайдер

Создание JQuery плагина

Сложность Рубрика JQuery Браузеры
Демонстрация » Скачать »

В сегодняшнем нашем уроке пойдет речь о создании jquery плагина. На нашем сайте опубликован не один урок с использованием 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);

 

На этом наш урок по созданию собственных плагинов окончен. Удачной реализации собственных идей и до свидания!





Евгений Болдырев