infoBox — всплывающие информационные блоки
jQuery плагин для создания информационных блоков, которые будут появляться при наведении курсора мыши.
Шаг 1 : Подключаем js
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script type="text/javascript" src="js/infoBox.js"></script>
Шаг 2 : Формирование HTML контента
Далее необходимо создать html контент. Для примера будет достаточно поместить в параграф ссылку со специальным идентификатором.
<p>This will the paragraph content <a id="sampledata">This will be the information box content</a> </p>
Шаг 3 : Инициализация плагина
$(document).ready(function(){ $('#sampledata').infoBox(); });
Стандартные настройки: ширина блока 200, позиция ниже иконки знака, белый цвет текста и чёрный фон.
Дополнительные опции:
Существует целый ряд дополнительных настроек:
$(document).ready(function(){ $('#sampledata').infoBox({ "width":300, // ширина блока "position":"above", // позиция информационного блока "text_color":"white", // цвет текста "bg_color":"grey" // цвет фона }); });
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://github.com/ajarunthomas/infoBox
Перевел: Станислав Протасевич
Урок создан: 19 Мая 2017
Просмотров: 10801
Правила перепечатки
5 последних уроков рубрики "jQuery"
-
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
-
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
-
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
-
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
-
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.