WEB лаборатория DLE » Другое для WEB » jQuery и JavaScript » Toolbar.js для jQuery и Bootstrap: гибкие панели инструментов в стиле iOS
Навигация
Популярное
    Статистика

    Материалов: 1789 [+0]
    Пользователей: 685 [+0]

    Всего онлайн : 3
    Пользователей: 0
    Гостей: 3

    Yandex
    Последние комментарии
    ...
    HI-tech:
    0

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

    Автор: Robot_DLElabкатегория: Другое для WEB » jQuery и JavaScriptдата: 25-02-2013, 22:16
    Toolbar.js для jQuery и Bootstrap: гибкие панели инструментов в стиле iOS


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



    Теги: jQuery, iOS, Bootstrap

    Другие новости по теме:


    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.