Как понятно из названия, этот плагин позволяет делать подсказки (тултипы). Давайте рассмотрим, что нужно для работы скрипта:
• mop-tip.css (стили для подсказок);• jquery.js (версия 1.3.2);• mop-tip.js (файл плагина);• jquery-png-fix.js (фикс прозрачности для шестого ослика).Да, еще есть картинки, пути к которым выставляются в стилях. Теперь посмотрим, с какими параметрами можно вызывать этот скрипт и какие значения могут быть у этих параметров.w: отвечает за длину тултипа, выставляется просто числом, без единиц измерения;style: определяет поведение тултипа — значение «overOut» скрывает тултип когда убираете курсор с объекта, а «overClick» требует клика по крестику для закрытия;get: этому аргументу нужно сообщить айдишник элемента, содержание которого вы хотите показать в тултипе.А вот так выглядит необходимая разметка и вызов скрипта:<!-- подключаем стили --><link rel="stylesheet" type="text/css" href="mop-tip.css" />...<body>...<!-- элемент, для которого будет подсказка --><a href="#" id="demo1Btn">наведи на меня курсор</a>...<div style="display: none"> <!-- элемент, содержание которого выводиться в подсказке --> <div id="demo1">А вот тут может быть любой текст</div></div>...<!-- подключаем скрипты --><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="mop-tip.js"></script><script type="text/javascript" src="jquery-png-fix.js"></script><script type="text/javascript">$(document).ready(function(){ // вызываем тултип для элемента с id="demo1Btn" $("#demo1Btn").mopTip({ 'w': 150, // длина 'style': 'overOut', // стиль 'get': '#demo1' // элемент с текстом });});</script></body></html>Этот плагин позволяет делать всплывающие окошки с контентом — текст, картинки, видео, флеш, сборная солянка из всего перечисленного. Красиво и удобно, мне во всяком случае понравилось. Кроме того, в окошке можно показывать не один лист контента, а несколько. Я имею ввиду, что контент окошка может состоять из нескольких частей, переключать которые можно с помощью слайдера, который появляется под вызванным окошком. Кстати, само окошко можно перетаскивать по странице и изменять его размеры. Неплохо, да?
А что же ему нужно для комфортной работы? А вот этот набор файлов:• jquery.js (версия 1.3.2);• jquery.ui (core, draggable, resizable);• jquery-png-fix.js;• mopbox.js;• mopbox.css;• картинки.У этого скрипта настроек намного больше, чем у предыдущего. Что ж, давайте на них взглянем (жирным выделены обязательные параметры):• target: опять же, селектор контейнера, из которого следует брать содержимое для окошка;• w и h: ширина и высота окошка (увы, плавающей высоты не бывает);• speed: скорость листания страничек внутри окошка (в милисекундах, конечно же);• step: сколько страниц проматывать, когда слайдер перетаскивается мышкой;• stepFX: длина шага ползунка в пикселах;• btnW: длина самого ползунка;• naviPosi: расстояние от нижней границы окошка до слайдера;• fbPosi: расстояние от границ ползунка до кнопок «туда-сюда»;• startPage: страница, которая покажется при открытие окна;• mopBoxBgc: цвет фона окошка;• resize: направление ресайза — 'se' для вправо-вниз и 's', если только вниз;• rszTarget: можно ресайзить одновременно окошко и дивы, содержащие контент (для нужно указать их класс как значение этого параметра);• rzW, rzH: устанавливаем ширину и высоту rszTarget. Настроек-то как у шатла. Так, теперь давайте запустим скрипт. Сделаем для начала обычное окошко с дефолтными параметрами. Обратите внимание, что в стилях нужно выставить ширину контейнера, в котором содержится контент окошка (она на 20 пикселов уже самого окошка).<!-- стили --><link rel="stylesheet" type="text/css" href="mopbox.css">...<body>...<!-- кнопка, при клике на которую вызывается окно --><a id="demo1Btn" href="#">нажми меня, есть сможешь</a>...<!-- контейнер содержимого окна --><div id="demo1" style="display: none"> <!-- а вот для этого дива нужно указать ширину, равную длине окна минус 20 пикселов --> <div class="demoCase"> <h6>Трансцендентальный гедонизм</h6> <p>Созерцание осмысляет субъективный предмет деятельности, изменяя привычную реальность. Суждение осмысленно преобразует типичный здравый смысл, открывая новые горизонты.</p> </div></div><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="ui.core.js"></script><script type="text/javascript" src="ui.draggable.js"></script><script type="text/javascript" src="ui.resizable.js"></script><script type="text/javascript" src="jquery-png-fix.js"></script><script type="text/javascript" src="mopbox.js"></script><script type="text/javascript">$(document).ready(function(){ $("#demo1Btn").mopBox({ 'target': '#demo1', 'w': 270, 'h': 240 });});</script></body></html>