Опубликовано

Функция positionCurrentPage в JavaScript +

3

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

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

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

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

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

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

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

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

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

function positionCurrentPage( page )
{
var border = settings.count — settings.visible + 1;
var startPos = page — Math.floor(settings.visible / 2);

if ( ( border >= startPos ) && ( startPos > 0 ) ) {
settings.linkBlock.css(«margin-left», -(startPos — 1) * settings.width);
}
else if ( ( border < startPos ) ) {
settings.linkBlock.css(«margin-left», -( border — 1 ) * settings.width);
}

settings.sliderPlace.slider(«value», startPos — 1 );
}

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

$(function() {
var paginator = new StPaginator(
{
width: 46,
count: 200,
mainBlock: $(‘#blocks_place’),
linkBlock: $(‘#link_block’),
sliderPlace: $(‘#slider’)
});
});

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *