Главная » Каталог » Tooltips » Toolbar.js - jQuery плагин для создания панелей инструментов во всплывающих подсказках

Tooltips

Toolbar.js - jQuery плагин для создания панелей инструментов во всплывающих подсказках



Подключение плагина и создание базовых кнопок и панелей инструментов

Первым делом, как нам рекомендуют разработчики этого плагина, необходимо на странице сайта подключить библиотеку jQuery (не нашел, правда, рекомендаций по версии библиотеки, начиная с какой можно использовать, но, подглянул в код, и взял как у автора, jQuery - 1.8.3), сам скрипт плагина и файл его стилей:

Код

<link href="jquery.toolbar.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.toolbar.js"></script>


Я бы еще, тут же, не теряя времени, подключил бы и файл стилей Font Awesome, так будет проще работать.

Код

<link href="jquery.toolbar.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.toolbar.js"></script>


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

Вариант кода панели инструментов:

Код

<div id="toolbar-options" class="hidden">
  <a href="#"><i class="fa fa-plane"></i></a>
  <a href="#"><i class="fa fa-car"></i></a>
  <a href="#"><i class="fa fa-bicycle"></i></a>
</div>


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

Код

$('#element').toolbar( options );


где вместо #element будет нужный вам элемент страницы сайта со своим id. В качестве элемента, к которому можно привязать такую всплывающую панель инструментов, можно использовать кнопку. Давайте создадим базовую кнопку с какой-нибудь иконкой.
Разработчики нам подсказывают, что кнопка создаётся простым добавлением класса .btn-toolbar для элемента HTML, например для блочного элемента div

Код

<div class="btn-toolbar">...</div>


давайте добавим к ней какую-нибудь иконку, она добавляется просто - заходите на страницу с иконками Font Awesome, выбираете нужную, кликнув по ней, откроется страница с этой иконкой и кодом для её вставки, копируете этот код и вставляете внуть нашего блока div

Код

<div class="btn-toolbar"><i class="fa fa-heart-o" aria-hidden="true"></i></div>


зайдите на демо-страницу по ссылке расположенной ниже, посмотрите какие у нас уже кнопочки красявые получились

Демо

Чтож, у нас есть кнопка и есть готовая панелька инструментов для неё, осталось привязать эту панельку к нашей кнопке! Давайте для нашей первой кнопки, с сердечком которая на демо-странице, присвоим какой-нибудь идентификатор, к примеру, panelka:

Код

<div id="panelka" class="btn-toolbar"><i class="fa fa-heart-o" aria-hidden="true"></i></div>


осталось прописать только скрипт активации плагина и указать в нём этот идентификатор:

Код

<head>
...
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#panelka').toolbar({
content: '#toolbar-options',
});
  });
</script>
</head>


Вот и всё, теперь вы можете опять зайти на демо-страницу и посмотреть, как для первой сверху кнопки всплывает панелька инструментов. Базовая конструкция готова.

Демо

Варианты цветового оформления кнопок и панелей инструментов

Цветовое оформление кнопок меняется очень просто: добавлением нужного класса к элементу, при этом класс btn-toolbar по-прежнему остаётся, например:

Код

<div class="btn-toolbar btn-toolbar-primary">...</div>


доступные варианты цветовых схем смотрите на скриншоте ниже:



и посмотрите демо с этими вариантами оформления кнопок:

Демо

А как сделать так, чтобы кнопка и всплывающая панель инструментов для неё были в одной цветовой гамме? а очень просто: в скрипте активации дописываем стиль для панели, тот же что и для кнопки, например, есть кнопка в стиле оформления primary и панель инструментов для неё

Код

<div id="panelka" class="btn-toolbar btn-toolbar-primary"><i class="fa fa-heart-o" aria-hidden="true"></i></div>

div id="toolbar-options" class="hidden">
  <a href="#"><i class="fa fa-plane"></i></a>
  <a href="#"><i class="fa fa-car"></i></a>
  <a href="#"><i class="fa fa-bicycle"></i></a>
</div>


тогда скрипт активации панельки будет выглядеть так:

Код

<script type="text/javascript">
jQuery(document).ready(function($) {
$('#panelka').toolbar({
content: '#toolbar-options',
style: 'primary'
});
  });
</script>


Любуемся результатом по ссылке ниже.

Демо

Ориентация всплывающей панели инструментов и анимация её появления

Переходим к самому интересному. Наверняка вам захочется управлять выводом всплывающих подсказок с панелями инструментов: где-то захочется её вывести сверху, а где-то сбоку или снизу. Как это делается?
Очень просто - добавлением в скрипте активации всего одной строки с указанием где именно вывести подсказку, значения тут такие: top, bottom, left, right.
Привожу пример:

Код

<script type="text/javascript">
jQuery(document).ready(function($) {
$('#panelka').toolbar({
content: '#toolbar-options',
position: 'left',
style: 'primary'
});
  });
</script>


Смотрим что у нас получилось, сейчас панелька должна появиться слева от кнопки:

Демо

Отлично! Теперь - как добавить анимацию для появления панели инструментов? Опять же, через скрипт активации! И опять всего лишь добавив одну строку, в которой указать, какой вид анимации будет воспроизводиться. Доступны следующие варианты анимации:
- standart (по умолчанию,если не указан ни один вид в скрипте активации плагина)
- flip
- grow
- flyin
- bounce

Пример указания анимации в скрипте активации плагина:

Код

<script type="text/javascript">
jQuery(document).ready(function($) {
$('#panelka').toolbar({
content: '#toolbar-options',
position: 'left',
style: 'primary',
animation: 'bounce'
});
  });
</script>


Посмотрите демо-примеры с возможными вариантами анимации.

flip grow flyin bounce

Варианты вызова всплывающей подсказки с панелью управления

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

Код

<script type="text/javascript">
jQuery(document).ready(function($) {
$('#panelka').toolbar({
content: '#toolbar-options',
position: 'left',
style: 'primary',
animation: 'bounce',
event: 'click'
});
  });
</script>


Демо

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

Код

<script type="text/javascript">
jQuery(document).ready(function($) {
$('#panelka').toolbar({
content: '#toolbar-options',
position: 'left',
style: 'primary',
animation: 'bounce',
event: 'click',
hideOnClick: true
});
  });
</script>


Демо

До этого мы рассматривали в качестве элемента блочный элемент div, но тоже самое мы можем проделать,к примеру, с ссылкой:

Код

<head>
...
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#link-toolbar').toolbar({
content: '#toolbar-options',
position: 'top',
adjustment: 35,
style: 'primary',
animation: 'bounce'
});
  });
</script>
</head>

<body>
<a id="link-toolbar" class="demo-link">Options</a>

<div id="toolbar-options" class="hidden">
  <a href="#"><i class="fa fa-plane"></i></a>
  <a href="#"><i class="fa fa-car"></i></a>
  <a href="#"><i class="fa fa-bicycle"></i></a>
</div>
</body>


Демо
Обсуждение материала:
Комментариев: 0
avatar

Другие материалы:

    Дополнительная информация во всплывающих подсказках на CSS

    13.04.2017

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

    Комментарии: 0   Просмотры: 116

    PowerTip - jQuery плагин для создания всплывающих подсказок

    06.11.2016

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

    Комментарии: 0   Просмотры: 259

    Tooltipster - гибкий и расширяемый jQuery плагин для создания современных всплывающих подсказок

    09.10.2016

    Достаточно прост для всех и достаточно мощный для всего! Ни много, ни мало, именно такой слоган у авторов этого jQuery плагина стоит на главной! И, скажу я вам, если они и лукавят, то лишь самую малость - возможности этого плагина для создания всплывающих подсказок и вправду впечатляют!

    Комментарии: 0   Просмотры: 784

Теги материала

Хостинг от uCoz