Toolbar.js-實用的tooltip樣式jQuery工具欄插件

Toolbar.js是一款非常實用的Tooltips樣式的jQuery工具欄插件。類似的HTML5中國還分享過一款使用 純javacript編寫的輕量級tooltips工具提示插件html5 tooltipsjs ；Toolbar.js使用非常簡單，可以和Font Awesome字體圖標配合使用，并且可以制作非常酷的工具欄彈出動畫效果。它的特點還有：

• 使用簡單，只需配置少量的參數。
• 內置了一組可選的工具欄按鈕。
• 工具欄可以附加在任何你需要的元素之上。
• 工具欄按鈕可以通過Font Awesome字體圖標來定制。
• 可以定制工具欄的位置，顏色和動畫等。
• 工具欄是響應式的，會在視口縮放時隨按鈕的位置而動態改變。
• 使用CSS3來制作工具欄的動畫效果。
• 兼容IE8+的所有現代瀏覽器。

查看演示      下載插件

使用方法

使用該jQuery工具欄插件需要在頁面中引入jquery和jquery.toolbar.js以及jquery.toolbar.css文件。另外為了使用Font Awesome字體圖標還需要引入Font Awesome的相關文件。

<link href="css/jquery.toolbar.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.toolbar.js"></script>

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>

初始化插件

在頁面DOM元素加載完畢之后，你可以為任何你需要的DOM元素來附加工具欄，例如：

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

配置參數

Toolbar.js插件有以下一些可用的配置參數。

• content：指向工具欄內容容器的ID號。

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

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

方法

來源：jQuery之家