Главная » Файлы » Прочие скрипты » jQuery |
Замечательные подсказки с кучей возможностей через плагин Tooltipster на jQuery для uCoz
24.06.14, 17:09:14 | |
Пожалуй, самый функциональный плагин подсказок изо всех, что мне приходилось встречать. Много возможностей от простого отображения html разметки до множества настроек от типа анимации до управления контентом внутри самой подсказки (Многим напоминает функции подсказок соцсети вконтакте). Мне плагин очень понравился своей простотой использования и мощной начинкой, удовлетворяющей многим запросам. Все настройки я перевёл на русский для русскоязычных пользователей Для начала посмотрите ДЕМО Вот моё тестирование в фидле: КЛИК Установка: После < /head > на нужных страницах вставляйте: Код <link rel="stylesheet" type="text/css" href="/css/tooltipster.css" /> <script type="text/javascript" src="/js/jquery.tooltipster.js"></script> В самый низ страницы после < /body > вставляйте: Код <script> $('[title]').tooltipster(); </script> Давайте теперь ниже я покажу вам, какие настройки есть у данного плагина на примере: Код $('[title]').tooltipster({ animation: 'fall', // Анимация: (fade, grow, swing, slide, fall) arrow: true, // Показывать ли стрелочку arrowColor: '', // Цвет стрелочки (hex code / rgb) content: '', // Содержимое по-умолчанию (string, jQuery object) delay: 200, // задержка перед появлением fixedWidth: 0, // Фиксированная ширина maxWidth: 200, // Максимальная ширина functionBefore: function (origin, continueTooltip) { continueTooltip(); // Функции до открытия подсказки }, functionReady: function (origin, tooltip) { // Функция после открытия подсказки }, functionAfter: function (origin) { // Функция после закрытия подсказки }, icon: '(?)', // Иконка (string) iconDesktop: false, // Генерировать ли иконку рядом с объектом для запуска подсказки iconTouch: false, // Генерировать ли иконку рядом с объектом для запуска подсказки для мультитач устройств iconTheme: '.tooltipster-icon', // Класс для иконки - подсказки interactive: false, // Закрывать ли подсказку сразу после отведения курсора. Если true - курсор можно будет водить и по самой подсказке interactiveTolerance: 350, // На сколько долго подсказка не спрячется после отвода курсора offsetX: 0, offsetY: 0, onlyOne: true, // Разрешёна ли только одна активная подсказка position: 'top', // Где подсказка появится по-умолчанию (right, left, top, top-right, top-left, bottom, bottom-right, bottom-left) speed: 350, // Скорость анимации timer: 0, // Через сколько времени подсказка сама закроется theme: '.tooltipster-default', // Цветовая схема touchDevices: true, // Активирована для мультитач устройств trigger: 'hover', // При каком событии открывать подсказку (hover, click, custom) updateAnimation: true // Анимировать ли подсказку, когда в ней меняется контент }); Давайте теперь разберём, как управляться с событиями, такими как открытие, закрыте, удаление подсказок и замена содержимого в них: Код // Открыть подсказку $('.класс').tooltipster('show'); // Закрыть подсказку $(.класс).tooltipster('hide'); // Отключить подсказку $(.класс).tooltipster('disable'); // Включить подсказку $(.класс).tooltipster('enable'); // Закрыть и удалить подсказку $(.класс).tooltipster('destroy'); // Обновить контент внутри подсказки $(.класс).tooltipster('update', 'Новый текст или html код'); // Изменить позицию и размер подсказки $(.класс).tooltipster('reposition'); Другие более подробные примеры использования можете посмотреть на демо страничке Скрипт из прикреплённого архива залейте в папку js, стиль в папку css Также в архиве есть папка themes. В ней содержатся css стили, которые также представлены на демо странице в самом низу. Чтобы подключить их, просто скопируйте содержимое нужного css файла темы в самый низ вашего css К примеру, для светлых подсказок запускающий код будет таким: Код $('.класс').tooltipster({ theme: '.tooltipster-light' }); Материал подготовлен Apocalypse | |
Просмотров: 1425 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |