fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

Toolbar.js
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:http://paulkinzett.github.com/toolbar/
GitHub:https://github.com/paulkinzett/toolbar
网站描述:一个产生工具列的jQuery插件

Toolbar.js是一款非常实用的Tooltips样式的jquery工具栏插件。该工具栏插件使用简单,可以和Font Awesome字体图标配合使用,并且可以制作非常酷的工具栏弹出动画效果。


Toolbar.js特点:

  • 使用简单,只需配置少量的参数。
  • 内置了一组可选的工具栏按钮。
  • 工具栏可以附加在任何你需要的元素之上。
  • 工具栏按钮可以通过Font Awesome字体图标来定制。
  • 可以定制工具栏的位置,颜色和动画等。
  • 工具栏是响应式的,会在视口缩放时随按钮的位置而动态改变。
  • 使用css3来制作工具栏的动画效果。
  • 兼容IE8+的所有现代浏览器。


Toolbar.js使用方法

使用该jQuery工具栏插件需要在页面中引入jquery和jquery.toolbar.js以及jquery.toolbar.css文件。另外为了使用Font Awesome字体图标还需要引入Font Awesome的相关文件。

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

你可以在页面中的任何地方定义工具栏的html结构。但是需要记住的是为工具栏添加一个hidden的class类来将其隐藏。HTML结构

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

在页面dom元素加载完毕之后,你可以为任何你需要的DOM元素来附加工具栏,例如:初始化插件

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


链接: https://fly63.com/nav/1548

more>>
相关栏目
jQuery之家
致力于搜集和整理各种jQuery插件,jQuery特效...
官网
fullPage.js
jQuery全屏滚动插件
官网GitHub
Waterfall.js
瀑布流无限加载插件
官网GitHub
Raty
一个非常棒的jQuery 评分插件
官网GitHub
Bootstrap-waterfall
一款基于Bootstrap仿Pinterest网站的网格瀑布流插件
官网GitHub
Jcrop
一个功能强大的 jQuery 图像裁剪插件
官网GitHub
jcarousel
jQuery轮播图插件
官网GitHub
Parallax.js
一款jQuery滚动视觉差插件
官网GitHub
vegas
一个jQuery / Zepto幻灯片插件
官网GitHub
paroller.js
一款轻量级的页面滚动视觉差特效jquery插件
官网GitHub
lazyload.js
jquery图片懒加载插件
官网GitHub
alertify.js
jQuery酷炫的各种消息提示插件
官网GitHub
pickadate.js
一个轻量级的 jQuery 日期选择插件
官网GitHub
chosen.js
基于jquery的下拉选择框美化插件
官网GitHub
threesixty.js
360度产品图片预览jQuery插件
官网GitHub
textillate.js
实现动感的 CSS3 文本动画的简单插件
官网GitHub

手机预览