Введение
В прошлой статье, вот ссылочка, я обещал выложить плагин по «ползункам», доработав его учитывая большинство комментариев получилось «это»:
Из-за нехватки времени фичи для touch устройств были вырезаны, так что пока только для владельцев mouse устройств. Статью публикую для критики, баг-репортов ну и конечно же ваших пожеланий.
jQuery Plugin — Scroll Sliders
Как всегда мои наработки имеют кучу настроек, так что начну пожалуй с них. Вот, немалый список:
slider Default: true Вкл/Выкл функционал ползунка sliderOuter Default: true Вкл/Выкл функционал блока вокруг ползунка (при нажатии на блок в котором расположен ползунок, ползунок «телепортируется» к нам) speedMove Default: 200 Время прохождения 1го элемента при использовании ползунка с его максимальным отклонением speedMoveScroller Default: 300 Временно не используется speedMoveControl Default: 250 Время прохождения 1го элемента при использовании кнопок вперед/назад speedMoveWheel Default: 150 Время прохождения 1го элемента при прокрутке колесом мыши speedRevert Default: 220 Время возврата ползунка в среднее положение speedAnimation Default: 13 Интервал для выполнения анимаций revert Default: true Вкл/Выкл возвращение ползунка в центральное положение sliderInverse Default: false Вкл/Выкл инверсию для ползунка sliderOuterDiv Default: ‘.scroll-outer’ Блок-рамка для ползунка sliderToddlerDiv Default: ‘.scroll-toddler’ Блок-ползунок… хм забавное описание control Default: true Вкл/Выкл функционал для кнопок управления controlNext Default: ‘.scroll-control .next’ Блок-кнопка управления «вперед» controlPrev Default: ‘.scroll-control .prev’ Блок-кнопка управления «назад» controlRevert Default: false Вкл/Выкл инверсию для кнопок управления scroller Default: true Вкл/Выкл функционал скролла scrollerOuter Default: true Вкл/Выкл функционал вокруг скролла (при нажатии на блок в котором расположен скролл, скролла «телепортируется» к нам) mouseWheel Default: true Вкл/Выкл функционал колесика мыши mouseWheelRevert Default: false Вкл/Выкл инверсию для колесика мыши mouseWheelsDiv Default: ‘.scroll-positions, .block-for-scroll’ Блоки в которых будет активен функционал скролла scrollerOuterDiv Default: ‘.scroll-positions’ Блок скролла scrollerToddlerDiv Default: ‘.scroll-positioner’ Блок-указатель скролла slideDiv Default: ‘.block-for-scroll’ Блок который будет имитировать наши перемещения им мы и будем орудовать slideOuterDiv Default: ‘.block-outer Рамка внутри которой всё будет происходит slideWidthDiv Default: ‘.block-for-scroll-inter’ Сам блок внутри которого само содержимое slideLiClass Default: ‘li.li’ элемент внутрених списков
Использовать плагин довольно таки просто, он имеет только один метод scrollsliders:
$(‘.my-scrolled-div’).scrollsliders();
или с параметрами ( можно и больше ^_^ ):
$(‘.my-scrolled-div’).scrollsliders({
speedMove: 200,
speedMoveScroller: 300,
speedMoveControl: 250,
speedMoveWheel: 150,
speedMoveRevert: 220,
speedRevert: 300
});
Скелет для этого тоже довольно таки прост:
<div class=«my-scrolled-div»>
<div class=«scroll-positions»>
<div class=«scroll-positioner»>
<div class=«scroll-positioner-inter»>
</div>
</div>
</div>
<div class=«block-outer»>
<div class=«block-for-scroll»>
<div class=«block-for-scroll-inter»>
<ul class=«style-ul»>
<li class=«li li-n-1″>li#1 inter text</li>
…
<li class=«li li-n-24″>li#24 inter text</li>
</ul>
</div>
</div>
</div>
<div class=«scroll-div»>
<div class=«scroll-outer»>
<div class=«scroll-toddler»>
</div>
</div>
<div class=«scroll-control»>
<div class=«prev»>
</div>
<div class=«next»>
</div>
</div>
</div>
<div class=«block-outer»>
<div class=«block-for-scroll»>
<div class=«block-for-scroll-inter»>
<ul class=«style-ul»>
<li class=«li li-n-1″>li#1 inter text</li>
…
<li class=«li li-n-24″>li#24 inter text</li>
</ul>
</div>
</div>
</div>
<div class=«scroll-positions»>
<div class=«scroll-positioner»>
<div class=«scroll-positioner-inter»>
</div>
</div>
</div>
</div>
Также и CSS:
*
{
margin:0px;
padding:0px;
}
debug{
position:fixed;
display:block;
color:#fff;
background:#000;
padding:15px;
top:15px;
left:15px;
}
.block-outer
{
position:relative;
height:200px;
width:800px;
margin:0 auto;
border:2px dashed blue;
overflow:hidden;
}
.scroll-positions{
position:relative;
width:800px;
margin:0 auto;
margin-top:10px;
margin-bottom:10px;
height:15px;
border:1px solid #aaa;
background:#eee;
}
.scroll-positions .scroll-positioner{
height:15px;
width:50px;
background:#ccc;
position:absolute;
top:0px;
left:0px;
cursor:pointer;
}
.block-outer .block-for-scroll
{
position:absolute;
left:0px;
top:0px;
height:100%;
width:30000px;
}
.block-outer .block-for-scroll .block-for-scroll-inter
{
position:absolute;
}
.block-for-scroll .style-ul
{
list-style:none;
height:100%;
}
.block-for-scroll .style-ul .li{
position:relative;
float:left;
margin:5px;
height:186px;
border:2px dotted red;
width:186px;
}
.scroll-div
{
position:relative;
margin:20px;
}
.scroll-control{
position:relative;
width:600px;
height:0px;
margin:0 auto;
}
.scroll-control .next{
position:absolute;
right:60px;
top:-30px;
height:40px;
width:40px;
background:blue;
cursor:pointer;
}
.scroll-control .prev{
position:absolute;
left:60px;
top:-30px;
height:40px;
width:40px;
background:blue;
cursor:pointer;
}
.scroll-div .scroll-outer
{
position:relative;
width:300px;
height:20px;
margin:0 auto;
background:gray;
}
.scroll-div .scroll-outer .scroll-toddler
{
position:absolute;
height:20px;
width:20px;
left:140px;
top:0px;
background:blue;
cursor:pointer;
}
После применения скелета и таблицы стилей должны получить что-то наподобие:
Заключение
Вот такие вот пироги с котятами, их кушаешь — они мяукают.
Скелет тут, демо версия тут, скачать тут. Архивом можно тут. Деньги слать сюда, утка 
С Ув. buna1991.
0 Комментарии。