Постраничная навигация. Часть 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, но для наших целей подойдет идеально.

Подготовка

Для начала скачаем все необходимое для виджета scroll bar. На странице настраиваемой закачки  jQuery UI кликнем по ссылке Deselect all component, чтобы не закачивать лишнее. Поскольку нам нужен лишь slider, то выберем его. С ним так же отметится и чекбокс UI Core, поскольку он необходим для работы слайдера. Так же, справа можно выбрать тему оформления.

Скачанный архив распакуем в нужное место. В каталоге css, как видно, лежит папка, с названием выбранной темы. Для удобства, все файлы из нее можно перенести в корневой каталог – css.

Создадим  новую html страничку, с которой поначалу и будем, в основном работать. В раздел head подключим скачанные файлы:

Виджет Slider (jQuery UI)

Прежде чем перейти к разработке самого скрипта постраничной навигации, разберемся сначала с виджетом Slider. Вообще, этот виджет делает из обычного div'a шкалу с ползунком, который можно перетаскивать:

Начать работу с виджетом очень просто, так как нет почти никаких требований к html разметки – только пустой div:

Связать сам виджет с дивом тоже просто:

Рассмотрим основные опции виджета.

Max - максимальное значение шкалы. По умолчанию – 100.

Min - минимальное значение шкалы. По умолчанию – 0.

Animate – параметр, определяющий, будет ли бегунк менять свое положение с анимацией или без. По умолчанию – false (не анимированный).

Step  – шаг изменения бегунка. По умолчанию – 1.

Value – текущее положение бегунка на шкале. Значение по умолчанию – 0.

К примеру, следующий код приведет к тому, что бегунк будет пробегать значения от 20 до 200, при этом шаг изменения будет равен десяти:

Теперь, можно перейти к событиям слайдера.

Для начала рассмотрим пример

Как видно тут значением опции stop является некоторая функция, которая будет вызываться по окончании перемещения бегунка. Принимает два параметра: event – собственно, само событие, и ui – ui объект, свойства которого позволяют получить текущее положение бегунка.

Рассмотрим далее основные описания событий слайдера и названия опций, в которых можно определять функции, вызываемые при наступлении соответствующих событий.

Slide (событие slide) – событие, происходящее при перемещении бегунка.

Start (событие slidestart) – происходит в момент начала перетаскивания бегунка.

Stop (событие stop) – происходит при окончании перемещения бегунка.

Сhange  (событие slidechange) – происходит либо по окончании перемещения бегунка, либо, если его значение было изменено программно.

Основы работы с виджетом Slider мы разобрали. Некоторые методы рассмотрим уже в процессе работы над скриптом.

HTML разметка

Теперь рассмотрим html разметку нашей постраничной навигации. В общем, все довольно просто. Нужен один общий div, своего рода обертка для ссылок и слайдера. Назовем его mainBlock. Так же нужен div, в котором, собственно, и будут лежать ссылки.  Его можно назвать linkBlock. Ну и div для слайдера – sliderPlace.

Особых требований к ссылкам, которые будут лежать в linkBlock нет. Главное, что бы они были фиксированной ширины и выстроены в строку. К слову говоря, даже не обязательно, что бы это были именно ссылки (тег “a”).

К css, в общем-то требований нет. Единственное, можно задать для linkBlock и mainBlock overflow: hidden и желаемую высоту (ширину будет контролировать скрипт)...

На это, с перовой частью цикла статей можно закончить. В следующей части мы приступим непосредственно к написанию скрипта.