—»     —»   Toolbar.js для jQuery и Bootstrap: гибкие панели инструментов в стиле iOS
  Раздел: Меню и Навигация   Комментариев: 1  

Toolbar.js для jQuery и Bootstrap: гибкие панели инструментов в стиле iOS

Не столь важно, нравится вам стиль дизайна iOS или нет. Мы не собираемся участвовать в постоянно продолжающихся дебатах о сквеморфизме. Одна тема точно не может быть оспорена. Мы говорим о дизайне панели инструментов, которую представила компания Apple в iOS. Современные сайты все чаще и чаще пытаются адаптировать этот концепт. Нажатие по иконке или ссылке раскрывает больше опций. Это позволяет экономить пространство, и уже сегодня распространилось очень широко. jQuery-плагин разработанный Paul Kinzett из Новой Зеландии – Toolbar.js – позволяет нам на любом сайте создать панели в стиле iOS. Этим инструментом невероятно просто воспользоваться.

Toolbar.js для jQuery и Bootstrap: гибкие панели инструментов в стиле iOS

Панели управления с иконками из Bootstrap от Twitter

Toolbar.js для jQuery предлагает невероятно простую и доступную возможность создавать панели инструментов, которые можно прикрепить к любому элементу, как горизонтально, так и вертикально. Таким образом можно создать бесчисленное количество панелей. Kinzett предпочел использовать набор иконок, задействованный в Bootstrap от Twitter, который также привязан к определенному коду CSS. Таким образом, сохраняется их адаптивность, что позволяет вам без труда управлять ими при помощи установленных методов Bootstrap.

Имея сотни символов в руках, можно создать даже самую сложную панель управления. Энтузиасты jQuery сразу же почувствуют себя как дома. Как обычно, с самого начала нужно интегрировать javascript:

<script src="jquery.min.js"></script>
<script src="jquery.toolbar.js"></script>

Затем нужно применять таблицы стилей для панелей, и для иконок Bootstrap:

<link href="jquery.toolbar.css" rel="stylesheet" />
<link href="bootstrap.icons.css" rel="stylesheet" />

После этого этапа вам нужно будет определить саму панель, что можно сделать следующим образом:

<div id="user-toolbar-options">
<a href="#"><i class="icon-user"></i></a>
<a href="#"><i class="icon-star"></i></a>
<a href="#"><i class="icon-edit"></i></a>
<a href="#"><i class="icon-delete"></i></a>
<a href="#"><i class="icon-ban"></i></a>
</div>

Вы видите, как иконки вызываются из Bootstrap посредством соответствующих классов. Действия, которые вы хотите привязать к конкретной иконке, можно запускать посредством элемента A. Наконец, нам нужно создать соединение между панелью и элементом, которым нужно управлять при помощи этой панели.

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

У вас есть возможность выставить опции расположения панели (сверху или снизу; справа или слева от элемента, где первые два параметра дадут нам горизонтальную панель, а два последних – вертикальную).

Этот код:

$('#vertical-toolbar').toolbar({
content: '#user-toolbar-options',
position: 'right'
});

даст нам следующий результат:

Toolbar.js для jQuery и Bootstrap: гибкие панели инструментов в стиле iOS

А этот код:

$('#user-toolbar').toolbar({
content: '#user-toolbar-options',
position: 'top'
});

сделает вашу панель такой:

Toolbar.js для jQuery и Bootstrap: гибкие панели инструментов в стиле iOS

Число иконок ограничивается лишь вашим собственным видением.

Toolbar.js можно скачать с Github. Он распространяется под лицензионным соглашением MIT, и может быть использован для личных и коммерческих проектов.

Ссылки:

* Toolbar.js – Github-репозиторий
* Сайт проекта с документацией и демо – Toolbar.js
* Glyphicons – Иконки используемые в Bootstrap
* Bootstrap – Github-репозиторий Twitter
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, iOS
Опубликовал Design FactoRy   Прочитано (раз): 9129   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 16 июля 2013 @ 15:10
Написал: Стас — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Скачал, открыл исходник, назначил пару ссылок в этих тулбарах, а они не работают. Никто с этим не сталкивался?
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Кассовый аппарат цена
Сегодня акция! Кассовые аппараты тех! Заходите
kkm-kassa.ru
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Выездные мастер классы
Дети и взрослые в восторге! Уникальные выездные мастер-классы. Заказывайте
paint4me.ru
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Октябрь 2019    »
ПнВтСрЧтПтСбВс
 123456
78910111213
14151617181920
21222324252627
28293031