18.08.2009

jQuery Tools Scrollable

jQuery Tools — это инструмент/библиотека представляет собой файл весом в 5,8 кб включающий в себя наиболее важные компоненты для вебдванольных сайтов, а именно: табы, всплывающие подсказки, плавные переходы, прокрутки, всплывающие окна и т.д.

---

1. Минимальные установки для Scrollable

В этом примере рассмотрим необходимый минимальный код для Scrollable. Вам необходимо понять, как этот пример работает, и в этом примере рассмотрим только ту часть, которая отвечает за «прикручивания» Scrollable к вашей HTML странице. Понимание этого примера позволит вам сделать любой вид Scrollable, мы сосредоточимся только на функциональных возможностях. А потом вы сами уже сами наведете красоту на Ваших собственных страницах используя HTML и CSS.

Для примера используем Scrollable с 15 элементами, 5 из которых показывают сразу. Вы можете прокручивать нажимая на элементы или клавишами стрелок (влево и вправо). В этом примере у нас нет никаких других средств прокрутки, потому что мы приводи пример минимальной установки.

HTML code

Для начала HTML код в вашу страницу. Создадим элемент с классом scrollable, он и будет прокручиваться. А внутри него создадим элемент с классом items, в который вы можете пометить любой контент — картинки, флэшки, или любой код HTML или формы.

<!-- root element for scrollable -->
<div class="scrollable">

    <!-- root element for the items -->
    <div class="items">
        <div>0</div>  <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>
        <div>5</div>  <div>6</div>  <div>7</div>  <div>8</div>  <div>9</div>
        <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div>
    </div> 

</div>

CSS code

Теперь добавим немного CSS стилей для того, чтобы сделать горизонтальную прокрутку. Главным свойством тут является width. Вы должны будете задать свое свойство width, чтобы у Вас было столько видимых элементов, сколько Вы хотите. Ниже приведены размеры для 5.

/*
    root element for the scrollable.
    when scrolling occurs this element stays still.
*/
div.scrollable { 

    /* required settings */
    position:relative;
    overflow:hidden;
    width: 660px;
    height:90px;
} 

/*
    root element for scrollable items. Must be absolutely positioned
    and it should have a super large width to accomodate scrollable items.
    it's enough that you set width and height for the root element and
    not for this element.
*/
div.scrollable div.items {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
} 

/*
    a single item. must be floated on horizontal scrolling
    typically this element is the one that *you* will style
    the most.
*/
div.scrollable div.items div {
    float:left;
} 

/* you may want to setup some decorations to active item */
div.items div.active {
    border:1px inset #ccc;
    background-color:#fff;
}

В этом коде приведены только необходимые элементы стиля, полный файл с элементами оформления вы можете посмотреть здесь.

JavaScript code

Здесь все просто. В данном коде надо выбрать элементы из страницы, которые будут прокручиваться.. Это делается с помощью jQuery selector.

<script>
// execute your scripts when DOM is ready. this is a good habit
$(function() {         

    // initialize scrollable
    $("div.scrollable").scrollable();     

});
</script>

Что у нас получилось, смотрим в здесь.

Разнообразим наш скрипт

В выше приведённом примере мы сделали с помощью jQuery selector div.scrollable простое выделение элемента DIV. Можно разнообразить выделение, сделать при активации плавное затухание и появление (fadeOut/fadeIn). Для этого, вместо выше предложенного кода вставить этот:

$(function() {
    /* execute this script block when page is ready to be scripted */ 

    // select items under the second scrollable and do something when they are clicked
    $("div.scrollable:eq(1) div.items div").click(function() { 

        // perform the effect
        $(this).fadeOut().fadeIn(); 

    });
});

---

2. Вертикальный Scrollable

Если вы разобрались с минимальными установками, то можно переходить к вертикальному варианту. Здесь мы приведем пример с тремя отображающимися элементами, вместо 5. И добавим еще возможность прокрутки колесиком.

HTML code

Создадим структуру HTML, также как в примере «минимальной установки»

<!-- root element for scrollable -->
<div class="scrollable">

    <!-- root element for the items -->
    <div class="items">
        <div class="active">0</div>  <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>
        <div>5</div>  <div>6</div>  <div>7</div>  <div>8</div>  <div>9</div>
        <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div>
    </div> 

</div>

CSS code

Далее подключаем CSS файл. Для оформления мы использовали фоновое изображение, которое содержит различные четыре вида выделения элемента: значение по умолчанию, наведение курсора, при нажатии и выделенный. Ниже в приведенном куске кода CSS файла отображены главные элементы, которые являются обязательными для вертикального Scrollable:

/* root element for scrollable */
div.scrollable {   

    /* required settings */
    position:relative;
    overflow:hidden;     

    /* vertical scrollers have typically larger height than width */
    height: 307px;
    width: 116px;
} 

/* root element for scrollable items */
div.scrollable div.items {
    position:absolute; 

    /* this time we have very large space for height */
    height:20000em;
}

Здесь мы не стали использовать «float:left;», что бы элементы не располагались в одну строку.

JavaScript code

Теперь создадим скрипт в котором объявим выполнение вертикальной прокрутки vertical:true и объявим о количестве видимых элементов size: 3.

<script>
// execute your scripts when DOM is ready. this is a good habit
$(function() {         

    // initialize scrollable
    $("div.scrollable").scrollable({
        vertical:true,
        size: 3
    });     

});
</script>

Что получилось смотрим тут.

---

3. Пример с элементами навигации

В этом примере мы добавим элементы навигации к примеру «минимальной установки». Мы используем похожую структуру HTML, JavaScript и CSS, добавив лишь функциональных возможностей прокрутки, поместив дополнительные элементы навигации. Также добавим возможность прокрутки колесиком.

HTML code

Ниже, в приведённом коде видно, что мы добавили новые элементы a.next, a.prev и div.navi, помещенный перед и после Scrollable. Эти элементы автоматически станут навигационными без дополнительного программирования JavaScript. Только лишь опишем их свойства в CSS стилях.

<!-- navigator -->
<div class="navi"></div>

<!-- prev link -->
<a class="prev"></a>

<!-- root element for scrollable -->
<div class="scrollable">

	<!-- root element for the items -->
	<div class="items">
		<div>0</div>  <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>
		<div>5</div>  <div>6</div>  <div>7</div>  <div>8</div>  <div>9</div>
		<div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div>

	</div>

</div>

<!-- next link -->
<a class="next"></a>

JavaScript code

У нас есть готовый JavaScript из в «минимальной установки». Никаких дополнительные опции конфигурации добавлять не будем, используем код по умолчанию.

$("div.scrollable").scrollable();

Если вы будете использовать отличные от стандартных теги
и классы «next» и «prev», то вам надо будет их объявить в скрипте. Допустим, для примера, изменим их:

<!-- custom "prev" link -->
<div class="less"></div>

<!-- custom "next" link -->
<div class="more"></div>

Тогда придется дополнить скрипт:

$("div.scrollable").scrollable({
	next: 'div.less',
	prev: 'div.more'
});

Стоит отметить, что элементы должны быть вне элемента scrollable, но при этом они должны быть в одном более высшем элемента.

Прокрутка колёсиком

Для этого достаточно подключить плагин jquery.mousewheel

<script src="/js/jquery.mousewheel.js"></script>

CSS code

В этом примере надо подключить тот же CSS файл, что и в «минимальной установке», а так же CSS файл в котором прописаны стиле кнопок навигации

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

Постраничная прокрутка

Дальше мы приведём код, что бы кнопки навигации прокручивали не по одному элементу, а по странице.

HTML code

Для этого нам надо добавить элементы a.prevPage и a.nextPage

<!-- prev page -->
<a class="prevPage"></a>

<!-- root element for scrollable -->
<div class="scrollable">

	<!-- root element for the items -->
	<div class="items">

		<div>0</div>  <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>
		<div>5</div>  <div>6</div>  <div>7</div>  <div>8</div>  <div>9</div>
		<div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div>

	</div>

</div>

<!-- next page -->
<a class="nextPage"></a>

<!-- power tag: let rest of the page layout normally -->
<br clear="all" />

JavaScript code

Здесь нам достаточно только $(«div.scrollable»).scrollable();

---

4. Украшаем Scrollable

В данном примере мы украсим наш Scrollable. Здесь мы используем те же навигационные элементы, как и в предыдущем примере.

HTML code

Вот наша структура HTML. Она почти такая же, как и в предыдущих примерах, за исключением того, что элементов, которые будут прокручиваться значительно «насыщенней». Для примера приведем только один кусок кода, который надо будет повторить столько раз, сколько вы захотите элементов.

<!-- root element -->
<div class="scrollable">

	<!-- for a change we have different kind of container for items -->
	<div id="thumbs">

		<!-- one item. in the example we have many of these -->
		<div>

			<img src="/img/demos/thumbs/thumbX.jpg" />

			<h3><em>X. </em>An example title</h3>

			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
				tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
			</p>

			<span>XX sec</span>

		</div>

	</div>

</div>

CSS code

Ниже показано только моделирование основного элемента. Полный CSS вы может посмотреть исходном коде примера.

/* single item */
#thumbs div {
	float:left;
	width:214px;
	height:300px;
	background:#333 url(/img/global/gradient/h150.png) repeat-x 0 146px;
	color:#fff;
	border-left:1px solid #333;
	cursor:pointer;
}

/* style when mouse is over the item */
#thumbs div.hover {
	background-color:#444;
}

/* style when element is active (clicked) */
#thumbs div.active {
	background-color:#066;
	cursor:default;
}

JavaScript code

У нас должно быть видимыми три элемента, поэтому мы должны установить свое значение size: 3. У нас в примере контейнер «thumbs», он отличный от значения по умолчанию «.items», поэтому нам надо установить свойства items для элементов. Также присвоим через hoverClass заказной стиль элементу, когда мышь помещена над ним. См. #thumbs div.hover в CSS коде выше.

<script>
// execute your scripts when DOM is ready. this is a good habit
$(function() {		

	// initialize scrollable
	$("div.scrollable").scrollable({
		size: 3,
		items: '#thumbs',
		hoverClass: 'hover'
	});	

});
</script>

Еще раз ссылка на пример

---

5. Добавление и удаление элементов в Scrollable

Этот пример показывает, как добававлять и удалять прокручиваемые элементы. Обратите внимание, что в контейнер добавляются и удаляются элементы, и они ведут себя правильно, и что на новые элементы можно также нажимать.

Функция удаления и добавления

Добавление и удаление элементов происходит «стандартным» для jQuery методом — append и remove. После добавления вызываем метод reload для Scrollables API, это позволяет нам правильно обрабатывать события новых элементов.

function addItem() {

	// get handle to scrollable api
	var api = $("div.scrollable").scrollable();

	// append new item using jQuery's append() method
	api.getItemWrap().append('<div>' + api.getItems().length + '</div>');

	// rebuild scrollable and move to the end to see what happened
	api.reload().end();
}

function removeItem() {
	// get handle to scrollable api
	var api = $("div.scrollable").scrollable();

	// move in 1 millisecond to the end to see what will happen
	api.end(1);

	// remove last item by using jQuery's remove() method
	api.getItems().filter(":last").remove();

	// rebuild scrollable and go one step backward
	api.reload().prev();
}

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

---

6. Использование анимации в Scrollable

В Scrollable возможно использовать анимацию «easing».

Обычная анимация

Вы можете добавить новые анимации jQuery, добавляя их к объекту jQuery.easing. В следующем примере мы добавляем анимацию «custom».

// custom easing called "custom"
$.easing.custom = function (x, t, b, c, d) {
	var s = 1.70158;
	if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
	return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}

Вы наверное обратили внимание, что этот код не для «нормальных» людей. На самом деле этот код взят из source code. от jQuery Easing Plugin. Есть достаточно много эффектов, которые Вы можете попробовать. Та же самая библиотека используется проектом jQuery UI.

Вызываем Scrollable

Код вызова Scrollable достаточно прост.Нам лишь надо указать параметры для easing. Здесь также можно изменять скорость для эффекта.

// use the custom easing
$("div.scrollable").scrollable({easing: 'custom', speed: 700});

Пример того что получилось здесь

Выбирайте easing эффекты

Вы можете выбирать easing эффекты на свой вкус. Например вы можете сделать как на главной странице проекта http://flowplayer.org/

// get handle to the configuration
var conf = $("#tab_panes").scrollable().getConf();

// alter the easing
conf.easing = 'custom';
conf.speed = 700;

---

7. Автоматическая прокрутка Scrollable

Этот пример использует interval, чтобы сделать прокрутку элементов автоматически с задержкой в 2 секунды. При сделаем, что бы при наведение мыши автоматическое прокручивание останавливалось. А при достижение 15 элемента прокручивание начиналось с начала. Это мы достигнем с помощью параметра loop . Этот пример можно например использовать для каталога продукции.
Так же для красоты мы добавим эффект во время прокрутки fadeOut/fadeIn.

JavaScript code

Вот пример JavaScript кода. В нем мы используем событие onBeforeSeek и onSeek, чтобы сделать эффекты при анимации.

<script>

// execute your scripts when DOM is ready. this is a good habit
$(function() {		

	// initialize scrollable
	$("div.scrollable").scrollable({

		// items are auto-scrolled in 2 secnod interval
		interval: 2000,

		// when last item is encountered go back to first item
		loop: true, 

		// make animation a little slower than the default
		speed: 600,

		// when seek starts make items little transparent
		onBeforeSeek: function() {
			this.getItems().fadeTo(300, 0.2);
		},

		// when seek ends resume items to full transparency
		onSeek: function() {
			this.getItems().fadeTo(300, 1);
		}
	});	

});
</script>

Пример здесь