Как создать базовый плагин jQuery Tooltip

Опубликовано: 2016-10-22

Если в последнее время вы имели какое-либо отношение к веб-разработке, вам вряд ли нужно знакомство с jQuery или плагинами jQuery . Фактически, плагины jQuery стали настолько популярными, что почти 70% пользователей Интернета так или иначе используют их.

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

Итак, вот что мы будем создавать:

Учебник предварительного просмотра скриншота подсказки jQuery

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

Файловая структура

  1. jqueryToolTip.css — таблица стилей всплывающей подсказки.
  2. jqueryToolTip.js — фактический файл плагина jQuery.

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

Правила создания плагина jQuery

  1. Сохраняйте уникальные идентификаторы . Очень важно иметь уникальные id и имена class , чтобы во время стилизации элементов вашего плагина вы не переопределяли текущие стили страницы.
  2. Оставлять комментарии к строкам. Оставлять комментарии к строкам — это всегда хорошая практика. Это важно при работе с подключаемыми модулями jQuery, поскольку пользователям и программистам может быть трудно понять, что означает каждая строка кода, написанного кем-то другим, а попытка расшифровать код без комментариев может занять много времени.
  3. Сократите исходный код. Поскольку для создания веб-сайта требуется не только ваш плагин, важно использовать как можно меньше места и пропускной способности для конечного пользователя.

Хотя для этого нет жесткого правила, во время кодирования я лично забочусь о проектной части, прежде чем сделать свой код функциональным. В этом руководстве мы будем следовать той же модели: сначала мы напишем необходимые HTML и CSS, прежде чем приступить к написанию кода для фактического плагина jQuery Tooltip .

Создайте образец файла .html и добавьте в него следующий код.

 <div ID="jqueryToolTip_wrapper">
    <span class="jqueryToolTip_text">Текст всплывающей подсказки здесь </span>
    <span class="jqueryToolTip_arrow"></span>
</div><!-- end jqueryToolTip -->

Теперь откройте файл jqueryToolTip.css и вставьте в него указанный ниже CSS.

 #jqueryToolTip_wrapper{
			фон: нет повтора прокрутки 0 0 rgba(0, 0, 0, 0.8);
			радиус границы: 4px 4px 4px 4px;
			-webkit-border-radius: 4px 4px 4px 4px;
			-moz-border-radius: 4px 4px 4px 4px;
			цвет: #FFFFFF;
			размер шрифта: 12px;
			вес шрифта: полужирный;
			высота строки: нормальная;
			отступ: 5px;
			положение: абсолютное;
			z-индекс: 999;
			семейство шрифтов: Arial, "MS Trebuchet", без засечек;
		}
		#jqueryToolTip_wrapper .jqueryToolTip_arrow{
			вверху: авто;
			дисплей:блок;
			ширина:0;
			высота:0;
			граница: сплошная 5px;
			цвет границы: прозрачный прозрачный rgb (0,0,0) прозрачный;
			цвет границы: прозрачный прозрачный rgba (0,0,0,0,8) прозрачный;
			положение: абсолютное;
			верх:-10px;
			слева: 10 пикселей
		}
		#jqueryToolTip_wrapper .jqueryToolTip_arrow.arrow_down{
			цвет границы: rgb (0,0,0) прозрачный прозрачный прозрачный;
			цвет границы:rgba(0,0,0,0.8) прозрачный прозрачный прозрачный;
			верх:авто;
			внизу:-10px;
		}

Убедитесь, что вы включили файл .css в образец файла .html , а затем откройте файл .html с помощью браузера. Если все пойдет хорошо, вы сможете увидеть красивую всплывающую подсказку со стрелкой вверх, очень похожую на изображение, приведенное ниже.

Скриншот предварительного просмотра всплывающей подсказки jQuery

Подсказка со стрелкой вниз

Чтобы добавить стрелку вниз к той же подсказке, все, что вам нужно сделать, это добавить класс .arrow_down в диапазон с существующим классом .jqueryToolTip_arrow

До:

 <span class="jqueryToolTip_arrow"></span>

После:

 <span class="jqueryToolTip_arrow arrow_down"></span>

Требования

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

  1. Нам нужно выяснить, на какой элемент ориентироваться (потому что мы не можем показывать всплывающую подсказку для каждой отдельной анкорной ссылки).
  2. Нам нужно захватить оси X и Y на текущей якорной ссылке в состоянии наведения.
  3. Наконец, нам нужно переместить наш блок всплывающей div на текущую якорную ссылку в состоянии наведения.

Это может показаться сложным, но фильтры jQuery и элементы таргетинга CSS сделают нашу работу намного проще.

Основы плагинов jQuery

Завершающий код:

 (функция ($) {
			$.fn.jqueryToolTip = function(toolTipOptions){
			}
			}
		})(jQuery);

Приведенный выше код — это то, что вам нужно использовать каждый раз, когда вы начинаете создавать плагин с нуля. Здесь jqueryToolTip — это имя плагина, которое можно заменить чем угодно. Постарайтесь сделать его уникальным, так как два плагина с одинаковыми именами могут создать огромный беспорядок.

Настройки по умолчанию:

 вар toolTipDefaults = {
			позиция: "нижняя"
		},

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

Переопределение значений по умолчанию:

 toolTipSettings = $.extend({}, toolTipDefaults, toolTipOptions);

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

Помимо того, что мы обсуждали выше, все остальное — это простой код jQuery. Итак, теперь мы можем начать! Просто откройте файл jqueryToolTip.js и поместите в него следующий код.

 (функция ($) {
			$.fn.jqueryToolTip = function(toolTipOptions){
				вар toolTipDefaults = {
					позиция: "нижняя"
				},
				toolTipSettings = $.extend({}, toolTipDefaults, toolTipOptions);
				var toolTipTemplate = '<div id="jqueryToolTip_wrapper"><span class="jqueryToolTip_text"></span><span class="jqueryToolTip_arrow"></span></div><!-- end jqueryToolTip -->' ;
				$('тело').append(toolTipTemplate);
			}
		})(jQuery);

Мы создали переменную с именем toolTipTemplate , которая будет содержать HTML-разметку для нашего плагина jQuery ToolTip . После этого мы добавим разметку HTML к телу веб-страницы.

 $(это).каждый(функция(){
			$(это).наведение(функция(){
				// тут идет код действий, которые происходят после наведения на ссылку
			});
		});

$(this) — это ссылка на элемент, который инициирует наш плагин. Каждый раз, когда курсор конечного пользователя наводится на нужный элемент, мы показываем всплывающую подсказку и меняем текст внутри нее на attr заголовка ссылки.

 $(это).каждый(функция(){
			// при наведении
			$(это).наведение(функция(){
				var toolTipTitle = $(this).attr("title"); // получение текущего заголовка ссылки
				var toTop = $(this).offset().top; // получение текущей ссылки по оси Y
				var toLeft = $(this).offset().left; // получение текущей ссылки по оси X
				var toolTipHeight = $('#jqueryToolTip_wrapper').css("высота"); // получаем высоту всплывающей подсказки
				var itemHeight = $(this).css("высота"); // получаем высоту ссылки

				если (toolTipSettings.position == 'сверху')
				{
					$('#jqueryToolTip_wrapper').find('.jqueryToolTip_arrow').addClass('arrow_down');
					var topFinal = parseInt(toTop) - parseInt(toolTipHeight) - 10;
				}
				еще
				{
					var topFinal = parseInt(toTop) + parseInt(itemHeight) + 10;
				}

				$('.jqueryToolTip_text').html(toolTipTitle); // замена текста всплывающей подсказки текущим заголовком ссылки
				$('#jqueryToolTip_wrapper').css("display","block"); // настройка отображения всплывающей подсказки на блокировку
				$('#jqueryToolTip_wrapper').css({ // установка всплывающей подсказки слева и сверху на текущую позицию ссылки
					топ: топФинал,
					налево: налево
				});
			},функция(){
				$('#jqueryToolTip_wrapper').css("display","none"); // скрытие всплывающей подсказки после наведения
			});
		});

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

Собираем все вместе

 (функция ($) {
			$.fn.jqueryToolTip = function(toolTipOptions){

				// настройки по умолчанию для плагина
				вар toolTipDefaults = {
					позиция: "нижняя"
				},

				// расширение настроек по умолчанию
				toolTipSettings = $.extend({}, toolTipDefaults, toolTipOptions);

				// HTML-разметка для плагина всплывающей подсказки
				var toolTipTemplate = '<div id="jqueryToolTip_wrapper"><span class="jqueryToolTip_text"></span><span class="jqueryToolTip_arrow"></span></div><!-- end jqueryToolTip -->' ;

				// добавление разметки
				$('тело').append(toolTipTemplate);

				$(это).каждый(функция(){
					// при наведении
					$(это).наведение(функция(){
						var toolTipTitle = $(this).attr("title"); // получение текущего заголовка ссылки
						var toTop = $(this).offset().top; // получение текущей ссылки по оси Y
						var toLeft = $(this).offset().left; // получение текущей ссылки по оси X
						var toolTipHeight = $('#jqueryToolTip_wrapper').css("высота"); // получаем высоту всплывающей подсказки
						var itemHeight = $(this).css("высота"); // получаем высоту ссылки

						если (toolTipSettings.position == 'сверху')
						{
							$('#jqueryToolTip_wrapper').find('.jqueryToolTip_arrow').addClass('arrow_down');
							var topFinal = parseInt(toTop) - parseInt(toolTipHeight) - 10;
						}
						еще
						{
							var topFinal = parseInt(toTop) + parseInt(itemHeight) + 10;
							$('#jqueryToolTip_wrapper').find('.jqueryToolTip_arrow').removeClass('arrow_down');
						}

						$('.jqueryToolTip_text').html(toolTipTitle); // замена текста всплывающей подсказки текущим заголовком ссылки
						$('#jqueryToolTip_wrapper').css("display","block"); // настройка отображения всплывающей подсказки на блокировку
						$('#jqueryToolTip_wrapper').css({ // установка всплывающей подсказки слева и сверху на текущую позицию ссылки
							топ: топФинал,
							налево: налево
						});
					},функция(){
						$('#jqueryToolTip_wrapper').css("display","none"); // скрытие всплывающей подсказки после наведения
					});
				});
		}
		})(jQuery);

Как вызвать плагин

Вызвать наш плагин jqueryToolTip так же просто, как и любой другой плагин jQuery.

Включить файл JS:

[тип HTML = "текст/javascript" язык = "<скрипт"]

<p>Включить таблицу стилей:</p>

 <link rel="stylesheet" href="../Documents/Unzipped/jqueryToolTipPluginTutorial/jqueryToolTipPluginTutorial/jqueryToolTip.css" />

Создайте якорную ссылку с атрибутом title:

 <a href="#" title="Демонстрация всплывающей подсказки">Демонстрация всплывающей подсказки</a>

Вызов плагина (базовый):

 <тип сценария="текст/javascript">
    $(функция(){
        $('а').jqueryToolTip();
    })
</скрипт>

Вызов плагина (параметры передачи):

 <тип сценария="текст/javascript">
    $(функция(){
        $('а').jqueryToolTip({
            позиция: "верхняя"
        });
    })
</скрипт>

Законченный!

Скриншот предварительного просмотра учебника по плагину jQuery Tooltip

Живая демонстрацияСкачать исходный код