Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Создаем усовершенствованный тултип при помощи потрясающих возможностей jQuery

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by AlexBioJS (you can also view the original English article)

Браузера автоматически отобразят тултип (* пояснение действия (к пиктограмме выбранного инструментального средства). Здесь и далее примеч. пер.), если вы зададите значение для свойства title. Для Internet Explorer на этот случай имеется свойство alt. Однако в этом руководстве я покажу вам, как быстро написать плагин jQuery, благодаря которому обычный тултип браузера будет заменен на кое-что более крутое.




Одним из замечательных инструментов в нашем сундучке веб-разработчика являются тултипы. Тултип – прямоугольник,
который появляется, когда вы перемещаете курсор поверх элемента, например гиперссылки. Он предоставляет
дополнительную информацию об этом элементе. Например, ссылка с небольшим количеством текста или без него (иконка) может сбить с толку.
Добавьте внутри вашего тултипа дополнительное предложение или два, чтобы объяснить вашим пользователям, что произойдет при ее нажатии.


Перед началом работы

Это руководство, скорее всего, принадлежало бы к категории Intermediate (* средней сложности). При написании инструкций предполагалось, что у вас имеются хотя бы
базовые представления об HTML/CSS, технике обрезки изображений и jQuery.

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

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

The file structure

Ниже приводится краткое описание того, что из себя представляет каждый файл/папка:

  • Папка с изображениями содержит следующие изображения:
  • - - tipTip.png - создано в Шаге 2
  • - - tipMid.png - создано в Шаге 2
  • - - tipBtm.png - создано в Шаге 2
  • index.html - - создан в Шаге 3
  • style.css - создан в Шаге 3
  • jquery-1.3.1.min.js - скачайте этот файл по ссылке
  • jquery.betterTooltip.js - - создан в Шаге 5

Шаг 1: Для начала проявляем чуточку креативности

Откройте Photoshop или другой ваш любимый редактор изображений и сделайте на скорую руку великолепный тултип. Вместо того,
чтобы создавать его на простом белом фоне, возможно, будет полезным, если вы нарисуете ваш тултип на фоне, подобном тому, что используется на вашем сайте.
Благодаря этому он будет гармонично сочетаться с фоном. По большому счету (* исходя из самый строгих требований),
для его создания нет проторенного пути. Просто подключите собственное воображение и креативность.

Initial Tooltip Design

Шаг 2: Делим тултип на части

Для нашей конкретной реализации тултипа вам необходимо будет его разрезать на 3 различных изображения. Форматом этой конкретной реализации будет PNG (* Portable Network Graphics – переносимая сетевая графика; растровый формат, используемый для графических файлов в Интернете, аналогичный формату GIF, но с заметно лучшим сжатием. Относится к свободно распространяемому ПО и поддерживается многими браузерами) для сохранения возможности использования прозрачного фона.
1) верхняя часть. 2) кусочек высотой в 1 px, который будет продублирован по вертикали в средней части тултипа. 3) нижняя часть. На четвертой части схемы показаны три
части после того, как они были вырезаны.

Поместите эти изображения в папку под названием "images".

Slice up the tooltip

Примечание: Internet Explorer не поддерживает возможность использования прозрачности PNG-файлов. Даже IE 7 только частично поддерживает ее.
 изображений в формате PNG при помощи JavaScript, то любая прозрачная часть моментально почернеет, когда будет находиться в движении. Я использую эту реализацию,
прекрасно понимая, что в IE возникнут проблемы, сложно поддающиеся исправлению.


Шаг 3: Пишем код HTML/CSS

Теперь, когда у нас имеются кусочки изображения, мы можем перейти к созданию разметки HTML и кода CSS. Это будет наиболее легкая часть
всего руководства.

Код HTML

Скоро мы переместим этот код во внешний файл JavaScript, так что просто введите его в редакторе,
который находится у вас под рукой и к которому вы сможете позже обратиться.

У нас имеется три тега div. Два дочерних внутри родительского. Первый div, "tip", будет использоваться для объединения остальных
 и отображать верхнюю часть тултипа – tipTop.png.

Второй, "tipMid", через некоторое время будет содержать текст, который будет отображаться тултипом. Также в качестве фонового изображения в нем будет использоваться tipMid.png, повторяющееся в нем по вертикали.

Третий, "tipBtm", служит исключительно для отображения нижней части тултипа – tipBtm.png.

Внутри index.html добавьте некоторое количество текста-заполнителя и какие-нибудь элементы, свойства title которых имеют какие-нибудь значения. Например:

В заголовке index.html вам необходимо будет подключить таблицу стилей и два файла JavaScript.

Код CSS

Правила CSS для этого тултипа относительно просты, добавьте лишь следующий код в style.css.

Давайте поясню код выше.

Элемент-обертка, с классом .tip, используется для объединения остальных элементов. В качестве значение поля (* полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое) от верхнего края содержимого элемента задано 37px.
Это значение высоты фонового изображения. За счет этого поля дочерние элементы будут перемещены вниз для показа
находящегося за ними изображения. Также для этого элемента устанавливается абсолютное позиционирование, за счет чего мы можем перемещать этот элемент поверх контента
страницы.

Для остальных двух классов просто задано в качестве фона фоновое изображение и в случае с .topMid заданы значения поля вокруг элемента для предоставления
контенту, который будет располагаться внутри элемента, некоторого свободного пространства.


Шаг 4: Почему стоит использовать плагин

jQuery сама по себе очень крута. Но весь ее потенциал раскрывается при создании плагина. При оформлении кода в
 виде плагина у вас появляется возможность его повторно использовать.  Благодаря этому вы можете составить библиотеку кода и никогда не писать
тот же код дважды.

Ниже приводится весь код плагина:


Шаг 5: Пишем код плагина

Теперь, когда вы ознакомились с кодом, пришло время проанализировать его:
Для начала создайте файл .js и назовите его jquery.betterTooltip.js, чтобы он
соответствовал стандартам  плагина для jQuery.

В этот файл .js добавьте следующий код:

Здесь создается публичная функция, которая может быть вызвана из заголовка документа
или другого внешнего файла .js.  Для запуска вашего плагина вам необходимо выполнить следующую строку кода внутри
 обработчика события ready $(document).ready(function(){}).

За счет вышеприведенной строки кода плагин будет подключен к каждому элементу с классом под именем "tTip". Подобным образом вы
могли бы подключить его к любому необходимому вам элементу.

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

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

За счет этого настройки "speed" и "delay" можно менять при вызове плагина следующим образом:

Эти настройки совершенно необязательны. Если они не указаны, то в плагине будут использоваться значения настроек по умолчанию.

Добавляем код HTML для тултипа

Помните тот код HTML, который вы написали для тултипа? Вот и пришла его очередь.
В этом коде используется метод jQuery prepend() для манипулирования контентом для добавления тултипа
сразу после открывающего тега body. Благодаря этому мы можем гарантировать, что тултип
располагается поверх всех остальных элементов.

Это один из наиболее важных и полезных аспектов плагина jQuery. Функция $(this).each

Это один из наиболее важных и полезных аспектов плагина jQuery. Функция $(this).each
 перебирает каждый элемент на странице, к которому подключен плагин, после своего вызова.В нашем случае
 это все элементы с классом "tTip". При переборе благодаря этой функции к каждому элементу применяются
 указанные вами свойства и методы.

Код функции довольно прост. Верхняя половина состоит из некоторого количества свойств для задания значений высоты, ширины, координат x и y
и даже значения атрибута title элементов с классом "tTip". Я использую метод jQuery offset() для получения значений позиции элемента (* относительно документа). Также имеется
функция hover(), назначенная для каждого элемента с классом "tTip", за счет которой вызываются методы при перемещении курсора поверх элемента и за его пределы.  Эти методы будут 
описаны позже в руководстве.

Одна из важных частей этой функции $(this).each – строка кода, благодаря которой удаляется значение атрибута title:

Главный смысл нашего плагина для создания тултипа – замена обычного тултипа более привлекательной его версией.
Если вы не удалите значение атрибута title, которое браузер
использует для генерации обычного тултипа, то получится дуэль тултипов. Вроде этой:

Avoid duel tooltips

Задержка возникновения анимации Fade-in (* постепенное проявление изображения) тултипа

Эти два метода, setTimer и  stopTimer, используются для создания задержки появления тултипа после того, как пользователь переместил
свой курсор поверх элемента с классом "tTip" и тултир появился.
Важно избегать надоедания пользователю.  Уверен, нас всех достают ситуации, когда мы случайно перемещаем курсор
поверх всплывающей рекламы, спрятанной в контенте сайтов.

За счет метода setTimer создается объект setInterval, благодаря которому вызывается "showTip()" после того, как истекло отведенное время.
Для того чтобы переданная в setInterval () функция не вызывалась бесконечно, вызывается метод stopTimer для остановки объекта setInterval.

Позиционирование тултипа

Функция hover() внутри петли $(this).each(), что была создана ранее, вызывает setTip(). Ее назначение – разместить
 тултип прямо над элементом с классом "tTip". Это выполняется до запуска анимации fade-in.

Анимация Fade-in

И последнее, но не менее важное – функция showTip(). В ней используется метод jQuery 's animate() для постепенного проявления изображения тултипа
за счет скользящего движения (* постепенно увеличивая их высоту).


Подведение итогов...

Теперь, когда вы завершили плагин и довольны результатом, можете применить его
в реальном мире разработки в своих проектах.

Это самый простой пример того, на что способен плагин для создания тултипа. Увлекательным занятием теперь будет придание ему большей надежности.
Имеется множество способов усовершенствовать этот плагин. Следовало бы определять местоположение тултипа по отношению
к границам окна браузера и отображать тултип соответствующим образом так,
что он оставался бы целым.

Спасибо за проявленный интерес к этому руководству. Надеюсь, что оно прояснило то, как вы можете использовать jQuery для улучшения
 интерфейса вашего сайта.

Оставляйте комментарии! Хочу узнать ваше мнение. Действительно ли этот прием помогает пользователям легче справляться с трудностями, или же
это просто очередная надоедливая фигня?

  • Подпишитесь на NETTUTS RSS Feed, чтобы быть в курсе о новых руководствах и статьях по веб-разработке.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.