Итак, пример навигации вы можете посмотреть на сайте Dirty.Ru в самом низу.. у нас конечно получиться не такая функциональная, но почти... работать будет, но только с некоторыми особенностями..
Начнем:
Для начала подключаем наш скрипт, а именно помещаем следующий код между тегами :
<script type="text/javascript" src="paginator.js"></script>
Следующие что делаем это открываем style.css вашего шаблона вставляем в него следующий css код:
/* Переход по страницам */
.paginator {margin-top:40px; margin-bottom:-5px; font-size:1em; width:650px;}
.paginator table {border-collapse:collapse; table-layout:fixed; width:100%;}
.paginator table td {padding:0; white-space:nowrap; text-align:center;}
.paginator span {display:block; padding:3px 0; color:#fff;}
.paginator span strong,
.paginator span a {padding:4px 6px; font-size: 14px; font-family:Georgia, Arial, Sans-Serif; color:#636363; text-decoration:none;}
.paginator span strong {font-style:normal; font-weight:normal;}
.paginator .scroll_bar {width:100%; height:20px;position:relative;margin-top:10px;}
.paginator .scroll_trough {width:100%;height:3px;background:#ccc;overflow:hidden;}
.paginator .scroll_thumb {position:absolute;z-index:2;width:0; height:3px;top:0; left:0;font-size:1px;background:#363636;}
.paginator .scroll_knob {position:absolute;top:-5px; left:50%;margin-left:-10px;width:20px; height:20px;overflow:hidden;background:url(../images/slider_knob.gif) no-repeat 50% 50%;cursor:pointer; cursor:hand;}
.paginator .current_page_mark {position:absolute;z-index:1;top:0; left:0;width:0; height:3px;overflow:hidden;background: #44ae0b; color:#ffffff }
.fullsize .scroll_thumb {display:none;}
.paginator_pages {width:600px;text-align:right;font-size:0.8em; color:#808080;margin-top:-10px;}
/* Конец перехода по страницам */
Следующие что делаем, это открываем файл шаблона navigation.tpl и вставляем в него следующий код:
<div class="paginator" id="paginator_example"></div>
<div class="ntext">[prev-link]Предыдущая страница[/prev-link] / [next-link]Следующая страница[/next-link]</div><script type="text/javascript">paginator_example = new Paginator("paginator_example", x, y, 1, "http://yoursite.ru/page/" );</script>
Где "yoursite.ru" это адрес вашего сайта, x - общее число страниц, y - число страниц видимых одновременно.
p.s. так же в папку images вашего шаблона надо залить эту картинку:
После того, как заливаем файл Paginator.js в корневую папку вашего сайта, получаем вот это:
Единственная проблема в том, что скрипт не может вести учет общего количества страниц, поэтому число x рекомендуеться ставить на 50 страниц больше чем у вас есть. Если ктонить сможет решить этот вопрос (надеемся на наших суперпрограммеров), будет замечательно! Буду благодарности в карму)
Скачать:
Вы не можете скачивать файлы с нашего сервераВсе вопросы - в комментарии. Все спасибо - в карму)
+23
О пасиб, пойду ставить!
