Плагин jQuery Kwicks

Описание

Плагин jQuery Kwicks предназначен для реализации аккордеона с эффектами в стиле Mootools. Подобные элементы можно использовать для создания привлекательной навигации на ваших страницах. Смотрите примеры реализации.

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

Новые версии плагина доступны в репозитории.

Опции

Опции плагина Kwicks

Доступны следующие опции:

max: Обязательно*
Ширина или высота (в px) полностью раздвинутой панели. Если опция isVertical имеет значение true, то max указывает высоту панели, в противном случае - ширину.

* Вы обязательно должны задать значение опции max или min.
min: Обязательно*
Ширина или высота (в px) полностью свернутой панели. Если опция isVertical имеет значение true, то min указывает высоту панели, в противном случае - ширину.

* Вы обязательно должны задать значение опции max или min.
isVertical: Значение по умолчанию: false
Панели будут работать по вертикали при значении true.
sticky: Значение по умолчанию: false
Одна из панелей будет всегда развернута (залипание) при значении true.
defaultKwick: Значение по умолчанию: 0
Открытая панель при инициализации (только если опция sticky имеет значение true).
Примечание: отсчет начинается с 0, слева-направо (сверху-вниз).
event: Значение по умолчанию: 'mouseover'
Событие, которое включает открытие панели. Другие доступные значения: click и dblclick.
duration: Значение по умолчанию: 200
Количество миллисекунд, которое требуется для каждой анимации.
easing:
Эффект перехода (требуется плагин jQuery Easing).
spacing: Значение по умолчанию: 0
Ширина (в px) интервала между панелями.

Соглашения

Потенциальная проблема для Safari 3.1.1: Если ваша таблица стилей включается ниже ссылок на JavaScript, то Safari 3.1.1 будет выполнять код до применения правил CSS. Так как скрипт использует некотрые стили, то вы получите непредсказуемый результат. Для исключения проблемы включайте стили выше ссылок на JavaScript код.

Важная информация по стилям: Для обеспечения палвной анимации следующие стили изменяются скриптом:

  • Все панели получают абсолютное позиционирование.
  • Поля панелей игнорируются, но используется опция spacing для задания интервалов.
  • Высота контейнера ul соответствует комбинированной высоте панелей.
  • Ширина контейнера ul соответствует комбинированной ширине панелей.

Хотя поля панелей игнорируются, следует их задавать равными значению опции spacing для обеспечения корректного отображения в браузерах с отключенным JavaScript. Смотрите файл CSS, который идет в комплекте с плагином.


Активная панель получает дополнительный класс "active", который можно использовать для определения внешнего вида.

Примеры

CSS по умолчанию

Все примеры используют стили по умолчанию:

/* Стили для всех примерров */
.kwicks {
	list-style: none;
	position: relative;
	margin: 0;
	padding: 0;
}
.kwicks li{
	display: block;
	overflow: hidden;
	padding: 0;
	cursor: pointer;
}
    		

Каждый пример также имеет дополнительные стили, которые зависят от конкретной реализации.


Пример 1: Как Mootools

Использование эффекта как на странице Mootools.

Смотреть примеры использования

HTML

<ul class="kwicks" >
	<li id="kwick1"></li>
	<li id="kwick2"></li>
	<li id="kwick3"></li>
	<li id="kwick4"></li>
</ul>
   	    	

CSS

.kwicks li{
	float: left;
	width: 125px;
	height: 100px;
	margin-right: 5px;
}
#kwick1 { 
	background-color: #53b388;
	background-image: url('images/meet.gif');
}
#kwick2 {
	background-color: #5a69a9;
	background-image: url('images/kwicks.gif');
}
#kwick3 {
	background-color: #c26468;
	background-image: url('images/for.gif');
}
#kwick4 { 
	background-color: #bf7cc7;
	background-image: url('images/jquery.gif');
	margin-right: none;
}
        	

JavaScript

$().ready(function() {
	$('.kwicks').kwicks({
		max : 205,
		spacing : 5
	});
});
			

Пример 2: Использование класса "аctive"

Плагин Kwicks добавляет дополниттельный класс "аctive" к активной панели. В данном приере демонстрируется исопльзование класса для активной панели.

Смотреть примеры использования

HTML

<ul class="kwicksl" >
	<li id="kwick1"></li>
	<li id="kwick2"></li>
	<li id="kwick3"></li>
	<li id="kwick4"></li>
</ul>
   	    	

CSS

.kwicks li {
	float: left;
	width: 125px;
	height: 100px;
	margin-right: 5px;
}
#kwick1 { 
	background-color: #53b388;
}
#kwick1.active { 
	background-color: #86e6bb;
}
#kwick2 {
	background-color: #5a69a9;
}
#kwick2.active {
	background-color: #8d9cdc;
}
#kwick3 {
	background-color: #c26468;
}
#kwick3.active {
	background-color: #f5979b;
}
#kwick4 { 
	background-color: #bf7cc7;
	margin-right: none;
}
#kwick4.active { 
	background-color: #efaffa;
}
        	

JavaScript

$().ready(function() {
	$('.kwicks').kwicks({
		max: 205,
		spacing:  5
	});
});
			

Пример 3: Вертикальное выравнивание

Плагин позволяет простым заданием опции isVertical изменить направление функционирования панелей. Нужно также изменить CSS.

Смотреть примеры использования

HTML

<ul class="kwicksl" >
	<li id="kwick1"></li>
	<li id="kwick2"></li>
	<li id="kwick3"></li>
	<li id="kwick4"></li>
</ul>
   	    	

CSS

.kwicks li{
	width: 125px;
	height: 100px;
	margin-bottom: 3px;
}
#kwick1 { 
	background-color: #FF5100;
}
#kwick2 {
	background-color: #B33900;
}
#kwick3 {
	background-color: #FFD000;
}
#kwick4 { 
	background-color: #B39200;
	margin-bottom: none;
}
        	

JavaScript

$().ready(function() {
	$('.kwicks').kwicks({
		max : 205,
		spacing : 3,
		isVertical : true
	});
});
			

Пример 4: Используем Min вместо Max

В предыдущих примерах была задана ширина активной панели с помощью опции max. Опция min позволяет задать минимальную ширину/высоту панели в свернутом состоянии.

Смотреть примеры использования

HTML

<ul class="kwicksl" >
	<li id="kwick1"></li>
	<li id="kwick2"></li>
	<li id="kwick3"></li>
	<li id="kwick4"></li>
</ul>
   	    	

CSS

.kwicks li{
	width: 125px;
	height: 100px;
	margin-bottom: 3px;
}
#kwick1 { 
	background-color: #008DA3;
}
#kwick2 {
	background-color: #F07000;
}
#kwick3 {
	background-color: #A33100;
}
#kwick4 { 
	background-color: #8CAB2B;
	margin-bottom: none;
}
        	

JavaScript

$().ready(function() {
	$('.kwicks').kwicks({
		min : 30,
		spacing : 3,
		isVertical : true
	});
});
			

Пример 5: Используем залипание и пользовательское событие

Опция sticky включает режим залипания, когда активная панель остается развернутой. Опция event позволяет задать событие, по которому происходит активация панели. Комбинация данных опций дает возможность изменить функционал аккордеона.

Смотреть примеры использования

HTML

<ul class="kwicks">
	<li id="kwick1"></li>
	<li id="kwick2"></li>
	<li id="kwick3"></li>
	<li id="kwick4"></li>
</ul>
   	    	

CSS

.kwicks li {
	width: 125px;
	height: 100px;
	margin-bottom: 3px;
}
#kwick1 { 
	background-color: #4D9AA8;
}
#kwick2 {
	background-color: #82A616;
}
#kwick3 {
	background-color: #F29A1F;
}
#kwick4 { 
	background-color: #A66A16;
	margin-bottom: none;
}
        	

JavaScript

$().ready(function() {
	$('.kwicks').kwicks({
		min : 30,
		spacing : 3,
		isVertical : true,
		sticky : true,
		event : 'click'
	});
});
			

Пример 6: Пользовательские длительность и эффект перехода

В данном примере демонстрируется изменение длительности перхода и использование другого эффекта для анимации.

Смотреть примеры использования

HTML

<ul class="kwicks">
	<li id="kwick1"></li>
	<li id="kwick2"></li>
	<li id="kwick3"></li>
	<li id="kwick4"></li>
</ul>
   	    	

CSS

.kwicks li {
	float: left;
	width: 125px;
	height: 100px;
	margin-right: 5px;
}
#kwick1 { 
	background-color: #53b388;
}
#kwick2 {
	background-color: #5a69a9;
}
#kwick3 {
	background-color: #c26468;
}
#kwick4 { 
	background-color: #bf7cc7;
	margin-right: 0px;
}
        	

JavaScript

$().ready(function() {
	$('.kwicks').kwicks({
		max: 320,
		spacing: 5,
		duration: 1500,
		easing: 'easeOutBounce'
	});
});
			

Пример 7: Креативненько!

Плагин Kwicks можно исопльзовать и для создания креативных элементов страницы...

Смотреть примеры использования

HTML

<ul class="kwicks">
	<li>
		<div class="kwicks_inner_inner">
			<div class="bigLetter">L</div>
			<div class="smallLetters">is for the way you look at me</div>
		</div>
	</li>
	<li>
		<div class="kwicks_inner">
			<div class="bigLetter">O</div>
			<div class="smallLetters">is for the only one I see</div>
		</div>
	</li>
	<li>
		<div class="kwicks_inner">
			<div class="bigLetter">V</div>
			<div class="smallLetters">is very, very extraordinary</div>
		</div>
	</li>
	<li>
		<div class="kwicks_inner">
			<div class="bigLetter">E</div>
			<div class="smallLetters">is even more... I refuse to finish...</div>
		</div>
	</li>
</ul>
   	    	

CSS

.kwicks li {
	float: left;
	width: 90px;
	height: 100px;
}
.kwicks .kwicks_inner {
	width: 200px;
}
.kwicks .bigLetter {
	font-size: 60px;
	width: 90px;
	height: 100px;
	color: red;
	float: left;
}
.kwicks .smallLetters {
	display: none;
	text-align: center;
	width: 140px;
	color: #ccc;
	font-size: 16px;
	margin-top: 13px;
	float: right;
}
.kwicks li.active .smallLetters {
	display: block;
}
        	

JavaScript

$().ready(function() {
	$('.kwicks').kwicks({
		max: 200,
		duration: 400,
        sticky: true
	});
});