jQuery工具导航提示插件Toolbar.js

使用方法：

引入CSS样式文件、jQuery库文件、插件JS文件。另外为了使用Font Awesome字体图标还需要引入Font Awesome的相关文件。

<link rel="stylesheet" type="text/css" href="css/default.css">
<link href="http://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="css/documentation.css">
<link href="css/prettify.css" rel="stylesheet">
<link href="css/jquery.toolbar.css" rel="stylesheet" />
<!--[if IE]>
<script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
<![endif]-->

HTML结构：

你可以在页面中的任何地方定义工具栏的HTML结构。但是需要记住的是为工具栏添加一个hidden的class类来将其隐藏。

<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 );

$('#button').toolbar({
  content: '#toolbar-options',
});

Toolbar.js插件有以下一些可用的配置参数。
content：指向工具栏内容容器的ID号。

position：工具栏可以放在元素的上下左右4个位置。通过该参数可以进行位置的设置。

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

style：选择工具栏的样式。它接收和CSS按钮相同的值。

$('#button').toolbar({
  content: '#toolbar-options',
  position: 'bottom',
  style: 'primary'
});

animation：通过该参数可以设置工具栏的动画效果。共有5中可选的CSS动画效果，具体参看DEMO中的例子。这5种动画的名称分别为：standard, flip, grow, flyin, bounce。

$('#button').toolbar({
  content: '#toolbar-options',
  position: 'bottom',
  style: 'primary',
  animation: 'flip'
});

event：工具栏可以通过鼠标点击或鼠标滑过来触发。

$('#button').toolbar({
  content: '#toolbar-options',
  position: 'bottom',
  style: 'primary',
  event: 'click'
});

hideOnClick：是否在点击页面的任何其它地方时关闭已显示的工具栏。rugged设置为false或不设置，那么需要再次点击按钮才能关闭工具栏。

$('#button').toolbar({
  content: '#toolbar-options',
  position: 'bottom',
  style: 'primary',
  event: 'click'
});

adjustment：用于调整工具栏显示的位置。它接收一个正整数。通常在非标准按钮上使用工具栏时使用该选项来微调工具栏的显示位置。

$('a').toolbar({
  content: '#tool-options',
  position: 'top',
  adjustment: 35
});

注意：

触发工具栏的元素在工具栏可见时会被添加一个.pressed的class。

如果需要为图标第一任何JavaScript脚本，需要在调用工具栏之前定义。

高级应用：

你可以通过data属性来为多个元素使用同一个工具栏。

<div data-toolbar="user-options"></div>    
$('div[data-toolbar="user-options"]').toolbar( options );

你还可以在按钮元素上使用data属性为某个工具栏配置单独的属性。

<div
   data-toolbar="user-options"
   data-toolbar-event="click"
   data-toolbar-style="primary"
>

事件：

你可以通过.on()方法来监听发生在工具栏上的事件。

$('#element').on('toolbarShown',
   function( event ) {
      // this: the element the toolbar is attached to
   }
);

方法：