Этот клевый скрипт сделали ребята из Флоуплеера.
Возможности
- горизонтальный и вертикальный скроллинг ;
- возможность установить количество видимых элементов;
- возможность скролить мышкой (в том числе и колесиком мыши) и стрелками с клавиатуры (требуется плагин mousewheel.js);
- создание навигационных клавиш без программирования;
- встроенные действия: next, prev, nextPage, prevPage, seekTo, begin, end.
Поддержка браузерами
- Firefox 1.5/2.0+;
- Internet Explorer 5.5/6.0/7.0+;
- Safari 2.0+;
- Opera 9.0+.
Примеры
- простой пример (его мы рассмотрим ниже);
- скроллинг плейлиста;
- скроллинг с навигацией по табам.
Понравилось? Теперь давайте посмотрим, как реализовать первый пример.
HTML
<div id="scrollable">
<div class="navi">
<span class="active" page="0"></span><span page="1"></span><span page="2"></span> </div>
<a class="prev"></a>
<div class="items">
<a>1</a> <a>2</a> <a>3</a> <a>4</a> <a>5</a>
<a>6</a> <a>7</a> <a>8</a> <a>9</a> <a>10</a>
<a>11</a> <a>12</a> <a>13</a> <a>14</a> <a>15</a>
</div>
<a class="next"></a>
</div>JavaScript
$("#scrollable").scrollable({items:'.items',horizontal:true});CSS
#scrollable {
background-color:#efefef;
border:1px solid #ddd;
padding:10px 8px;
width:550px;
height:65px;
}
/* контейнер для элементов, которые мы будет скролить */
div.items {
height:66px;
margin-left:8px;
float:left;
width:478px !important;
}
/* стиль элемента */
div.items a {
display:block;
float:left;
margin-right:8px;
width:88px;
height:66px;
background:url(img/item.gif) 0 0 no-repeat;
font-size:50px;
color:#ccc;
line-height:66px;
text-decoration:none;
text-align:center;
cursor:pointer;
}
div.items a:hover {
color:#999;
}
div.items a.active {
background-position:-174px 0;
color:#555;
cursor:default;
}
/* кнопки вперед и назад */
a.prev, a.next {
display:block;
width:30px;
height:30px;
float:left;
background-repeat:no-repeat;
margin:15px 0 0 0;
}
a.prev {
background:url(img/button-left.gif);
}
a.prev:hover {
background:url(img/button-left-over.gif);
}
a.next {
background:url(img/button-right.gif);
}
a.next:hover {
background:url(img/button-right-over.gif);
}
/* верхняя навигация */
div.navi {
position:relative;
top:-30px;
left:310px;
margin-left:-50px;
width:50px;
height:0px;
}
/* элементы верхней навигации */
div.navi span {
width:8px;
height:8px;
float:left;
margin:3px;
background:url(img/dots.png) 0 0 no-repeat;
cursor:pointer;
}
div.navi span:hover {
background-position:0 -8px;
}
div.navi span.active {
background-position:0 -16px;
}
Сейчас вы увидели как сделать такой же скроллер . Давай посмотрим остальные возможности скрипта.
Полный синтаксис
Ниже идет список всех возможностей (и значений по умолчанию).
// выберите один или несколько элементов для скроллинга
$("JQUERY SELECTOR").scrollable({
// дефолтное количество видимых эелементов 5
size: 5,
// по умолчания ставиться вертикалльный скроллинг
horizontal:false,
// время одного прокручивани]
speed: 300,
/*
селектор для кнопки перемотки назад
*/
prev:'.prev',
// это для кпопки вперед
next:'.next',
/*
селектор для верхней навигации
*/
navi:'.navi',
// имя html элемента внутри верхней навигации (точки)
naviItem:'span',
// CSS класс для активного элемента верхней навигации
activeClass:'active',
/*
Элементы, который мы будет скролить, выбираются этим селектором
*/
items: '.items',
// функция, которая вызывается при скроллинге элементов
onSeek: null
});
Использование навигации
Если в вашем списке много элементов, то вы скорее всего захотите воспользоваться функцией навигации по страницам (это точки над скролом).
Рассмотрим такой пример. У нас есть 4 кнопки, кликая по которым вы будете прокручивать список элементов сразу на несколько штук. Количество таких элементов будет зависить от количества элементов внутри скрола .
<div class="navi">
<span page="0" class="active"></span>
<span page="1"></span>
<span page="2"></span>
<span page="3"></span>
</div>Использование API
Рассмотрим функции скрипта, которые можно использовать для организации навигации внутри скрипта.
// выбираем элемент для скрола
var el = $("div.scrollable");
// шаг сперед
el.scrollable("next", [speed]);
// шаг назад
el.scrollable("prev", [speed]);
// страница вперед
el.scrollable("nextPage", [speed]);
// страница назад
el.scrollable("prevPage", [speed]);
// переход на конкретную страницу
el.scrollable("setPage", 1, [speed]);
// 2 шага вперед
el.scrollable("move", 2, [speed]);
// переход на конкретный элемент
el.scrollable("seekTo", 2, [speed]);
// переход к первому элементу
el.scrollable("begin", [speed]);
// и к последнему
el.scrollable("end", [speed]);
Я думаю, что вы уже поняли как много штук можно сделать с помощью этого скрипта.