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

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

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


Сделать гербовую печать
Оборудование для изготовления печатей. Изготовление печатей
pechatmaster.ru
Кассовый аппарат цена
Сегодня акция! Кассовые аппараты тех! Заходите
kkm-kassa.ru
Вопрос юристу
Вопрос юристу . Адвокат Игорь Ткаченко. Положительный результат
yunyakova-kyra.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930