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

JavaScript: Постраничная навигация +

1

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

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

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

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

#blocks_place {
height: 30px;
padding: 0;
overflow: hidden;
}

#link_block {
height: 30px;
overflow: hidden;
}

#link_block a {
margin-right: 6px;
float: left;
height: 20px;
overflow: hidden;
width: 40px;
text-align: center;
padding-top: 3px;
color: #000;
font-family: arial;
font-size: 12px;
background-color: #eee;
}
Создадим в папке js новый файл st-paginator.js. В нем и будет код скрипта постраничной навигации. Подключим этот файл в разделе head.


StPaginator

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

function StPaginator( settings ) {

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

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

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

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

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

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

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

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

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

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

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

function StPaginator( settings ) {
settings.visible = settings.visible || 11;
settings.current = settings.current || 1;

function construct() {

}

return new construct();
}

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

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