infoBox — всплывающие информационные блоки

demosourse

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"

^ Наверх ^