вчера в 0:42
6 августа 2009
10
MopTip и MopBox для jQuery
Всем привет!
Сегодня я расскажу вам о плагинах 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: этому аргументу нужно сообщить айдишник элемента, содержание которого вы хотите показать в тултипе.
А вот так выглядит необходимая разметка и вызов скрипта:
...
<!-- подключаем стили -->
<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 пикселов уже самого окошка).
...
<!-- стили -->
<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>Самым пытливым предлагаю самостоятельно разобрать скрипт примера — там есть вариант с несколькими страницами.
У этих же ребят еще есть скрипт слайдера — по возможностям он не самый айс, но выглядит довольно неплохо.
Да уж «замечательные» и совершенно неожиданные эффекты в лисе.
Я так понимаю это дает о себе знать.
Так же удивило следующее:
1) При клике и попытке выделения текста внутри бокса — получаем его перетаскивание, при этом нас об этом даже не уведомляют стандартным курсором — крестом со стрелками, да и вообще по моему перетаскивать надо за бордер или заголовок бокса, а не как не за контент.
2) В слайд баре при клике на полосу прокрутки бегунок туда не перескакивает, а только по клику по стрелкам или при перетаскивании, а это искажение стандартного поведения стандартного элемента интерфейса, тоже не гуд.
3) Стрелочки слева и справа от полосы прокрутки и стрелочки в слайд баре выполняют разные действия — тоже не интуитивно, в бегунке бы лучше подошли двойные стрелочки обозначающие переход к началу и концу соответственно.
Спасибо за материал.