簡(jiǎn)要教程

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

• 使用簡(jiǎn)單，只需配置少量的參數(shù)。
• 內(nèi)置了一組可選的工具欄按鈕。
• 工具欄可以附加在任何你需要的元素之上。
• 工具欄按鈕可以通過Font Awesome字體圖標(biāo)來(lái)定制。
• 可以定制工具欄的位置，顏色和動(dòng)畫等。
• 工具欄是響應(yīng)式的，會(huì)在視口縮放時(shí)隨按鈕的位置而動(dòng)態(tài)改變。
• 使用CSS3來(lái)制作工具欄的動(dòng)畫效果。
• 兼容IE8+的所有現(xiàn)代瀏覽器。

查看演示 ???? 下載插件

使用方法

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

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

HTML結(jié)構(gòu)

你可以在頁(yè)面中的任何地方定義工具欄的HTML結(jié)構(gòu)。但是需要記住的是為工具欄添加一個(gè)hidden的class類來(lái)將其隱藏。

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

初始化插件

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

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

配置參數(shù)

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

• content：指向工具欄內(nèi)容容器的ID號(hào)。

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

• position：工具欄可以放在元素的上下左右4個(gè)位置。通過該參數(shù)可以進(jìn)行位置的設(shè)置。

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

• style：選擇工具欄的樣式。它接收和CSS按鈕相同的值。

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

• animation：通過該參數(shù)可以設(shè)置工具欄的動(dòng)畫效果。共有5中可選的CSS動(dòng)畫效果，具體參看DEMO中的例子。這5種動(dòng)畫的名稱分別為：standard, flip, grow, flyin, bounce。

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

• event：工具欄可以通過鼠標(biāo)點(diǎn)擊或鼠標(biāo)滑過來(lái)觸發(fā)。

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

• hideOnClick：是否在點(diǎn)擊頁(yè)面的任何其它地方時(shí)關(guān)閉已顯示的工具欄。rugged設(shè)置為false或不設(shè)置，那么需要再次點(diǎn)擊按鈕才能關(guān)閉工具欄。

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

• adjustment：用于調(diào)整工具欄顯示的位置。它接收一個(gè)正整數(shù)。通常在非標(biāo)準(zhǔn)按鈕上使用工具欄時(shí)使用該選項(xiàng)來(lái)微調(diào)工具欄的顯示位置。

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

注意：

觸發(fā)工具欄的元素在工具欄可見時(shí)會(huì)被添加一個(gè).pressed的class。

如果需要為圖標(biāo)第一任何JavaScript腳本，需要在調(diào)用工具欄之前定義。

高級(jí)應(yīng)用

你可以通過data屬性來(lái)為多個(gè)元素使用同一個(gè)工具欄。

<div data-toolbar="user-options"></div>

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

你還可以在按鈕元素上使用data屬性為某個(gè)工具欄配置單獨(dú)的屬性。

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

事件

你可以通過.on()方法來(lái)監(jiān)聽發(fā)生在工具欄上的事件。

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

事件	描述
toolbarShown	在工具欄顯示的時(shí)候觸發(fā)
toolbarHidden	在工具欄隱藏的時(shí)候觸發(fā)
toolbarItemClick	在工具欄被點(diǎn)擊的時(shí)候觸發(fā)

方法

方法	參數(shù)	描述
getToolbarElement	None	獲取包裝每一個(gè)工具按鈕的元素

來(lái)源：jQuery之家