Posted on

Конструктор 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.

Напишіть відгук

Ваша пошт@ не публікуватиметься. Обов’язкові поля позначені *