安云网 - AnYun.ORG | 专注于网络信息收集、网络数据分享、网络安全研究、网络各种猎奇八卦。
当前位置: 安云网 > 技术关注 > 编程茶楼 > 脚本语言 > 使用 Toolbar.js 实现超酷的 Tooltip 风格工具栏

使用 Toolbar.js 实现超酷的 Tooltip 风格工具栏

时间:2015-02-18来源: 作者:点击:
使用 Toolbar.js 实现超酷的 Tooltip 风格工具栏

  Toolbar.js 是一款帮助你快速创建 Tooltip 风格工具栏的 jQuery 插件,可以用于网站或者 Web 应用。工具栏的风格可以使用 Twitter Bootstrap 的图标轻松定制,还提供了灵活的工具栏展示位置和图标数量配置。 //本文来自安云网

使用 Toolbar.js 实现超酷的 Tooltip 风格工具栏 //本文来自安云网

官方网站    插件下载 //内容来自安云网

  主要特色:

  • 简单的实现,简单的参数设置;
  • 根据需要,可以运行尽可能多的工具栏;
  • 工具栏可以连接到所需的任何元素;
  • 工具栏的图标能够通过流行的 Twitter Bootstrap 框架定制;
  • 工具栏能够响应元素的尺寸变化。

  使用方法:

  引入 JavaScript 文件:

//内容来自AnYun.ORG

<script src="jquery.min.js"></script>
<script src="jquery.toolbar.js"></script>
 //内容来自安云网 

  引入 CSS 文件: //内容来自AnYun.ORG

<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>	
 
//内容来自安云网

  设置工具栏参数:

//内容来自AnYun.ORG

$('#user-toolbar').toolbar({
	content: '#user-toolbar-options', 
	position: 'top'
}); //内容来自AnYun.ORG 
QQ群: WEB开发者官方总群(196171896) 验证消息:Admin10000
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
验证码: 点击我更换图片
相关内容
推荐内容