Skip to content

Commit

Permalink
Added instruction how to work with plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
SpekalsG3 committed May 29, 2019
1 parent cae56dc commit 026eaa4
Showing 1 changed file with 72 additions and 6 deletions.
78 changes: 72 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,72 @@
<p>
<h2>Документация к плагину</h2>

<hr>

<p>
<h4>Как работать с этим плагином?</h4>
<ol>
<li>
Разметка для слайдера должна быть в следующем виде:

<div> <!-- Основной контейнер слайдера -->

<div> <!-- Полоска слайдера -->
<div></div> <!-- Закрашенная часть -->
</div>

<div> <!-- Указатель -->
<div> <!-- Подсказка над указателем -->
<div></div> <!-- Стрелочка подсказки -->
<div></div> <!-- Блок для значений -->
</div>
</div>

<div> <!-- Подпись оси числами -->
</div>

</div>

Можно задать свои стили, но должно быть 2 отдельных стиля для вертикальной и горизонтальной ориентации - row и column соотвественно, чтобы изменив стиль на противоположный соотвественно изменился и вид.<br>
Или же можно использовать готовые стили из файла "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>
</li>
<li>
С подключенным файлом "jQuery.js" и "SliderPlugin.js", выбрать слайдер с помощью jQuery функции $, вызвать у него функцию "AnimateSlider" и передать в нее объект с параметрами, которые надо установить. Вот список возможны параметров и значений:<br>
{<br>
&nbsp;min: *<i>целое число</i>*,<br>
&nbsp;max: *<i>целое число</i>*,<br>
&nbsp;step: *<i>целое число больше 0</i>*,<br>
&nbsp;startingPoint: *<i>целое число</i>*,<br>
&nbsp;orientation: "row" <i>или</i> "column",<br>
&nbsp;color: *<i>цвет в HEX коде</i>*,<br>
&nbsp;hint: true <i>или</i> false,<br>
&nbsp;hud: true <i>или</i> false,<br>
&nbsp;interval: *<i>целое число больше 0</i>*,<br>
&nbsp;track: true <i>или</i> false<br>
}
</li>
</ol>
</div>
</p>

<hr>
<h4>Архитектура</h4>
Архитектура проекта состоит из 3 основных компонентов: Контроллер, Представление и Модель.
<ul>
<li><b>Контроллер</b> SliderController занимается обработкой событий и связывает представление и модель.</li>
Expand Down Expand Up @@ -40,13 +106,13 @@
<p>
<h4>Модель</h4>
Модель отвечает за параметры слайдера: позиция, шаг, цвет, ориентация; и промежуточные значения для рассчетов.
Конструктор принимает json объект с параметрами слайдера.
Конструктор принимает объект с параметрами слайдера.

Задается метод "setStep" для установления нового значения шага.

Задается метод "getModelData", который возращает данные в виде json объекта для вычисления позиции слайдера при взаимодействии с ним.
Задается метод "getModelData", который возращает данные в виде объекта для вычисления позиции слайдера при взаимодействии с ним.

Задается метод "getHudSettings", который возращает данные в виде json объекта для изменения подписи оси.
Задается метод "getHudSettings", который возращает данные в виде объекта для изменения подписи оси.

Задается метод "get" для получения значений из модели.
</p>
Expand All @@ -63,7 +129,7 @@

Задаются обработчики события нажатия на мышь, передвижение мыши, отжатие мыши и отведение мышки от слайдера.

Задается метод "set" для изменения параметров слайдера на принятые значения в виде json объекта вида {параметр: значение} и сами функции для установки параметров слайдера (ориентация, цвет и т.д.). Если параметр существует, то выполняется установленный у элемента обраотчик "onChangingParameters", куда передается объект:
Задается метод "set" для изменения параметров слайдера на принятые значения в виде объекта вида {параметр: значение} и сами функции для установки параметров слайдера (ориентация, цвет и т.д.). Если параметр существует, то выполняется установленный у элемента обраотчик "onChangingParameters", куда передается объект:
{<br>
&nbsp;parameter: \*<i>название параметра</i>\*,<br>
&nbsp;parameterIndex: \*<i>номер параметра по списку</i>\*,<br>
Expand All @@ -76,7 +142,7 @@

<p>
<h4>Функция подключения плагина к элементу</h4>
Функция AnimateSlider вызывается у элементов jQuery найденных с помощью функции $. AnimateSlider принимает json объект с параметрами слайдера:
Функция AnimateSlider вызывается у элементов jQuery найденных с помощью функции $. AnimateSlider принимает объект с параметрами слайдера:
<ul>
<li>min (целое натуральное число) - минимальное значение слайдера;</li>
<li>max (целое натуральное число) - максимальное значение;</li>
Expand All @@ -89,7 +155,7 @@
<li>interval (целое натуральное число) - количество чисел для подписи оси;</li>
<li>track (true || false) - показывать или не показывать след за бегунком соотвественно.</li>
</ul>
Если какое-то значение не установленно то будет установленно значение по умолчанию соотвествующие следующему json объекту:<br>
Если какое-то значение не установленно то будет установленно значение по умолчанию соотвествующие следующему объекту:<br>
{<br>
&nbsp;min: 0,<br>
&nbsp;max: 100,<br>
Expand Down

0 comments on commit 026eaa4

Please sign in to comment.