JavaScript::Постраничная навигация. Часть 2

Ранее, в цикле статей, посвященных созданию скрипта постраничной навигации на основе scroll bar'a, были рассмотрены основные требования и выбрана наиболее оптимальная html разметка для пагинатора. В данной заключительной статье мы напишем сам скрипт.

Для начала, нам нужно подготовить место для тестирования. Если есть возможность работать с php, то лучше изменить разрешение созданной нами ранее html странички на .php, и закинуть ее вместе со всеми файлами на сервер.

Поместим в body следующий код:

  1. <div id="blocks_place">
  2.     <div id="link_block">
  3.         <?php
  4.         for ( $i = 1; $i <= 200; $i++ ) {
  5.             echo '<a href="#">' . $i . '</a>';
  6.         }
  7.         ?>
  8.     </div>
  9. </div>
  10. <div id="slider"></div>

Как видно, это разметка удовлетворяет требованиям, поставленным в первой части цикла. Также для удобства тестирования, при  помощи php, создается 200 ссылок на страницы.

Для нормального внешнего вида добавим стили:

  1. #blocks_place {
  2.     height: 30px;
  3.     padding: 0;
  4.     overflow: hidden;
  5. }
  6.  
  7. #link_block {
  8.     height: 30px;
  9.     overflow: hidden;
  10. }
  11.  
  12. #link_block a {
  13.     margin-right: 6px;
  14.     float: left;
  15.     height: 20px;
  16.     overflow: hidden;
  17.     width: 40px;
  18.     text-align: center;
  19.     padding-top: 3px;
  20.     color: #000;
  21.     font-family: arial;
  22.     font-size: 12px;
  23.     background-color: #eee;
  24. }

Создадим в папке js новый файл st-paginator.js. В нем и будет код скрипта постраничной навигации. Подключим этот файл в разделе head.

  1. <script src="js/st-paginator.js" type="text/javascript"></script>

StPaginator

Перейдем непосредственно, к написанию скрипта. В файле st-paginator.js создадим функцию StPaginator, она будет принимать объект settings.

  1. function StPaginator( settings ) {
  2.  
  3. }

Рассмотрим свойства принимаемого объекта.

Count – общее количество страниц.

Visible – количество ссылок на страницы, отображаемых одновременно. Параметр необязательный, по умолчанию – 11.

Width – ширина ссылки на страницу, с учетом всех отступов (в пикселях).

Current – номер текущей страницы. Необязательный, по умолчанию – 1...

php, jquery, javascript
3 0 01 августа 2010 | Постраничная навигация

JavaScript::Постраничная навигация. Часть 1

В этом цикле статей мы рассмотрим довольно интересную и необычную реализацию постраничной навигации. За основу, и в качестве основного идейного вдохновителя взят Paginator 3000. Основным минусом этого пагинатора являлось, то, что все ссылки создаются при помощи JS и поисковики не могут их индексировать.

В нашей реализации постраничной навигации такой проблемы не будет (хотя появятся другие :)). Посмотрим сразу, на примере, что мы хотим получить: http://st-programming.ru/paginator/index.php Тут из простого xml файла, постранично выводятся цитаты на программистскую  тематику.

Основные требования

Рассмотрим, что же в итоге нужно от скрипта:

  • Навигация на основе scroll bar'a;
  • Ссылки на страницы должны видеть поисковики;
  • По возможности, ссылка на текущую страницу должна выводиться в центре, дабы избежать лишних прокруток;
  • Внешний вид ссылок и scroll bar'a можно легко изменить при помощи css;
  • Количество отображаемых ссылок можно задать;
  • Скрипт должно быть легко встраиваться в страницу;

Реализация

После того как сформировали требования рассмотрим общие вопросы реализации. Так как, ссылки должны видеть поисковики, нужно что бы они были прописаны напрямую в html коде страницы, а не создавались через JavaScript. То есть, скрипт, в общем-то никак не должен влиять ни на разметку, ни на внешний вид ссылок. Об этом должен позаботится сам разработчик.

Что бы облегчить работу, будем использовать фреймворк JQuery. Так же, scrollbar возьмем из JQuery UI, точнее там называется slider, но для наших целей подойдет идеально...

jquery, javascript
3 2 26 июля 2010 | Постраничная навигация