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

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

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

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

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



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



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



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



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

Этот код:



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



А этот код:



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



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