欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

Toolbar.js-实用的tooltip样式jQuery工具栏插件_html/css_WEB-ITnose

程序员文章站 2022-05-27 14:24:28
...
简要教程

Toolbar.js是一款非常实用的Tooltips样式的jQuery工具栏插件。类似的HTML5中国还分享过一款使用 纯javacript编写的轻量级tooltips工具提示插件html5 tooltipsjs ；Toolbar.js使用非常简单，可以和Font Awesome字体图标配合使用，并且可以制作非常酷的工具栏弹出动画效果。它的特点还有：

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

查看演示 下载插件

使用方法

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

HTML结构

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

初始化插件

在页面DOM元素加载完毕之后，你可以为任何你需要的DOM元素来附加工具栏，例如：

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

配置参数

Toolbar.js插件有以下一些可用的配置参数。

  • content：指向工具栏内容容器的ID号。 
$('#button').toolbar({  content: '#toolbar-options',});
  • position：工具栏可以放在元素的上下左右4个位置。通过该参数可以进行位置的设置。 
$('#button').toolbar({  content: '#toolbar-options',  position: 'bottom'});
  • style：选择工具栏的样式。它接收和CSS按钮相同的值。 
$('#button').toolbar({  content: '#toolbar-options',  position: 'bottom',  style: 'primary'});
  • animation：通过该参数可以设置工具栏的动画效果。共有5中可选的CSS动画效果，具体参看DEMO中的例子。这5种动画的名称分别为：standard, flip, grow, flyin, bounce。 
$('#button').toolbar({  content: '#toolbar-options',  position: 'bottom',  style: 'primary',  animation: 'flip'});
  • event：工具栏可以通过鼠标点击或鼠标滑过来触发。 
$('#button').toolbar({  content: '#toolbar-options',  position: 'bottom',  style: 'primary',  event: 'click'});
  • hideOnClick：是否在点击页面的任何其它地方时关闭已显示的工具栏。rugged设置为false或不设置，那么需要再次点击按钮才能关闭工具栏。 
$('#button').toolbar({  content: '#toolbar-options',  position: 'bottom',  style: 'primary',  event: 'click'});
  • adjustment：用于调整工具栏显示的位置。它接收一个正整数。通常在非标准按钮上使用工具栏时使用该选项来微调工具栏的显示位置。 
$('a').toolbar({  content: '#tool-options',  position: 'top',  adjustment: 35});

注意：

触发工具栏的元素在工具栏可见时会被添加一个.pressed的class。

如果需要为图标第一任何JavaScript脚本，需要在调用工具栏之前定义。

高级应用

你可以通过data属性来为多个元素使用同一个工具栏。

    
$('div[data-toolbar="user-options"]').toolbar( options );
    
 你还可以在按钮元素上使用data属性为某个工具栏配置单独的属性。 
    
    
 事件 
    
你可以通过.on()方法来监听发生在工具栏上的事件。
    
$('#element').on('toolbarShown',   function( event ) {      // this: the element the toolbar is attached to   });
    



事件      描述     



toolbarShown      在工具栏显示的时候触发     



toolbarHidden      在工具栏隐藏的时候触发     



toolbarItemClick      在工具栏被点击的时候触发     




方法
    



方法      参数      描述     



getToolbarElement      None      获取包装每一个工具按钮的元素     




来源：jQuery之家

Toolbar.js-实用的tooltip样式jQuery工具栏插件_html/css_WEB-ITnose
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。


相关文章
相关视频


					

															

						相关标签：												
							Toolbar.js-实用的tooltip样式jQuery工具栏插件						
											

															

						

							上一篇：							
								如何阅读项目代码							
						

						

							下一篇：							
								javascript对象有哪三个属性							
						

					

															

						

							推荐阅读