Всплывающие подсказки: плагин BetterTip для jQuery
Плагин BetterTip для jQuery позволяет создавать всплывающие подсказки на страницах вашего сайта. Вес скрипта вместе с CSS и картинками — 12кб, а в сжатом виде — 10кб.
Для начала подключаем в разделе head HTML-страницы три файла:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.bettertip.js"></script>
JavaScript:
$(function(){
BT_setOptions({openWait:250, closeWait:0, cacheEnabled:true});
})
</script>
Параметры:
- openWait — число миллисекунд, в течение которых пользователь должен держать курсор наведенным, чтобы всплыла подсказка (по умолчанию: 500)
- closeWait — число миллисекунд, в течение которых подсказа должна оставаться видимой после того как пользователь отведет курсор с блока с подсказкой (по умолчанию: 0)
- cacheEnabled — может принимать значения true либо false, определяет должен ли контент, вызываемый с помощью AJAX кешироваться (по умолчанию: true)
Всплывающие подсказки можно назначить для элементов <a> и <div>. Эти элементы должны иметь уникальный ID и класс с именем betterTip.
Dynamic tooltip an 'a' element
</a>
Для элемента <a> можно также задать заголовок подсказки с помощью атрибута title. Атрибут title, кроме обычного текста заголовка подсказки, допускает два специальных значения:
- $none — у подсказки не будет заголовока
- $content — у подказки будет заголовок, совпадающий с содержимым блока, на который наведен курсор.
Атрибут href отвечает за то, откуда будет загружаться контент подсказки. Дополнительно можно указать ширину блока с подсказкой; по умолчанию — 250px.
Если значение атрибута href начинается с символа $, это означает, что плагин BetterTip должен взять контент из другого элемента страницы. Например href=”$mydiv?width=500″ означает, что текст подсказки будет взят из элемента <div> с id=”mydiv” и ширина блока подсказки 500px. Иначе контент подсказки будет загружен с сервера с использованием AJAX.
Static tooltip an 'a' element
</a>
<div id="mydiv" style="display:none;">
Here is the content for the tooltip!
</div>
Чтобы задать подсказку для элемента <div>, разместите элемент <a> внутри <div>:
<a id="a1" href="ajax.php?width=300" class="betterTip" title="$none"></a>
Dynamic tooltip for a div
</div>
Элемент <a> внутри <div> нужен чтобы:
- задать место, откуда будет загружаться контент подсказки;
- указать заголовок подсказки.
Ссылки по теме:
фин:
Спасибо пригодиться-)))
6 Декабрь 2008, 11:04sergik:
Жаль что только работает от href, как мне переходить на другие страницы?
17 Январь 2009, 21:43Дмитрий Глазков:
Подкажите, как реализовать это для картинки а не только для текста. Стобы такая подсказка как у вас в примере отображалать при наведении курсора на картинку сайта. И поддерживает ли эта подсказка форматирование? Спасибо!
20 Март 2009, 16:10admin:
Дмитрий Глазков, нужно разместить внутри элемента <a> картинку, а не текст.
24 Март 2009, 10:36Елена:
А можно ли сделать подсказку на картинку, которая является ссылкой?
31 Июль 2009, 12:35admin:
Елена, попробуйте так:
<a id="a1" href="ajax.php?width=300" class="betterTip" title="$none"></a>
<a href="http://server.com/"><img src="/images/banner.gif" alt="" /></a>
</div>
Если такой вариант не пройдет, поищите другой плагин - их сейчас более чем достаточно.
31 Июль 2009, 15:06