Основи на jQuery плъгините - Част 2

javascript | jqslider | jquery | плъгин | програмиране | урок
Тази публикация е част от серията "Основи на jQuery плъгините":
  1. Основи на jQuery плъгините - Част 3
  2. Основи на jQuery плъгините - Част 2
  3. Основи на jQuery плъгините - Част 1

Основи на jQuery плъгините - Част 2

Продължаваме с втора част на урока, за това как се прави плъгин за jQuery. В тази публикация ще научим как да създадем слайдер. Кода на този слайдер може да намерите в GitHub, а демото е на тази страница.

Като начало, нека създадем HTML страницата си. Създаваме файл с име index.html със следното съдържание:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slider demo</title>
</head>
<body>

<ul class="images">
<li><img src="http://farm7.staticflickr.com/6055/6365090557_8c2716d694_z.jpg" alt=""></li>
<li><img src="http://farm7.staticflickr.com/6140/5952295472_df64372ee4_z.jpg" alt=""></li>
<li><img src="http://farm6.staticflickr.com/5292/5416255207_58d6bbb1d1_z.jpg" alt=""></li>
<li><img src="http://farm9.staticflickr.com/8256/8680497192_5d625f2bcd_z.jpg" alt=""></li>
<li><img src="http://farm9.staticflickr.com/8261/8680497492_ddd15e72b2_z.jpg" alt=""></li>
</ul>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="slider.js"></script>
</body>
</html>

Съдържанието е ясно - списък с изображения. Отдолу включваме jQuery и файла, който създадохме в предния урок. Ще направя вметка, че включвам JavaScript файловете в края на тялото, понеже по този начин се ускорява зареждането на документа.

Продължаваме с имплементацията на модула.
Като начало е добре да зададем няколко опции, с които ще можем да настройваме плъгина си. Променяме променливата defaults от slides.js, така че да изглежда по следния начин:

1
2
3
4
5
6
var defaults = {
activeClass: '',
linksHolderClass: 'links',
changeDelay: '10000',
changeSpeed: '200'
};

Както може да видите в демото освен самите изображения имаме и връзки, чрез които можем да сменим текущия слайд. Първата променлива указва, класа по който ще се разпознава връзката към видимия в настоящия момент слайд. Следваща променлива очевидно означава класа, който ще притежава контейнера на връзките ни. Следват променливи, указващи периода през който се сменят слайдовете и скоростта на смяна в милисекунди.

В “конструктура” на плъгина добавяме следващите два реда код преди извикването на метода init().

1
2
this.activeSlide = 1;
this.slideTimeout = null;

Първата променлива ще ни бъде полезна, всеки път когато искаме да знаем, кой е текущия активен слайд. Втората променлива държи референция към таймаута за смяна на слайд.

След тази промяна функцията Plugin() трябва да изглежда по сления начин:

1
2
3
4
5
6
7
8
9
10
function Plugin(element, options) {
this.element = element;
this.$element = $(element);
this.options = $.extend({}, defaults, options);

this.activeSlide = 1;
this.slideTimeout = null;

this.init();
}

Следва имплементацията на метода init().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Plugin.prototype.init = function() {
this.$element.css('list-style-type', 'none');
this.$element.find('li').hide();

var linksHolder = $('<ul>');
linksHolder.addClass(this.options.linksHolderClass);

var that = this;
this.$element.find('li').each(function(index, item) {
var link = $('<a>').attr({
href: 'javascript:void(0);',
'data-slide': index + 1
}).text(index + 1);

link.on('click', function() {
that.slide(index + 1);
});

var li = $('<li>').append(link).appendTo(linksHolder);
li.css('display', 'inline-block');
});

linksHolder.css('list-style-type', 'none');

this.$element.wrap('<div>');
this.$element.parent().append(linksHolder);

this.slide(1);
};

На първите два реда правим две манипулации, които в общия случай е добре да се предефинират във CSS файл. Първата манипулация премахва точките преди всяко изображение, а втората скрива самите изображения.

Започваме създаването на връзките, към всеки слайд. Създаваме <ul> елемент (без да го добавяме в документа) и добавяме избрания клас (ако има такъв).

Декларираме променливата that, понеже в цикъла на следващия ред се сменя контекста, а ние ще се нуждаем от референция към плъгина.

Цикъла сам по себе си търси всички <li> елементи в контейнера, за който е инициализиран модула. В цикъла за всяко изображение създаваме елемент <a>, на който добавяме атрибут data-slide, указващ слайда, към който сочи връзката.

На ред 15 задаваме, при клик на линка да се извика все още недефинирания метод slide(slide).

В края на цикъла добавяме линка към нов <li> елемент, а самия елемент в <ul> контейнера дефиниран по-горе.

След цикъла премахваме точките от списъка с връзки към слайдове, обвиваме “главния” елемент с елемент <div> и накрая добавяме списъка с връзки. След като сме сигурни, че всичко е настроено и създадено, активираме първия слайд.

Единственото, което ни остана, около реализацията на модула е имплементирането на самия метод slide(slide).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Plugin.prototype.slide = function(slide) {
var that = this;
if(this.slideTimeout) {
clearTimeout(this.slideTimeout);
}

this.$element.find('li:nth-child(' + this.activeSlide + ')').fadeOut(this.changeSpeed, function() {
that.$element.find('li:nth-child(' + slide + ')').fadeIn(that.changeSpeed);
});

this.$element.parent().find('a.' + this.options.activeClass).removeClass(this.options.activeClass);
this.$element.parent().find('a[data-slide=' + slide + ']').addClass(this.options.activeClass);

this.activeSlide = slide;
this.slideTimeout = setTimeout(function() {
if(that.activeSlide === that.$element.find('li').length) {
slide = 0;
}

that.slide(slide + 1);
}, this.options.changeDelay);
};

Нека си представим следната хипотетична ситуация: Отваряме страницата с плъгина, появява се първия слайд, а 5 секунди по-късно трябва да се появи следващия. Ние обаче кликаме на един от линковете 4 секунди и половина след появата на първия слайд. При това положени ще се появи избрания слайд, но той ще се задържи само половин секуда, вместо избраните 5. По тази причина в първия блок с код на метода изчистваме таймаута, за който говорихме в началото на тази публикация.

Следва скриване на текущо активния слайд, последвано от появяване на този подаден, като параметър на метода.

На ред 11 премахваме класа active от тригерите за слайд, а на следващия добавяме класа на тригера за новия слайд.

На края на метода задаваме таймаута наново. Collback-а е сравнително прост. Ако вече сме на последния слайд, следващия слайд се пада по-голям от броя на слайдовете, така че нулираме брояча. След това просто викаме slide(slide) за следващия слайд.

С това плъгина ни е завършен. За да го тестваме трябва да редактираме файла index.html, като добавим следващото парче код след дефиницията на скрипта slide.js.

1
2
3
$('.images').slider({
activeClass: 'active'
});

Ако сте направили всичко, коректно би трябвало да имате една доста грозна, но работеща версия на плъгина. Следващата част на урока ще бъде доста кратка. В нея ще добавим довършителните стилове.