ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Светлый стиль Переключатель страниц файлов uCoz

Светлый стиль Переключатель страниц файлов uCoz

Светлый стиль Переключатель страниц файлов uCoz
Во первых они созданы красиво и по своему функционален Переключатель страниц файлов uCoz так как можно сделать чтоб было расположение как оригинально. Но можно сделать один клик и они все открываются и вы можете перейти перепрыгнув много страниц.

Если стандартом идет и вы начинаете переходить и только через 2 кнопки переход производиться, здесь как уже было сказано можно сделать быстрей. Но по умолчанию будет стоять как на всех порталах. Это можете только вы сделать а точнее развернуть их. Но и дизайн у них, думаю согласитесь красив и оригинален.

Установка:

Каталога файлов, где есть переключатели, замените $PAGE_SELECTOR$ на:
Код
<style>  
.aponewselect {  
white-space:normal;  
width:500px;  
}  

.swchItem, .swchItemA, .swchItemDots {  
padding:1px 3px 1px 3px;  
margin-right:3px;  
margin-bottom:2px !important;  
background:rgba(220, 220, 220, 0.8);  
border-top:1px solid #aaa;  
border-left:1px solid #aaa;  
border-right:1px solid #eee;  
border-bottom:1px solid #eee;  
border-radius:2px;  
min-width:20px;  
height:15px;  
text-align:center;  
cursor:pointer;  
transition: border .3s linear, background .2s linear;  
-moz-transition: border .3s linear, background .2s linear;  
-webkit-transition: border .3s linear, background .2s linear;  
-o-transition: border .3s linear, background .2s linear;  
text-decoration:none !important;  
color:#777 !important;  
float:left;  
}  

.swchItemA, .swchItemDots {  
background:rgba(240, 220, 220, 0.8);  
}  

.swchItem:hover {  
border-bottom:1px solid #999;  
border-right:1px solid #999;  
border-top:1px solid #eee;  
border-left:1px solid #eee;  
background:rgba(220, 245, 220, 0.8);  
}  

.swchItem:active {  
border-bottom:1px solid #ddd;  
border-right:1px solid #ddd;  
border-top:1px solid #eee;  
border-left:1px solid #eee;  
background:rgba(220, 240, 220, 0.8);  
}  
</style>  

<div class="aponewselect">$PAGE_SELECTOR$</div>  

<script>  
// VecKTroN (c) 2014  
$('div.aponewselect').prepend('<a class="swchItem" href="javascript://" onclick="$(\'a#aposwitchnew\').remove();$(\'span.swchItemDots\').show();return false;">×</a>');  
$('span.swchItemDots').click(function() {  
var apothisprev = parseInt($(this).prev().text()) + 1;  
var apothisnext = parseInt($(this).next().text());  
for(i=apothisprev;i<apothisnext;i++) {  
$(this).before('<a class="swchItem" id="aposwitchnew" style="display:none;" href="javascript://" rel="nofollow" onclick="spages(' + i + ');return false;">' + i + '</a>');  
}  
$(this).hide();  
$('a.swchItem').fadeIn();  
});  
// vecktron.clan.su/ (c) 2014  
</script>

Стили уже прописаны в коде и не нужно не чего прописывать в CSS:
16 Августа 2014 Просмотров: 2693 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 0
avatar