На этом шаге мы рассмотрим реализацию подсказок.
Несмотря на всю полезность возможности выделения строк, пользователь может даже не предполагать, что такая возможность существует. Мы можем исправить эту ситуацию, добавив класс 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. При наведении указателя мыши на ячейку с именем автора появляется подсказка
Полный текст этого примера можно взять здесь.На следующем шаге мы закончим изучение этого вопроса.