Переключатели страниц для uCoz
827материалов
228тем на форуме
3004комментария
6161пользователь

Переключатели страниц для uCoz

Красивый, оригинальный и нестандартный переключатель страниц для uCoz. На создания данного решения для uCoz меня немного вдохновил переключатель страниц Яндекса. Подойдет практически для любого сайта, ведь есть цвета!

Установка

Заменяем $PAGE_SELECTOR$ или $PAGE_SELECTOR1$ на:
Код
<div align="center">$PAGE_SELECTOR$</div>
<script>
$('.pagesBlockuz1').removeClass('pagesBlockuz1').addClass('swt5');
$('.swchItem:first-child').removeClass('swchItem').addClass('swt2');
$('.swchItem:last').removeClass('swchItem').addClass('swt3');
$('.swt2').html('Предыдущая')
$('.swt3').html('Следующая')
var page = ("$REQUEST_URI$")
if (page=="/publ/?page$NUM_PAGES$") {
$('.swt3').html($NUM_PAGES$-1)
$('.swt3').removeClass('swt3').addClass('swchItem');
$('.swchItemA:last').removeClass('swchItemA').addClass('swt4');
}
else {}
</script>

Далее, выберите цвет и вставьте стили в тоже место где и сам скрипт выше:

Белый с обводкой

Код
<style>
.swt2 {
-moz-border-radius: 4px 0px 0px 4px;
-webkit-border-radius: 4px 0px 0px 4px;
border-radius: 4px 0px 0px 4px;
background-color: #fff;
padding:7px;
text-align: center;
line-height: 30px;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #E0E0E0;
border-bottom-color: #E0E0E0;
border-left-color: #E0E0E0;
font-size: 13px;
color: #666;
}.swt3 {
-moz-border-radius: 0px 4px 4px 0px;
-webkit-border-radius: 0px 4px 4px 0px;
border-radius: 0px 4px 4px 0px;
background-color: #fff;
padding:7px;
text-align: center;
line-height: 30px;
font-size: 13px;
border: 1px solid #E0E0E0;
margin-left: -4px;
color: #666;
}.swt4 {
-moz-border-radius: 0px 4px 4px 0px;
-webkit-border-radius: 0px 4px 4px 0px;
border-radius: 0px 4px 4px 0px;
background-color: #fff;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 7px;
padding-left: 10px;
text-align: center;
line-height: 30px;
font-size: 13px;
border: 1px solid #E0E0E0;
margin-left: -4px;
color: #666;
}
.swchItem {
font-size: 13px;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #E0E0E0;
border-bottom-color: #E0E0E0;
border-left-color: #E0E0E0;
margin-left: -4px;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 7px;
padding-left: 10px;
color: #666;
}
<?if($REQUEST_URI$='/publ/')?>
.swchItemA { -moz-border-radius: 4px 0px 0px 4px;
-webkit-border-radius: 4px 0px 0px 4px;
border-radius: 4px 0px 0px 4px;
font-size: 13px;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #E0E0E0;
border-bottom-color: #E0E0E0;
border-left-color: #E0E0E0;
margin-left: -4px;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 7px;
padding-left: 10px;
color: #232323;
}
<?else?>
.swchItemA {
font-size: 13px;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #E0E0E0;
border-bottom-color: #E0E0E0;
border-left-color: #E0E0E0;
margin-left: -4px;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 7px;
padding-left: 10px;
color: #232323;
}
<?endif?>
.swt2:hover {
color: #242424;
text-decoration: none;
background-color: #fcfcfc;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;
}.swt3:hover {
color: #242424;
text-decoration: none;
background-color: #fcfcfc;
border: 1px solid #CCC;
}.swchItem:hover {
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CCCCCC;
border-bottom-color: #CCCCCC;
border-left-color: #CCCCCC;
color: #242424;
text-decoration: none;
background-color: #fcfcfc;
}
</style>

Синий

Код
<style>
.swt2 {
-moz-border-radius: 4px 0px 0px 4px;
-webkit-border-radius: 4px 0px 0px 4px;
border-radius: 4px 0px 0px 4px;
background-color: #2880e4;
padding:7px;
text-align: center;
line-height: 30px;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #216abd;
border-bottom-color: #216abd;
border-left-color: #216abd;
font-size: 13px;
color: #fff;
}.swt3 {
-moz-border-radius: 0px 4px 4px 0px;
-webkit-border-radius: 0px 4px 4px 0px;
border-radius: 0px 4px 4px 0px;
background-color: #2880e4;
padding:7px;
text-align: center;
line-height: 30px;
font-size: 13px;
border: 1px solid #216abd;
margin-left: -4px;
color: #fff;
}.swt4 {
-moz-border-radius: 0px 4px 4px 0px;
-webkit-border-radius: 0px 4px 4px 0px;
border-radius: 0px 4px 4px 0px;
background-color: #2880e4;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 7px;
padding-left: 10px;
text-align: center;
line-height: 30px;
font-size: 13px;
border: 1px solid #216abd;
margin-left: -4px;
color: #fff;
}
.swchItem {
background-color: #2880e4;
font-size: 13px;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #216abd;
border-bottom-color: #216abd;
border-left-color: #216abd;
margin-left: -4px;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 7px;
padding-left: 10px;
color: #fff;
}
<?if($REQUEST_URI$='/publ/')?>
.swchItemA { background-color: #2573cc;-moz-border-radius: 4px 0px 0px 4px;
-webkit-border-radius: 4px 0px 0px 4px;
border-radius: 4px 0px 0px 4px;
font-size: 13px;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #216abd;
border-bottom-color: #216abd;
border-left-color: #216abd;
margin-left: -4px;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 7px;
padding-left: 10px;
color: #fff;
}
<?else?>
.swchItemA { background-color: #2573cc;
font-size: 13px;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #216abd;
border-bottom-color: #216abd;
border-left-color: #216abd;
margin-left: -4px;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 7px;
padding-left: 10px;
color: #fff;
}
<?endif?>
.swt2:hover {
color: #fff;
text-decoration: none;
background-color: #2573cc;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #216abd;
border-bottom-color: #216abd;
border-left-color: #216abd;
}.swt3:hover {
color: #fff;
text-decoration: none;
background-color: #2573cc;
border: 1px solid #216abd;
}.swchItem:hover {
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #216abd;
border-bottom-color: #216abd;
border-left-color: #216abd;
color: #fff;
text-decoration: none;
background-color: #2573cc;
}
</style>

Зеленый

Код
<style>
.swt2 {
-moz-border-radius: 4px 0px 0px 4px;
-webkit-border-radius: 4px 0px 0px 4px;
border-radius: 4px 0px 0px 4px;
background-color: #54c29f;
padding:7px;
text-align: center;
line-height: 30px;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #429a7e;
border-bottom-color: #429a7e;
border-left-color: #429a7e;
font-size: 13px;
color: #fff;
}.swt3 {
-moz-border-radius: 0px 4px 4px 0px;
-webkit-border-radius: 0px 4px 4px 0px;
border-radius: 0px 4px 4px 0px;
background-color: #54c29f;
padding:7px;
text-align: center;
line-height: 30px;
font-size: 13px;
border: 1px solid #429a7e;
margin-left: -4px;
color: #fff;
}.swt4 {
-moz-border-radius: 0px 4px 4px 0px;
-webkit-border-radius: 0px 4px 4px 0px;
border-radius: 0px 4px 4px 0px;
background-color: #54c29f;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 7px;
padding-left: 10px;
text-align: center;
line-height: 30px;
font-size: 13px;
border: 1px solid #429a7e;
margin-left: -4px;
color: #fff;
}
.swchItem {
background-color: #54c29f;
font-size: 13px;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #429a7e;
border-bottom-color: #429a7e;
border-left-color: #429a7e;
margin-left: -4px;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 7px;
padding-left: 10px;
color: #fff;
}
<?if($REQUEST_URI$='/publ/')?>
.swchItemA {
background-color: #4bad8e;
-moz-border-radius: 4px 0px 0px 4px;
-webkit-border-radius: 4px 0px 0px 4px;
border-radius: 4px 0px 0px 4px;
font-size: 13px;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #429a7e;
border-bottom-color: #429a7e;
border-left-color: #429a7e;
margin-left: -4px;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 7px;
padding-left: 10px;
color: #fff;
}
<?else?>
.swchItemA {
background-color: #4bad8e;
font-size: 13px;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #429a7e;
border-bottom-color: #429a7e;
border-left-color: #429a7e;
margin-left: -4px;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 7px;
padding-left: 10px;
color: #fff;
}
<?endif?>
.swt2:hover {
color: #fff;
text-decoration: none;
background-color: #4bad8e;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #429a7e;
border-bottom-color: #429a7e;
border-left-color: #429a7e;
}.swt3:hover {
color: #fff;
text-decoration: none;
background-color: #4bad8e;
border: 1px solid #429a7e;
}.swchItem:hover {
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #429a7e;
border-bottom-color: #429a7e;
border-left-color: #429a7e;
color: #fff;
text-decoration: none;
background-color: #4bad8e;
}
</style>

Белый

Код
<style>
.swt2 {
-moz-border-radius: 4px 0px 0px 4px;
-webkit-border-radius: 4px 0px 0px 4px;
border-radius: 4px 0px 0px 4px;
background-color: #fff;
padding:7px;
text-align: center;
line-height: 30px;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #fff;
border-bottom-color: #fff;
border-left-color: #fff;
font-size: 13px;
color: #666;
}.swt3 {
-moz-border-radius: 0px 4px 4px 0px;
-webkit-border-radius: 0px 4px 4px 0px;
border-radius: 0px 4px 4px 0px;
background-color: #fff;
padding:7px;
text-align: center;
line-height: 30px;
font-size: 13px;
border: 1px solid #fff;
margin-left: -4px;
color: #666;
}.swt4 {
-moz-border-radius: 0px 4px 4px 0px;
-webkit-border-radius: 0px 4px 4px 0px;
border-radius: 0px 4px 4px 0px;
background-color: #fff;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 7px;
padding-left: 10px;
text-align: center;
line-height: 30px;
font-size: 13px;
border: 1px solid #fff;
margin-left: -4px;
color: #666;
}
.swchItem {
background-color: #fff;
font-size: 13px;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #fff;
border-bottom-color: #fff;
border-left-color: #fff;
margin-left: -4px;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 7px;
padding-left: 10px;
color: #666;
}
<?if($REQUEST_URI$='/publ/')?>
.swchItemA {
background-color: #fff;
-moz-border-radius: 4px 0px 0px 4px;
-webkit-border-radius: 4px 0px 0px 4px;
border-radius: 4px 0px 0px 4px;
font-size: 13px;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #fff;
border-bottom-color: #fff;
border-left-color: #fff;
margin-left: -4px;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 7px;
padding-left: 10px;
color: #232323;
}
<?else?>
.swchItemA {
background-color: #fff;
font-size: 13px;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #fff;
border-bottom-color: #fff;
border-left-color: #fff;
margin-left: -4px;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 7px;
padding-left: 10px;
color: #232323;
}
<?endif?>
.swt2:hover {
color: #242424;
text-decoration: none;
background-color: #F7F7F7;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #fff;
border-bottom-color: #fff;
border-left-color: #fff;
}.swt3:hover {
color: #242424;
text-decoration: none;
background-color: #F7F7F7;
border: 1px solid #fff;
}.swchItem:hover {
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #fff;
border-bottom-color: #fff;
border-left-color: #fff;
color: #242424;
text-decoration: none;
background-color: #F7F7F7;
}
</style>

Черный

Код
<style>
.swt2 {
-moz-border-radius: 4px 0px 0px 4px;
-webkit-border-radius: 4px 0px 0px 4px;
border-radius: 4px 0px 0px 4px;
background-color: #2f2f2f;
padding:7px;
text-align: center;
line-height: 30px;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #212121;
border-bottom-color: #212121;
border-left-color: #212121;
font-size: 13px;
color: #fff;
}.swt3 {
-moz-border-radius: 0px 4px 4px 0px;
-webkit-border-radius: 0px 4px 4px 0px;
border-radius: 0px 4px 4px 0px;
background-color: #2f2f2f;
padding:7px;
text-align: center;
line-height: 30px;
font-size: 13px;
border: 1px solid #212121;
margin-left: -4px;
color: #fff;
}.swt4 {
-moz-border-radius: 0px 4px 4px 0px;
-webkit-border-radius: 0px 4px 4px 0px;
border-radius: 0px 4px 4px 0px;
background-color: #2f2f2f;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 7px;
padding-left: 10px;
text-align: center;
line-height: 30px;
font-size: 13px;
border: 1px solid #212121;
margin-left: -4px;
color: #fff;
}
.swchItem {
background-color: #2f2f2f;
font-size: 13px;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #212121;
border-bottom-color: #212121;
border-left-color: #212121;
margin-left: -4px;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 7px;
padding-left: 10px;
color: #fff;
}
<?if($REQUEST_URI$='/publ/')?>
.swchItemA {
background-color: #2f2f2f;
-moz-border-radius: 4px 0px 0px 4px;
-webkit-border-radius: 4px 0px 0px 4px;
border-radius: 4px 0px 0px 4px;
font-size: 13px;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #212121;
border-bottom-color: #212121;
border-left-color: #212121;
margin-left: -4px;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 7px;
padding-left: 10px;
color: #fff;
}
<?else?>
.swchItemA {
background-color: #2f2f2f;
font-size: 13px;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #212121;
border-bottom-color: #212121;
border-left-color: #212121;
margin-left: -4px;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 7px;
padding-left: 10px;
color: #fff;
}
<?endif?>
.swt2:hover {
color: #fff;
text-decoration: none;
background-color: #191919;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #191919;
border-bottom-color: #191919;
border-left-color: #191919;
}.swt3:hover {
color: #fff;
text-decoration: none;
background-color: #191919;
border: 1px solid #191919;
}.swchItem:hover {
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #191919;
border-bottom-color: #191919;
border-left-color: #191919;
color: #fff;
text-decoration: none;
background-color: #191919;
}
</style>

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

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

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

3 комментария


Valera
Красивые переключатели, зеленый прям мне в дизайн в писался.
Romchik
Роман @Romchik 28.06.2015 03:102
0
Ищем $PAGE_SELECTOR$  или $PAGE_SELECTOR1$
Stefan
Г Валера @Stefan 18.09.2015 22:043
+1
Супер
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта