时间:2021-07-01 10:21:17 帮助过:8人阅读
Toolbar.js是一款非常实用的Tooltips样式的jQuery工具栏插件。类似的HTML5中国还分享过一款使用 纯javacript编写的轻量级tooltips工具提示插件html5 tooltipsjs ;Toolbar.js使用非常简单,可以和Font Awesome字体图标配合使用,并且可以制作非常酷的工具栏弹出动画效果。它的特点还有:
查看演示 下载插件
使用方法
使用该jQuery工具栏插件需要在页面中引入jquery和jquery.toolbar.js以及jquery.toolbar.css文件。另外为了使用Font Awesome字体图标还需要引入Font Awesome的相关文件。
HTML结构
你可以在页面中的任何地方定义工具栏的HTML结构。但是需要记住的是为工具栏添加一个hidden的class类来将其隐藏。
初始化插件
在页面DOM元素加载完毕之后,你可以为任何你需要的DOM元素来附加工具栏,例如:
$('#element').toolbar( options );
配置参数
Toolbar.js插件有以下一些可用的配置参数。
$('#button').toolbar({ content: '#toolbar-options',});
$('#button').toolbar({ content: '#toolbar-options', position: 'bottom'});
$('#button').toolbar({ content: '#toolbar-options', position: 'bottom', style: 'primary'});
$('#button').toolbar({ content: '#toolbar-options', position: 'bottom', style: 'primary', animation: 'flip'});
$('#button').toolbar({ content: '#toolbar-options', position: 'bottom', style: 'primary', event: 'click'});
$('#button').toolbar({ content: '#toolbar-options', position: 'bottom', style: 'primary', event: 'click'});
$('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之家