Cписок компонентов с помощью jQuery

14.01.2010   |  

jQuery   |  

1 Комментарий

Cписок компонентов с помощью jQuery

Попал мне случайно один плагин jQuery – Feature List (Список компонентов) автором которого является ресурс jQueryGlobe.
Плагин делает маленький слайд-шоу ваших элементов, с эффектом сглаживание, тяжело описать словами эффект который делает плагин.


Вы просто посмотрите Демо и сами все поймете.
Плагин занимает всего 2К. СКАЧАТЬ

Как работает плагин??
Сценарий скрипта требует двух элементов  для tabs и output. Когда пользователь нажимает на одно из вкладку сценарий находит соответствующей пункт на странице и начинает работать. И CSS класс добавляется к текущей активной вкладки меню.

Шаг 1: HTML код

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

<div id="feature_list">
<ul id="tabs">
	<li> <a href="javascript:;">
<img src="services.png" alt="" />
<h3>Services</h3>
<span>Lorem ipsum dolor sit amet consect</span>
 
</a></li>
	<li> <a href="javascript:;">
<img src="programming.png" alt="" />
<h3>Programming</h3>
<span>Lorem ipsum dolor sit amet consect</span>
 
</a></li>
	<li> <a href="javascript:;">
<img src="applications.png" alt="" />
<h3>Applications</h3>
<span>Lorem ipsum dolor sit amet consect</span>
 
</a></li>
</ul>
<ul id="output">
	<li> <img src="sample1.jpg" alt="" />
<a href="#">See project details</a></li>
	<li> <img src="sample2.jpg" alt="" />
<a href="#">See project details</a></li>
	<li> <img src="sample3.jpg" alt="" />
<a href="#">See project details</a></li>
</ul>
</div>

Шаг 2:  jQuery код
 Подключаем плагин и  файл с фрейморком jQuery.

1
2

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript">
</script> <script src="jquery.featureList-1.0.0.js" type="text/javascript"></script>

Также записываем такой скрипт между тегами <head> </ head> для простого вызова функции с плагина.

1
2
3
4
5
6
7
8
9
10
11
12
13

$.featureList(
$("#tabs li a"),
$("#output li"), {
start_item : 1
}
);
 
// Alternative
 
$('#tabs li a').featureList({
output		: '#output li',
start_item	: 1
});

Следующие параметры настраивается:
start_item – показатель активной вкладки по умолчанию (подсчет начинается с 0) (по умолчанию 0)
pause_on_hover – по умолчанию TRUE, анимация будет пауза при наведении указателя мыши на вкладку
transition_interval – промежуток времени между переходами (0 = нет автоматического перехода) (по умолчанию 5000)

Если вам нужны заборы для дачи качественные, надежныеи не дорогие, тогда вам в stroika-veka. Вних очень большой выбор заборов и приятные цены.

Интересные статьи:

  1. Артём 06.02.2010 01:09

    Отличный плагин, спасибо.

Оставь свое мнение:




Подпишись на обновление блога