Шаг 141.
Библиотека jQuery.
Работа с таблицами. Изменение внешнего вида таблицы. Подсказки

    На этом шаге мы рассмотрим реализацию подсказок.

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

    При отображении каждой подсказки нам потребуется выполнять три основных операции:

  1. Отображать подсказку при наведении указателя мыши на интерактивный элемент,
  2. Скрывать ее при выходе указателя мыши за пределы элемента,
  3. Изменять местоположение подсказки при перемещении указателя мыши.

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

Полный текст этого примера можно взять здесь.

    На следующем шаге мы закончим изучение этого вопроса.




Предыдущий шаг Содержание Следующий шаг