Плагины MopTip и MopBox для jQuery

Страница 1 из 1
1

Плагины MopTip и MopBox для jQuery (sml[arrow])

Сикарашка

05.06.2010, Суббота в 22:24

Сообщение #1

Сегодня я расскажу вам о плагинах jQuery, сразу о двух. Эти плагины были созданы в японской студии «Моп» .
Теперь технические моменты: это плагины для jQuery, которые работают во всех популярных браузерах (ослик с 6-го по 8-ой, Опера, Фаерфокс, Сафари и Хром) и имеют очень понятный и удобный синтаксис. Единственная проблема, с которой я столкнулся, это плохое описание на сайте разработчика — согласитесь, что описание на японском или плохом английском не самое приятное чтиво ;-)
Но вам не о чем беспокоится, ведь я сделал понятное описание в этой статье (надеюсь). Плюс примеры и архивы точно помогут вам разобраться что к чему.
MopTip

Как понятно из названия, этот плагин позволяет делать подсказки (тултипы). Давайте рассмотрим, что нужно для работы скрипта:
• mop-tip.css (стили для подсказок);
• jquery.js (версия 1.3.2);
• mop-tip.js (файл плагина);
• jquery-png-fix.js (фикс прозрачности для шестого ослика).
Да, еще есть картинки, пути к которым выставляются в стилях. Теперь посмотрим, с какими параметрами можно вызывать этот скрипт и какие значения могут быть у этих параметров.
w: отвечает за длину тултипа, выставляется просто числом, без единиц измерения;
style: определяет поведение тултипа — значение «overOut» скрывает тултип когда убираете курсор с объекта, а «overClick» требует клика по крестику для закрытия;
get: этому аргументу нужно сообщить айдишник элемента, содержание которого вы хотите показать в тултипе.
А вот так выглядит необходимая разметка и вызов скрипта:

Code

<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>

Вроде бы все готово, давайте проверять.

MopBox

Этот плагин позволяет делать всплывающие окошки с контентом — текст, картинки, видео, флеш, сборная солянка из всего перечисленного. Красиво и удобно, мне во всяком случае понравилось. Кроме того, в окошке можно показывать не один лист контента, а несколько. Я имею ввиду, что контент окошка может состоять из нескольких частей, переключать которые можно с помощью слайдера, который появляется под вызванным окошком. Кстати, само окошко можно перетаскивать по странице и изменять его размеры. Неплохо, да?
А что же ему нужно для комфортной работы? А вот этот набор файлов:
• 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 пикселов уже самого окошка).

Code

<link rel="stylesheet" type="text/css" href="mopbox.css">
...
<body>
...

<a id="demo1Btn" href="#">нажми меня, есть сможешь</a>
...

<div id="demo1" style="display: none">
       
  <div class="demoCase">
           <h6>Трансцендентальный гедонизм</h6>


Созерцание осмысляет субъективный предмет деятельности, изменяя привычную реальность. Суждение осмысленно преобразует типичный здравый смысл, открывая новые горизонты.</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>

Плагины MopTip и MopBox для jQuery (sml[arrow])

Страница 1 из 1
1