Красивый, оригинальный и нестандартный переключатель страниц для 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>
Ещё стили следующем посте.
){kind=link}