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

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

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

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

Без да се бавим отваряме директорията на проекта и създаваме файл style.css, след което го включваме в края на <head> частта на файла index.html

1
<link rel="stylesheet" href="style.css">

Нека направо въведем целия CSS, след което направим коментар по кода.

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
body {
background: #e6e6e6;
}

ul {
-webkit-padding-start: 0;
}

.images {
width: 500px;
margin: 10px auto;
}


.images img {
background: #fff;
padding: 10px;
border: 1px solid #c0c0c0;
height: 300px;
}

.links {
width: 100px;
margin: 10px auto;
}

.links li {
margin-right: 5px;
}

.links li:last-child {
margin-right: 0;
}

.links a {
font: 0/0 a;
text-shadow: none;
color: transparent;
background: #fff;
display: inline-block;
padding: 5px;
border: 1px solid #c0c0c0;
border-radius: 10px;
}

.links .active {
background: #666;
}

Като начало задаваме леко по-сивкав фон на страницата, което ще направи изображенията ни по-ефективни. На следващия ред правим малък фикс на <ul> елементите. Оказва се, че в Хром, тези елементи се изместват малко по-вдясно, а ние искаме да центрираме слайдера, така че просто нулираме специфичния атрибут.

В следващия блок задаваме фиксирана ширина на контейнера с изображения и го центрираме хоризонтално.

На ред 15 започваме стилизирането на самите изображения. Общо взето обграждаме картинките с бяла рамка с дебелина 10 пиксела. Другото което правим, е да фиксираме височината на изображенията. По този начин при смяна на слайда, съдържанието ни няма да се измества нагоре, надолу.

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

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

На ред 27 започва най-интересния блок CSS. Ако сте направили всичко до сега, тригерите ви трябва да представляват хипервръзки с текст, някакво число. На демото обаче тези линкове са просто кръгчета. За да направим това е необходимо първо да скрием тези числа. За целта трябва да сменим няколко свойства на шрифта на връзките, а първите три реда правят именно това - нулиране размера на шрифта, премахване на сянката му и задаване на прозрачност.

До тук просто скрихме числата, следва създаване на кръговете. Задаваме радиус от 5 пиксела, тъмна рамка и радиус на рамката 10 пиксела. Освен това задаваме бял фон на окръжностите.

На края остана да зададем по-тъмен фон на тригера, който има клас, указващ, че слайда на който съответства е активен в момента.

С това приключваме уроците от серията “Основи на jQuery плъгините”. Ако сте сте направили всичко до момента вероятно вече имате един доста прост, но работещ слайдер.