Доброго времени суток.
Решил опубликовать пост, который принес инвайт.
Недавно закончил работу над виджетом для JS библиотеке JQuery. Конечно на данный момент есть аналоги, и даже некоторые приведены здесь. Но во всех реализациях есть определенные недостатки и недоделки, к сожалению, эта реализация также не избежала некоторых проблем, но как кажется, преимущества его намного перекрывают все недоделки. Может быть кому-то он понравится, и кто-то решит исправить, доделать или улучшить реализацию, то милости прошу.
Итак, начнём.
С начала, ссылка на страницу для скачивания исходных кодов: скачать.
А также, сразу же, страница с примерами и демонстрацией работы и примерами исходного кода: пример
Что же нам нужно для работы всплывающей подсказки? Нам для этого потребуется сама библиотека JQuery 1.3 (можете взять последнюю версию здесь), Position plugin больше можно прочесть с этой вики страницы, Template plugin позволяет задавать строку шаблона, и на основе JSON параметров, подстановка которых в шаблон выдает заполненную строку.
Установить всплывающую подсказку так же просто, как и любой другой jquery widget. Всё что нужно сделать – это подключить файл jquery.jtooltip.js с ява скриптом, а также файл со стилями jquery.jtooltip.css.
Решил опубликовать пост, который принес инвайт.
Недавно закончил работу над виджетом для 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 не хватило кармы.