iggbs Nov 24 2009 at 22:29

JQuery tooltip widget

4 min

4.4K

Доброго времени суток.
Решил опубликовать пост, который принес инвайт.
Недавно закончил работу над виджетом для JS библиотеке JQuery. Конечно на данный момент есть аналоги, и даже некоторые приведены здесь. Но во всех реализациях есть определенные недостатки и недоделки, к сожалению, эта реализация также не избежала некоторых проблем, но как кажется, преимущества его намного перекрывают все недоделки. Может быть кому-то он понравится, и кто-то решит исправить, доделать или улучшить реализацию, то милости прошу.

Итак, начнём.
С начала, ссылка на страницу для скачивания исходных кодов: скачать.
А также, сразу же, страница с примерами и демонстрацией работы и примерами исходного кода: пример
Что же нам нужно для работы всплывающей подсказки? Нам для этого потребуется сама библиотека JQuery 1.3 (можете взять последнюю версию здесь), Position plugin больше можно прочесть с этой вики страницы, Template plugin позволяет задавать строку шаблона, и на основе JSON параметров, подстановка которых в шаблон выдает заполненную строку.

Установка

Установить всплывающую подсказку так же просто, как и любой другой jquery widget. Всё что нужно сделать – это подключить файл jquery.jtooltip.js с ява скриптом, а также файл со стилями jquery.jtooltip.css.

<script type="text/javascript" src="jqueryJS/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="jqueryJS/jquery-ui-1.7.2.custom.min.js"></script>

<script type="text/javascript" src="jqueryJS/jquery.bgiframe.js"></script>

<script type="text/javascript" src="jqueryJS/jquery.template-0.3.js"></script>

<script type="text/javascript" src="jqueryJS/jquery.ui.position.js"></script>

<script type="text/javascript" src="jqueryJS/jquery.jtooltip.js"></script>

<link type="text/css" rel="stylesheet" href="jqueryCSS/jquery-ui-1.7.2.custom.css" />

<link type="text/css" rel="stylesheet" href="jqueryCSS/jquery.jtooltip.css" />



* This source code was highlighted with Source Code Highlighter.

Для создания всплывающей подсказки над некоторым элементом/элементами нужно выполнить всего лишь строчку кода 

$('#set1 *'). jtooltip();



* This source code was highlighted with Source Code Highlighter.


При этом, текст для подсказки по умолчанию берется с атрибута title элемента, после чего этот атрибут удаляется, для избегания отображения стандартной подсказки браузера. 



Параметры:


Все параметры отображаются в следующем виде: Имя параметра: стандартное значение


delay: 200

Подсказка отображается после некоторой непродолжительной задержки, указанной в значении. Установите значение этого параметра в 0, когда хотите убрать задержку. 


fade: false

По-умолчанию, подсказка появляется без каких-либо эффектов, установка этого параметра в любое число позволит плавно появляться подсказке. Для большей информации посетите страницу fadein effect. 


tooltipClass: «ui-widget-content ui-corner-all»

Хотите кастомизировать или изменить стандартный вид всплывающей подсказки, изменяйте этот параметр, добавляйте любые классы, и оформляйте подсказку, так как вам будет удобнее.


template: "{Title}" 

строка шаблона получает JSON параметры и на основе правил указанной в этой строке формирует выходную строку. Для большей информации и примеры, смотрите template plugin.

Если вы изменяете стандартное значение этого параметра, тогда, пожалуйста, установите один из параметров loadURL или опишите callback функцию getJSONparams для того чтобы у виджета была возможность получить JSON параметры


loadURL: "" 

url, чтобы скачать JSON данные с сервера. Если вы опишите callback функцию getJSONparams jTooltip вызывает эту функцию, чтобы получить клиентские параметры для отправления их на сервер.


Позиция подсказки:

Укажите смещение подсказки относительно элемента, над которым она и отображается

top: 10 //смещение по оси y

left: 15 //смещение по оси x

position_at: 'right bottom', //это параметр at в position plugin

position_my: 'left center', //это параметр my в position plugin

Для всех возможных вариантов значений параметров смотрите в position plugin.


id: «tooltip»

Когда вы создаёте всплывающую подсказку, после этого элемента виджет добавляет элемент div (все добавленные элементы div имеют класс "ui-tooltip"), а также даёт ему id, состоящий из id элемента и этого параметра id. Заметьте, когда элемент не содержит значения id параметра, виджет создаёт уникальное вызываю getMilliseconds() функцию текущей даты.






Методы:


Show — программно отображает подсказку

$(selector).jtooltip("show");



* This source code was highlighted with Source Code Highlighter.


Hide – программно скрывает открытую подсказку

$(selector).jtooltip("hide");



* This source code was highlighted with Source Code Highlighter.




События:


Onshow – срабатывает, когда подсказка отображается

jtt.bind('onshow', function() { 

 //print code here for action on tooltip showing

} );



* This source code was highlighted with Source Code Highlighter.


Onhide – срабатывает, когда подсказка скрывается

jtt.bind('onhide', function() { 

 //print code here for action on tooltip showing

} );



* This source code was highlighted with Source Code Highlighter.




Много примеров кода представлено на странице примера. 

Более подробное описание всплывающей подсказки приведено на этой странице.

Если у вас есть вопросы, то спрашивайте. 

P.S. очень приветствуются любые комментарии, исправления, или даже указания на ошибки, недоработки, помощь в разработке.

P.P.S. К сожалению для публикации в блоге JQuery не хватило кармы.

Tags:

Hubs:

Lumber room