На этом шаге мы рассмотрим реализацию подсказок.
Несмотря на всю полезность возможности выделения строк, пользователь может даже не предполагать, что такая возможность существует. Мы можем исправить эту ситуацию, добавив класс clickable к ячейке с именем автора, который вызывает изменение формы указателя мыши при наведении его на ячейку:
$(document).ready(function() {
var $authorCells = $('table.striped td:nth-child(3)');
$authorCells
.addClass('clickable')
.click(function() {
var authorName = $(this).text();
$authorCells.each(function(index) {
if (authorName == $(this).text()) {
$(this).parent().toggleClass('highlight');
}
else {
$(this).parent().removeClass('highlight');
}
});
});
});
Вне всяких сомнений использование класса clickable - это шаг в правильном направлении, но пользователь по-прежнему не имеет представления, что произойдет, когда он щелкнет на ячейке. Опыт пользователя подсказывает ему, что щелчок легко может вызвать иную реакцию, например переход на другую страницу. Необходима какая-то дополнительная подсказка о том, что произойдет в случае щелчка.
Подсказки - знакомая особенность многих программ, включая и веб-браузеры. Мы можем обратить внимание пользователя на возможность выделения строк, отображая подсказку при наведении указателя мыши на ячейку в столбце Автор. Текст подсказки может описывать, какой эффект будет иметь действие пользователя, например, с помощью сообщения Выделить автора: Эспозито Д.. Этот текст будет содержаться в элементе <div>, который можно добавить в элемент <body>. Переменная $tooltip будет использоваться в сценарии для обращения к вновь созданному элементу:
var $tooltip = $('<div id="tooltip"></div>').appendTo('body');
При отображении каждой подсказки нам потребуется выполнять три основных операции:
- Отображать подсказку при наведении указателя мыши на интерактивный элемент,
- Скрывать ее при выходе указателя мыши за пределы элемента,
- Изменять местоположение подсказки при перемещении указателя мыши.
Для каждой из этих операций мы напишем функции, а затем подключим их к событиям браузера с помощью jQuery.
Начнем с функции positionTooltip(), которая будет вызываться при наведении указателя мыши на любую из ячеек в столбце Автор:
var positionTooltip = function(event) {
var tPosX = event.pageX;
var tPosY = event.pageY + 20;
$tooltip.css({top: tPosY, left: tPosX});
};
Здесь, чтобы определить координаты верхнего левого угла подсказки, мы использовали свойства pageX и pageY объекта event. Когда данная функция будет вызываться в ответ на события мыши, такие как mousemove, свойства event.pageX и event.pageY будут содержать координаты указателя мыши, в результате переменные tPosX и tPosY будут содержать координаты точки на экране, расположенной на 20 пикселей ниже указателя мыши.
Затем нам необходимо написать функцию showTooltip(), которая будет выводить подсказку на экран.
var showTooltip = function(event) {
var authorName = $(this).text();
$tooltip
.text('Выделить автора: ' + authorName)
.show();
positionTooltip(event);
};
Функция showTooltip() достаточно прямолинейна. В ней производятся заполнение подсказки содержимым посредством создания строки на основе содержимого ячейки (представляющего собой имя автора) и ее отображение.
Затем с помощью функции positionTooltip() подсказка помещается в нужное место на странице. Так как подсказка добавляется в элемент body, чтобы иметь возможность располагать ее в произвольном месте на странице, нам необходимо определить некоторые правила CSS для нее:
#tooltip {
position: absolute;
z-index: 2;
background: #efd;
border: 1px solid #ccc;
padding: 3px;
}
Наконец, напишем простую функцию hideTooltip():
var hideTooltip = function() {
$tooltip.hide();
};
Теперь, когда у нас имеются функции отображения, сокрытия и позиционирования подсказки, можно добавить обращения к ним в наш программный код:
$(document).ready(function() {
var $authorCells = $('table.striped td:nth-child(3)');
var $tooltip = $('<div id="tooltip"></div>').appendTo('body');
var positionTooltip = function(event) {
var tPosX = event.pageX;
var tPosY = event.pageY + 20;
$tooltip.css({top: tPosY, left: tPosX});
};
var showTooltip = function(event) {
var authorName = $(this).text();
$tooltip
.text('Выделить автора: ' + authorName)
.show();
positionTooltip(event);
};
var hideTooltip = function() {
$tooltip.hide();
};
$authorCells
.addClass('clickable')
.hover(showTooltip, hideTooltip)
.mousemove(positionTooltip)
.click(function(event) {
var authorName = $(this).text();
$authorCells.each(function(index) {
if (authorName == $(this).text()) {
$(this).parent().toggleClass('highlight');
}
else {
$(this).parent().removeClass('highlight');
}
});
});
});
Обратите внимание, что в качестве аргументов методам .hover() и .mousemove() передаются ссылки на функции, определенные в другом месте, мы опустили круглые скобки, которые следуют за именами функций при их вызове. Теперь при наведении указателя мыши на ячейку с именем автора отображается подсказка, которая перемещается вместе с перемещением указателя мыши и скрывается при выходе указателя за пределы ячейки, как показано на рисунке 1.
Рис.1. При наведении указателя мыши на ячейку с именем автора появляется подсказка
Полный текст этого примера можно взять здесь.На следующем шаге мы закончим изучение этого вопроса.
