Постраничная навигация. Часть 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.

mainBlock – объект jQuery. Обертка для блока ссылок.

linkBlock – объект jQuery. Блок, в котором лежат ссылки на страницы.

sliderPlace – объект jQuery. Блок для слайдера.

Поскольку Current и Visible опции необязательные, то для них нужно определить значение по умолчанию:

  1. function StPaginator( settings ) {
  2.     settings.visible = settings.visible || 11;
  3.     settings.current = settings.current || 1;
  4. }

Теперь, в StPaginator добавим новую функцию-член – construct. Своего рода конструктор создаваемого объекта постраничной навигации.

  1. function StPaginator( settings ) {
  2.     settings.visible = settings.visible || 11;
  3.     settings.current = settings.current || 1;
  4.  
  5.     function construct() {
  6.  
  7.     }
  8.  
  9.     return new construct();
  10. }

Конструктор

Именно, в функции construct и будет основная часть скрипта. Рассмотрим поэтапно, что здесь будет происходить.

Для начала нам нужно задать ширину блока ссылок. Здесь, смысл в том, что бы все ссылки были в одной строке, для облегчения их скроллинга. Найти такую ширину довольно просто: количество страниц умножить на ширину ссылки на страницу. Правда, тут уже возникает проблема. Дело в том, что Опера хранит числовые значения как 16 битные числа, и, следовательно, ширина блока не может быть больше 32767 px. Конечно, это не так уж и мало, более 1000 ссылок при ширине в 30px, но все равно, не очень удобно.

Также нужно задать ширину mainBlock – обертки для блока ссылок. Смысл этого блока в том, что он служит как бы окном для ссылок. Лучше всего это понятно по картинке:

Видна лишь часть блока ссылок, которая находится в mainBlock, остальное как бы скрыто. То есть, при перемещении слайдера двигается только linkBlock, а mainBlockостается на месте.  Следовательно, ширина обертки для блока ссылок должна быть такой, что бы были видны только ссылки, отображаемые одновременно (свойство visible принимаемого объекта).

Ширина слайдера должны быть такой же, как и mainBlock.

Кроме того, необходимо определить максимальное значение шкалы слайдера. Это будет ширина блока ссылок за вычетом ширины mainBlock’a, поделенное на ширину ссылки. Таким образом, мы обеспечим скроллинг по ширине одной ссылке.

В итоге, получим следующую функцию:

  1. function construct() {
  2.     // Ширина блока ссылок
  3.     var linkBlockWidth = settings.count * settings.width;
  4.     // Ширина видимого блока
  5.     var visibleBlockWidth = settings.visible * settings.width;
  6.     // Ширина блока ссылок за вычетом ширины выдимого блока
  7.     var restBlockWidth = linkBlockWidth - visibleBlockWidth;
  8.     // Максимальнре значение шкалы
  9.     var maxSlide = restBlockWidth / settings.width;
  10.  
  11.     settings.linkBlock.css("width", linkBlockWidth + "px");
  12.     settings.linkBlock.css("overflow", "hidden");
  13.     settings.mainBlock.css("width", visibleBlockWidth + "px");
  14.     settings.mainBlock.css("overflow", "hidden");
  15.     settings.sliderPlace.css("width", visibleBlockWidth + "px");
  16.  
  17.     // Если общее количество ссылок больше чем видимое
  18.     if ( settings.count > settings.visible ) {
  19.         // Тогда создается слайдер
  20.         settings.sliderPlace.slider({
  21.             max: maxSlide,
  22.             slide: function(e, ui){
  23.                 settings.linkBlock.css("margin-left", "-" + ( ui.value * settings.width ) + "px");
  24.             }
  25.         });
  26.         // Отображаем текущую страницу в центре
  27.         positionCurrentPage( settings.current );
  28.     }
  29.  
  30. }

Передвижение блока ссылок осуществляется просто изменением свойства «margin-left», в обработчике события slide.

Функция positionCurrentPage

Так же, добавим еще одну функцию – positionCurrentPage. Она будет принимать номер текущей страницы и выставлять ее по центру блока ссылок.

Нам нужны две основных локальных переменных:

startPos – начальная позиция. Так как некоторую страницу нужно показать в центре, то нужно определить и первую ссылку. Формула довольно проста. Сначала нужно разделить количество видимых страниц на два, потом из номера переданной страницы вычесть это число. Таким образом, будет получен номер страницы с краю видимого блока.

border – своего рода некоторая граница. Страница, на которой заканчивается скроллинг. То есть, когда бегунок слайдера передвинут максимально вправо, то эта переменная будет равна номеру самой крайней левой ссылке. Определяется тоже просто: из общего количества страниц вычесть количество видимых, и прибавить единицу.

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

Первый, это если startPos меньше либо равно нулю. То есть страница лежит в диапазоне от 1 до центра видимой области. Этот случай вообще никак не обрабатывается.

Второй, если startPos больше нуля, но меньше border. В этом случае, ее как раз и надо центрировать.

И, наконец, третий, когда ссылка больше border. В этом случае, блок ссылок нужно передвинуть максимально вправо.

В конечном итоге, функция выглядит так:

  1. function positionCurrentPage( page )
  2. {
  3.     var border = settings.count - settings.visible + 1;
  4.     var startPos = page - Math.floor(settings.visible / 2);
  5.  
  6.     if ( ( border >= startPos ) && ( startPos > 0 ) ) {
  7.         settings.linkBlock.css("margin-left", -(startPos - 1) * settings.width);
  8.     }
  9.     else if ( ( border < startPos )  ) {
  10.         settings.linkBlock.css("margin-left", -( border - 1 ) * settings.width);
  11.     }
  12.  
  13.     settings.sliderPlace.slider("value", startPos - 1 );
  14. }

На этом, написание скрипта постраничной навигации можно и закончить. Для тестирования, как он работает, встроим его на нашу тестовую страничку:

  1. $(function() {
  2.    var paginator = new StPaginator(
  3.     {
  4.         width: 46,
  5.         count: 200,
  6.         mainBlock: $('#blocks_place'),
  7.         linkBlock: $('#link_block'),
  8.         sliderPlace: $('#slider')
  9.     });
  10. });

Скачать скрипт

Скачать пример с цитатами из xml файла

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

Комментарии (0)

Добавить комментарий

  • Допустимые html-теги:
    <b> </b> - жирный шрифт
    <em> </em> - наклонный
    <s> </s> - зачеркнутый
    <pre> </pre> - сохранение отступов (печать кода)
    [?]
Введите текст с картинки