Очень удобный переключатель страниц для uCoz
827материалов
228тем на форуме
3004комментария
6159пользователей

Очень удобный переключатель страниц для uCoz


УСТАНОВКА:

ШАГ 1.

Сначала заливаем всё из архива в файловый менеджер.
Примечание:
Скрипты из прикреплённого архива залейте в папку js, картинку в папку images
___________________
После тега </head> вставляйте на нужной вам странице этот код:

Код
<script src="/js/jquery-ui-1.8.13.slider.min.js"></script>     
<script src="/js/jPaginator-min.js"></script>     
<script type="text/javascript">     
// Initial call     
$(document).ready(function(){     
$("#pagination").jPaginator({   
nbPages:64,     
marginPx:5,     
length:8,   
overBtnLeft:'#over_backward',   
overBtnRight:'#over_forward',   
maxBtnLeft:'#max_backward',   
maxBtnRight:'#max_forward',   
onPageClicked: function(a,num) {   
$("#page").html("Page "+num);   
}   
});     
});     
</script>


ШАГ 2.

В самый низ ваших CSS стилей:

Код
.paginator_p {     
text-align:center;     
float:left;     
height:20px;     
cursor:pointer;     
color:white;     
background-color:#B7B7B7;     
list-style-type:none;     
}     
.paginator_p.over {     
background-color:#8B8B8B;     
}     
.paginator_p.selected {     
background-color:#CAFF3A;     
color:white;     
background-color:black;     
}     
.paginator_p_wrap {     
position:relative;     
overflow:hidden;     
float:left;     
-webkit-user-select: none;     
-khtml-user-select: none;     
-moz-user-select: none;     
-o-user-select: none;     
user-select: none;     
}     
.paginator_p_bloc {     
position:relative;     
width:3000px;     
}     
.paginator_slider {     
float:left;     
clear: left;     
height: 4px;     
top: 4px;     
background: white;     
border: solid 1px black;     
position:relative;     
}     
.paginator_slider .ui-slider-handle {     
width: 8px;     
height: 12px;     
position: absolute;     
top: -4px;     
background-color:black;     
}     
.jPaginatorOver {     
background-color: #BCF2D5;     
float: left;     
height: 20px;     
margin: 0 2px;     
text-align: center;     
width: 30px;     
}     
.jPaginatorMax {     
background-color: #5FAABC;     
cursor: pointer;     
float: left;     
height: 20px;     
text-align: center;     
width: 30px;     
}     
.paginator_p {     
height: 30px;     
width: 30px;     
line-height: 30px;     
text-align: center;     
font-size: 13px;     
font-weight: bold;     
color: #26430c;     
/*1px right and down offset, no blur and offwhite*/     
text-shadow: 1px 1px 0px #5a8332;     
/* FF3.5+, Opera 9+, Saf1+, Chrome */     
background-color: #4A821B;     
background-image: url('/images/sprite.png') no-repeat 0 0;     
/*image fallback for none supporting browsers*/     
background-image: -webkit-gradient(linear, left top, left bottom, from(#4a821b), to(#243f0d));     
/* Saf4+, Chrome */     
background-image: -webkit-linear-gradient(top, #4a821b, #243f0d);     
/* Chrome 10+, Saf5.1+ */     
background-image: -moz-linear-gradient(top, #4a821b, #243f0d);     
/* FF3.6 */     
background-image: -ms-linear-gradient(top, #4a821b, #243f0d);     
/* IE10 */     
background-image: -o-linear-gradient(top, #4a821b, #243f0d);     
/* Opera 11.10+ */     
background-image: linear-gradient(top, #4a821b, #243f0d);     
/*border radius half the width and height of our links to create a circle*/     
-moz-border-radius: 15px;     
/* FF1-3.6 */     
-webkit-border-radius: 15px;     
/* Saf3-4, iOS 1-3.2, Android <1.6 */     
border-radius: 15px;     
/* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */     
/*box shadow - no offset, but a blur of 4px and spread of 1px*/     
/*plus an additional box-shadow to create the glow*/     
-moz-box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42;     
/* FF3.5+ */     
-webkit-box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42;     
/* Saf3.0+, Chrome */     
box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42;     
/* Opera 10.5, IE9, Chrome 10+ */     
}     
/*state for selected, plus hover whilst selected. This can come before or after the general hover state due to outranking specificity*/     
.paginator_p.selected, .paginator_p.selected:hover {     
color: #0d1804;     
/*1px right and down offset, no blur and pale green*/     
text-shadow: 1px 1px 0px #8dc953;     
/* FF3.5+, Opera 9+, Saf1+, Chrome */     
background-color: #589225;     
background-image: url('/images/sprite.png') no-repeat -80px 0;     
/*image fallback for none supporting browsers*/     
background-image: -webkit-gradient(linear, left top, left bottom, from(#589225), to(#87D445));     
/* Saf4+, Chrome */     
background-image: -webkit-linear-gradient(top, #589225, #87D445);     
/* Chrome 10+, Saf5.1+ */     
background-image: -moz-linear-gradient(top, #589225, #87D445);     
/* FF3.6 */     
background-image: -ms-linear-gradient(top, #589225, #87D445);     
/* IE10 */     
background-image: -o-linear-gradient(top, #589225, #87D445);     
/* Opera 11.10+ */     
background-image: linear-gradient(top, #589225, #87D445);     
/*box shadow - no offset, but a blur of 2px and spread of 1px*/     
/*plus an additional box-shadow to create the glow - slightly brighter than normal state*/     
-moz-box-shadow: 0 0 2px 1px #191919, inset 0 1px 0 #cff3a2;     
/* FF3.5+ */     
-webkit-box-shadow: 0 0 2px 1px #191919, inset 0 1px 0 #cff3a2;     
/* Saf3.0+, Chrome */     
box-shadow: 0 0 2px 1px #191919, inset 0 1px 0 #cff3a2;     
/* Opera 10.5, IE9, Chrome 10+ */     
}     
.paginator_p:hover {     
color: #0d1804;     
/*1px right and down offset, no blur and pale green*/     
text-shadow: 1px 1px 0px #8dc953;     
background-color: #87D445;     
background-image: url('/images/sprite.png') no-repeat -120px 0;     
/*image fallback for none supporting browsers*/     
background-image: -webkit-gradient(linear, left top, left bottom, from(#87d445), to(#589225));     
/* Saf4+, Chrome */     
background-image: -webkit-linear-gradient(top, #87d445, #589225);     
/* Chrome 10+, Saf5.1+ */     
background-image: -moz-linear-gradient(top, #87d445, #589225);     
/* FF3.6 */     
background-image: -ms-linear-gradient(top, #87d445, #589225);     
/* IE10 */     
background-image: -o-linear-gradient(top, #87d445, #589225);     
/* Opera 11.10+ */     
background-image: linear-gradient(top, #87d445, #589225);     
/*box shadow - no offset, but a blur of 2px and spread of 1px*/     
/*plus an additional box-shadow to create the glow - slightly brighter than normal state*/     
-moz-box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #cff3a2;     
/* FF3.5+ */     
-webkit-box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #cff3a2;     
/* Saf3.0+, Chrome */     
box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #cff3a2;     
/* Opera 10.5, IE9, Chrome 10+ */     
}     
/*the slider rail*/     
.paginator_slider {     
/*margin on the left pushes it past the nav buttons,   
so make the distance the total width, including margins of the nav buttons*/     
margin: 20px 0 20px 80px;     
/*with height of 8px, plus border of 1px all round our hight totals 10px*/     
height: 8px;     
background: #181818;     
border: 1px solid #393939;     
border-top-color: #0f0f0f;     
border-left-color: #0f0f0f;     
/*border radius for ff, safari + chrome, css3*/     
/*half the total height of our element to create rounded ends*/     
-moz-border-radius: 5px;     
/* FF1-3.6 */     
-webkit-border-radius: 5px;     
/* Saf3-4, iOS 1-3.2, Android <1.6 */     
border-radius: 5px;     
/* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */     
}     
/*the slider, er, knob?*/     
.paginator_slider .ui-slider-handle {     
height: 20px;     
width: 20px;     
margin-left: -10px;     
/*nudges the knob left, half its width*/     
/*remove outline in ff*/     
outline: none;     
/*border radius for ff, safari + chrome, css3*/     
/*half the width and height of knob to create a circle*/     
-moz-border-radius: 10px;     
/* FF1-3.6 */     
-webkit-border-radius: 10px;     
/* Saf3-4, iOS 1-3.2, Android <1.6 */     
border-radius: 10px;     
/* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */     
/*alter the positioning to bring it centred to rail*/     
top: -7px;     
/*same styling as links*/     
background-color: #4A821B;     
background-image: url('/images/sprite.png') no-repeat 0 0;     
/*image fallback for none supporting browsers*/     
background-image: -webkit-gradient(linear, left top, left bottom, from(#4a821b), to(#243f0d));     
/* Saf4+, Chrome */     
background-image: -webkit-linear-gradient(top, #4a821b, #243f0d);     
/* Chrome 10+, Saf5.1+ */     
background-image: -moz-linear-gradient(top, #4a821b, #243f0d);     
/* FF3.6 */     
background-image: -ms-linear-gradient(top, #4a821b, #243f0d);     
/* IE10 */     
background-image: -o-linear-gradient(top, #4a821b, #243f0d);     
/* Opera 11.10+ */     
background-image: linear-gradient(top, #4a821b, #243f0d);     
/*box shadow - no offset, but a blur of 4px and spread of 1px*/     
/*plus an additional box-shadow to create the glow*/     
-moz-box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42;     
/* FF3.5+ */     
-webkit-box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42;     
/* Saf3.0+, Chrome */     
box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42;     
/* Opera 10.5, IE9, Chrome 10+ */     
}     
/*container for buttons - add some padding so we can see the drop shadow*/     
.paginator_p_bloc {     
padding: 5px 0;     
}     
.paginator_p_wrap {     
margin: 0;     
padding: 35px 0;     
/*multiple background images, one for the left, one for the right*/     
background: url('/images/sprite.png') left -250px no-repeat, url('/images/sprite.png') right -250px no-repeat     
}     
/*let's deal with the control buttons*/     

/*general styles for controls*/     
.control {     
float: left;     
width: 40px;     
height: 40px;     
margin: 35px 0 0 0;     
position: relative;     
cursor: pointer;     
}     
#max_backward {     
background: url('/images/sprite.png') no-repeat 0 -60px;     
}     
#over_backward {     
background: url('/images/sprite.png') no-repeat -40px -60px;     
}     
#over_forward {     
background: url('/images/sprite.png') no-repeat -80px -60px;     
}     
#max_forward {     
background: url('/images/sprite.png') no-repeat -120px -60px;     
}     
/*hovers*/     
#max_backward:hover {     
background: url('/images/sprite.png') no-repeat 0 -100px;     
}     
#over_backward:hover {     
background: url('/images/sprite.png') no-repeat -40px -100px;     
}     
#over_forward:hover {     
background: url('/images/sprite.png') no-repeat -80px -100px;     
}     
#max_forward:hover {     
background: url('/images/sprite.png') no-repeat -120px -100px;     
}     
/*highlights*/     
#over_backward:after {     
content:'';     
background: url('/images/sprite.png') -40px -140px no-repeat;     
display: block;     
height: 110px;     
width: 30px;     
/*position the highlight owing to awkward inherited floats and margins from .control*/     
position: absolute;     
right: 0px;     
top: -35px;     
}     
#over_forward:after {     
content:'';     
background: url('/images/sprite.png') -80px -140px no-repeat;     
display: block;     
height: 110px;     
width: 30px;     
/*position the highlight owing to awkward inherited floats and margins from .control*/     
position: absolute;     
left: 0px;     
top: -35px;     
}

ШАГ 3.
Далее в то место, где должен быть переключатель:

Код
<div id="pagination">     
<a class="control" id="max_backward"></a>     
<a class="control" id="over_backward"></a>   
<div class='paginator_p_wrap'>     
<div class='paginator_p_bloc'></div>     
</div>     
<a class="control" id="over_forward"></a>     
<a class="control" id="max_forward"></a>   
<div class='paginator_slider' class='ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all'> <a class='ui-slider-handle ui-state-default ui-corner-all' href='#'></a>   
</div>     
</div>


Адаптация by Apocalypse

ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 04.10.2013 в 16:47
Материал просмотрен: 1474 раза
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта