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

Конструктор JavaScript +

1

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

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

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

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

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

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

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

function construct() {
// Ширина блока ссылок
var linkBlockWidth = settings.count * settings.width;
// Ширина видимого блока
var visibleBlockWidth = settings.visible * settings.width;
// Ширина блока ссылок за вычетом ширины выдимого блока
var restBlockWidth = linkBlockWidth — visibleBlockWidth;
// Максимальнре значение шкалы
var maxSlide = restBlockWidth / settings.width;

settings.linkBlock.css(«width», linkBlockWidth + «px»);
settings.linkBlock.css(«overflow», «hidden»);
settings.mainBlock.css(«width», visibleBlockWidth + «px»);
settings.mainBlock.css(«overflow», «hidden»);
settings.sliderPlace.css(«width», visibleBlockWidth + «px»);

// Если общее количество ссылок больше чем видимое
if ( settings.count > settings.visible ) {
// Тогда создается слайдер
settings.sliderPlace.slider({
max: maxSlide,
slide: function(e, ui){
settings.linkBlock.css(«margin-left», «-» + ( ui.value * settings.width ) + «px»);
}
});
// Отображаем текущую страницу в центре
positionCurrentPage( settings.current );
}

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

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

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