Прокрутка страниц на сайте uCoz

 
 
 
 
Стандартные переключатели страниц на сайтах uCoz очень неудобны — показываются номера только пары-тройки первых и последних страниц. Читателю сайта, желающему посмотреть какую-нибудь конкретную страницу, например, 56-ю, придётся либо делать на неё закладку, либо листать по очереди все страницы, что очень неудобно.
 
В поисках решения этой проблемы на данный момент есть лишь два варианта — либо вручную проставлять ссылки на все страницы сайта, либо использовать один отличный скрипт, об установке и работе которого я подробно расскажу ниже.
 
Для начала копируете вот этот код:
 
<style>
#pageScroll span {white-space:nowrap}
#pageScroll a{display:inline-block;font:12px Tahoma;width:38px;padding:2px 0;margin:1px;color:#C93624;text-align:center;text-decoration:none;}
#pageScroll a:hover, .curPage{background:#C93624;color:#fff !important;}
#pageScroll {margin:0 auto;overflow:hidden;position:relative;top:-3px;cursor:default}
.scrollWrap {background:#dfdfdf;position:relative}
.scrollBar {background:#777;cursor:pointer;cursor:hand;position:relative;z-index:400}
.scrollPage {background:#C93624;position:absolute;z-index:300;}
.pagesTotal {font:12px Tahoma;color:#bbb}
#pagesBlock1, .pagesBlock1, .pagesBlockuz1 {display:none !important;}
</style>
<div id="pageScroll"><span id="content"></span></div>
<script type="text/javascript" src="http://studioad.ru/PageScroller.js?v2"></script>
<script>initScrolls(15/*количество страниц по ширине*/,5/*высота бара*/,false/*простая прокрутка*/,true/*стрелка*/,true/*всего страниц*/,7/*минимальная ширина бара*/,'Всего страниц : [NUM]')</script>
 
Затем в Панели управления идём в «Управление дизайном сайта» и кликаем на «Новости сайта».
 
 
Здесь в «Странице архива материалов» ставим наш код после слова «BODY».
 
 
Сохраняем изменения, и обновляем страницу новостей своего сайта.
 
 
Вместо прежних переключателей появится вот такая прокрутка. Как мы видим, линейка номеров страниц очень короткая. Удлиняем её, увеличив число выводимых номеров страниц.
 
 
Для этого меняем в коде число страниц до нужного. Сохраняем, обновляем.
 
 
Совсем другой вид! Смотрим далее. Здесь цвет номеров страниц и их фона не совпадает с цветами сайта. Не проблема — поменяем цвета.
 
 
На скрине выше хорошо видно, где нужно менять цвета. Подходящий цвет можно подобрать с помощью, например, замечательной программки HTMLColors2000 (о работе с ней я подробно написал здесь).
 
Сохраняем изменения, обновляем и любуемся единой цветовой композицией прокрутки страниц и самого сайта ;-)
 
 
На скрине выше хорошо показано, как работает прокрутка.
 
Скрипт отображает нумерацию страниц в виде горизонтального списка страниц и скроллбара (стрелочки) с обозначением текущего местонахождения пользователя. Ниже скрипт выводит общее число страниц. Если количество страниц меньше установленного в коде — скроллбар автоматически скроется с экрана.
 
Перемещение по списку номеров страниц происходит с помощью перетаскивания мышкой самого скроллбара со стрелкой (ширина бара рассчитывается в зависимости от соотношения общего числа страниц и числа страниц, отображенных в данный момент), или перемещение может быть осуществлено щелчками по полосе скроллбара в любом месте. Так же, пока мышка находится над списком страниц или скроллбаром, вы можете использовать колёсико для перемещения по списку.
 
В общем, теперь с этой прокруткой можно мгновенно пролистывать перечень номеров страниц и выбирать нужную.
 
Один минус — скрипт работает только в модулях Блог, Новости, Гостевая книга, Комментарии. Причём в Новостях прокрутка работает, начиная со второй страницы.
 
В подготовке этой статьи мне очень помог вот этот материал.
 
 
Примечание от 7.02.2014: К сожалению, этот скрипт не работает в новых адаптивных шаблонах, только в старых табличных.
 
 
 
 
Вы можете отблагодарить меня за эту статью, положив денюжку на Яндекс.Деньги — 41001946245208; Webmoney — RUB - R228675470677, USD - Z403380463613, EUR - E114430860179; моб.тел. 8-985-301-51-80 (МТС).
 
 
 
 
Опубликована: 27.10.2013
Просмотров 2594


Оценка(9)
Оценить статью:  

Комментарии

Гости не могут добавлять комментарии, войдите или зарегистрируйтесь.