使用 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 手風琴插件和教程
浙公網安備 33010602011771號