Построение интерфейса на jQuery. Эффекты

Сейчас, когда все хотят видеть динамичные сайты, красивые и юзабельные, а к примеру теже сайты на чистом Флэш меня как то не очень прельщают, лично для себя вижу альтернативу в framework’e jQuery.

В этой статье хочу привести пару примеров построения интерфейсов того же меню для сайта, используя эффекты «рыбьего глаза » [Fisheye], различного рода спецэффектов и т.д. Это скорее не статья, а маленький экскурс в эту библиотеку javascript. И так начнем.

Для всех манипуляций нам понадобиться собственно сам фрэймворк jQuery и готовые библиотеки для построения различного рода интерфейсов.

[Fisheye]

Пример можно посмотреть здесь

Сам вызов функции в общем виде выглядит следующим образом

$(document).ready(
		function()
		{
			$('#dock').Fisheye(
				{
					maxWidth: 50,
					items: 'a',
					itemsText: 'span',
					container: '.dock-container',
					itemWidth: 40,
					proximity: 90,
					halign : 'center'
				}
			)
		}
	);

где #dock это класс в который заключено наше меню.

В хидере подключаем наши либы

<script type="text/javascript" src="js/jquery.js">
<script type="text/javascript" src="js/interface.js">

Теперь разберем параметры функции Fisheye:

maxWidth: 50, — максимальная ширина каждого элемента
items: ‘a’, — выбор предметов заключается по тегу ссылки
itemsText: ‘span’, — текст элементов меню будет заключен в этот тег
container: ‘.dock-container’, — тег (контеинер) в который заключен
каждый элемент меню
itemWidth: 40, — минимальная
ширина
каждого элемента

proximity: 90, — расстояние от элементов (чем больше, тембольше эффект «fisheye»)
halign : ‘center’
горизонтальное расопложение
valign — в данном примере не рассмотрен,
вертикальное расположение

[Sortables]

Покажу на примере изображения, всем известного логотипа 😉

Пример доступен здесь.
Параметры и вызов функции сортировки:

$(document).ready(
	function () {
		$('div').Sortable(
			{
				accept : 		'sortableitem',
				helperclass : 	'sorthelper',
				activeclass : 	'sortableactive',
				hoverclass : 	'sortablehover',
				opacity: 		0.8,
				revert:			true,
				floats:			true,
				tolerance:		'fit'
			}
		)
	}
);

accept : ‘sortableitem’, — класс/контейер в который заключаем наши эелемнты «мозайки»
helperclass : ‘sorthelper’, — класс для помощи, который показывает возможное положение елемента
activeclass : ‘sortableactive’, — активный класс
hoverclass : ‘sortablehover’, — класс при перемещении элемента
opacity: 0.8, — прозрачность элемента при движении
floats: true, — плавающее перемещение элементов, булевый тип (true/false)
tolerance: ‘fit’ — отвечает за то как элемент будет перемещаться,  может принимать значения
‘pointer’, ‘intersect’ or ‘fit’

2be continued… soon…

5 Replies to “Построение интерфейса на jQuery. Эффекты”

  1. Привет. У меня вопрос по [Sortables]. Где ты нашел описание параметров, которые использовал: helperclass, activeclass , hoverclass и.д.? В оф. документации они не описаны, а что описано , то половина не работает 🙁

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *