使用 Toolbar.js 實現超酷的 Tooltip 風格工具欄

　　Toolbar.js 是一款幫助你快速創建 Tooltip 風格工具欄的 jQuery 插件，可以用於網站或者 Web 應用。工具欄的風格可以使用 Twitter Bootstrap 的圖標輕松定制，還提供了靈活的工具欄展示位置和圖標數量配置。

 

 

官方網站    插件下載

 

　　主要特色：

• 簡單的實現，簡單的參數設置；
• 根據需要，可以運行盡可能多的工具欄；
• 工具欄可以連接到所需的任何元素；
• 工具欄的圖標能夠通過流行的 Twitter Bootstrap 框架定制；
• 工具欄能夠響應元素的尺寸變化。

　　使用方法：

　　引入 JavaScript 文件：

<script src="jquery.min.js"></script>
<script src="jquery.toolbar.js"></script>

　　引入 CSS 文件：

<link href="jquery.toolbar.css" rel="stylesheet" />
<link href="bootstrap.icons.css" rel="stylesheet" />

　　定義工具欄 HTML：

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

　　設置工具欄參數：

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

您可能感興趣的相關文章

• 12款經典的白富美型 jQuery 圖片輪播插件
• 精心挑選的優秀jQuery Ajax分頁插件和教程
• 精心挑選的優秀 jQuery 文本特效插件和教程
• 精心挑選的美輪美奐的 jQuery 圖片特效插件
• 精心挑選12款優秀 jQuery 手風琴插件和教程

 

本文鏈接：使用 Toolbar.js 實現超酷的 Tooltip 風格工具欄

編譯來源：夢想天空 ◆ 關注Web前端開發技術 ◆ 分享網頁設計資源