spekalsg3.github.io/SliderPlugin - демонстрационная страница
-
Разметка для слайдера должна быть в следующем виде:
<div> <!-- Основной контейнер слайдера --> <div> <!-- Полоска слайдера --> <div></div> <!-- Закрашенная часть --> </div> <div> <!-- Указатель --> <div> <!-- Подсказка над указателем --> <div></div> <!-- Стрелочка подсказки --> <div></div> <!-- Блок для значений --> </div> </div> <div> <!-- Подпись оси числами --> </div> </div>Можно задать свои стили, но должно быть 2 отдельных стиля для вертикальной и горизонтальной ориентации - row и column соотвественно, чтобы изменив стиль на противоположный соотвественно изменился и вид.
Или же можно использовать готовые стили из файла "SliderPlugin.css" и использовать их надо следующим образом:<div class="slider"> <div class="bar"> <div class="colored"></div> </div> <div class="pointer"> <div class="hint"> <div class="arrow"></div> <div class="value"></div> </div> </div> <div class="hud"> </div> -
С подключенным файлом "jQuery.js" и "SliderPlugin.js", выбрать слайдер с помощью jQuery функции $, вызвать у него функцию "AnimateSlider" и передать в нее объект с параметрами, которые надо установить. Вот список возможны параметров и значений:
{
min: *целое число*,
max: *целое число*,
step: *целое число больше 0*,
startingPoint: *целое число*,
orientation: "row" или "column",
color: *цвет в HEX коде*,
hint: true или false,
hud: true или false,
interval: *целое число больше 0*,
track: true или false
}
Архитектура проекта состоит из 3 основных компонентов: Контроллер, Представление и Модель.
- Контроллер SliderController занимается обработкой событий и связывает представление и модель.
- Представление SliderView взаимодействует с DOM - только через него проходят изменения элементов. Также занимается подключением обработчиков событий, однако обрабатывает их только Контроллер
- Модель SliderModel обрабатывает и хранит данные о слайдере (шаг, начальное значение, цвет и т.д.).
Помимо основных компонентов есть еще класс Событие (Event), который "ловит" действие пользователя и вызывает нужную функцию.
Конструктор этого класса создает массив функций обработчиков.
С помощью метода "add", в массив обработчиков можно добавить нужный обработчик.
С помощью метода "manage", вызываются обработчики.
Представление занимается подключением обработчиков и изменение элементов DOM.
Конструктор принимает элемент, с которым этот модуль будет работать, и подключает обработчики с помощью событий. Он также создает пустую функцию у элемента "onChangingParameters", которая будет вызываться при использовании функции "set" у Контроллера.
Задается метод "renderMove" для отображение изменений.
Задаются методы для внешних изменений слайдера: цвет, подпись оси, след за бегунком и подсказка над ним.
Модель отвечает за параметры слайдера: позиция, шаг, цвет, ориентация; и промежуточные значения для рассчетов. Конструктор принимает объект с параметрами слайдера.
Задается метод "setStep" для установления нового значения шага.
Задается метод "getModelData", который возращает данные в виде объекта для вычисления позиции слайдера при взаимодействии с ним.
Задается метод "getHudSettings", который возращает данные в виде объекта для изменения подписи оси.
Задается метод "get" для получения значений из модели.
Контроллер взаимодействует с представлением и моделью.
Эти модели имеются принимаются как аргументы в конструкторе. Конструктор использвует инверсию управления - модули внедряются в него.
Задается метод "init" выставляет начальное положение слайдера, устанавливает его ориентацию и передает в События в Представление функции обработчики.
Задаются обработчики события нажатия на мышь, передвижение мыши, отжатие мыши и отведение мышки от слайдера.
Задается метод "set" для изменения параметров слайдера на принятые значения в виде объекта вида {параметр: значение} и сами функции для установки параметров слайдера (ориентация, цвет и т.д.). Если параметр существует, то выполняется установленный у элемента обраотчик "onChangingParameters", куда передается объект:
{
parameter: *название параметра*,
parameterIndex: *номер параметра по списку*,
fromValue: *значение, которое было установленнно до применеия функции*,
toValue: *значение, которое устанавливают*,
}
Функция AnimateSlider вызывается у элементов jQuery найденных с помощью функции $. AnimateSlider принимает объект с параметрами слайдера:
- min (целое натуральное число) - минимальное значение слайдера;
- max (целое натуральное число) - максимальное значение;
- step (целое натуральное число) - размер шага;
- startingPoint (целое натуральное число) - начальное значение слайдера;
- orientation ("column" || "row") - вертикальный или горизонтальный вид слайдер соотвественно;
- color (HEX code) - цвет бегунка, подсказки над ним и следа за бегунокм;
- hint (true || false) - показывать или не показывать подсказку над бегунком соотвественно;
- hud (true || false) - показывать или не показывать подпись оси соотвественно;
- interval (целое натуральное число) - количество чисел для подписи оси;
- track (true || false) - показывать или не показывать след за бегунком соотвественно.
{
min: 0,
max: 100,
step: 1,
startingPoint: this.min,
orientation: "row",
color: "#e85f3e",
hint: true,
hud: true,
interval: 5,
track: true
}
Модули сильно различаются по уровням асбтракции. Контроллер заботиться обо всех вычислениях, изменениях, обработки событиях. Модель занимается хранением и предаставлением контроллеру данных. Представление - подключает обработчики и дает контроллеру доступ к элементу. Событие - самый маленький класс, только вызывающий функции у нужного обработчика.
