`
dyllove98
  • 浏览: 1376098 次
  • 性别: Icon_minigender_1
  • 来自: 济南
博客专栏
73a48ce3-d397-3b94-9f5d-49eb2ab017ab
Eclipse Rcp/R...
浏览量:38147
4322ac12-0ba9-3ac3-a3cf-b2f587fdfd3f
项目管理checkList...
浏览量:78287
4fb6ad91-52a6-307a-9e4f-816b4a7ce416
哲理故事与管理之道
浏览量:131410
社区版块
存档分类
最新评论

使用 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'
});

您可能感兴趣的相关文章

本文链接:使用 Toolbar.js 实现超酷的 Tooltip 风格工具栏

编译来源:梦想天空 ◆ 关注Web前端开发技术 ◆ 分享网页设计资源

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics