User Tips

Предназначение - визуальное выделение интерактивных объектов (изображений, текстов, слайдеров и drag-элементов).

Версия

1.1.0

Подключение

<script src="js/userTips.js"></script>

Пример использования

• Для tap-элементов (вызов метода tap())

var options = {
    obj: [".tap-picture", ".tap-text"],
    actionType: ["pic","txt"],
    flashColor: ["yellow", "#BA01FF"],
    tapInterval: 300,
    delay: 800
};
var ut = new UTManager(options);
ut.tap();

• Для слайдеров (вызов метода drag())

var options = {
    obj: [".pointer1", ".pointer2"],
    deltaX: [200, -200],
    dragInterval: 300,
    delay: 500,
    duration: 700
};
var ut = new UTManager(options);
ut.drag();

• Для drag-элементов (вызов метода drag())

var options = {
    obj: [".drag-element"],
    deltaX: [300],
    deltaY: [70],
    delay: 300,
    duration: 900
};
var ut = new UTManager(options);
ut.drag();

Методы

• tap - запускает анимацию подсветки интерактивных элементов obj.
• drag - запускает анимацию перемещения слайдеров и drag-елементов элементов obj.

Параметры

Общие

• obj - список идентификаторов (id или class) интерактивных объектов. Тип - Array. Значение по умолчанию - нет.

• delay - задержка перед началом анимации. Тип - Number. Значение по умолчанию - 500.

• duration - длительность анимации одного элемента. Тип - Number. Значение по умолчанию - 500.

• handler - callback-функция после завершения анимации. Тип - Function. Значение по умолчанию - null.

---

Для tap

• actionType - список типов подсветки - "pic" для изображений и "txt" для текстов. Если задан один тип, то он будет применен ко всем элементам obj (тип "txt" применяется только к текстам). Тип - Array. Значение по умолчанию - ["pic"].

• tapInterval - интервал между подсветками элементов obj. Тип - Number. Значение по умолчанию - 100.

• flashColor - список цветов подсветок элементов obj. Если задан один цвет, то он будет применен ко всем элементам. Формат задания цвета - как в css. Тип - Array. Значение по умолчанию - ["#fff"].

---

Для drag-элементов и слайдеров

• deltaX - список относительных величин смещения по оси X элементов obj в пикселях. Положительные значения соотствуют смещению вправо, отрицательные - влево. Если задано одино значение, то оно будет применено ко всем элементам obj. Тип - Array. Значение по умолчанию - [0].

• deltaY - список относительных величин смещения по оси Y элементов obj в пикселях. Положительные значения соотствуют смещению вниз, отрицательные - вверх. Если задано одино значение, то оно будет применено ко всем элементам obj. Тип - Array. Значение по умолчанию - [0].

• dragInterval - интервал между перемещениями элементов obj. Тип - Number. Значение по умолчанию - 100.

• objectOpacity - значение прозрачности клона объекта. Тип - Number. Значение по умолчанию - 0.4.

---

Особенности

Предусмотренна возможность полного отключения User Tips для данной сессии путем передачи в sessionStorage переменной "userTipsEnabled" значения "false". Во всех остальных случаях User Tips будут отображаться.

sessionStorage.setItem("userTipsEnabled", "false");

Количество параметров в массивах "actionType", "flashColor", "deltaX", "deltaY" должно быть равно 1 (будет применено ко всем объектам) или равно количеству объектов obj. Во всех остальных случаях будет выведено сообщение об ошибке и анимация не будет запущена.

Требуется подключение библиотеки JQuery.

License

MIT

Free Software, Absolutely Free!!!