前面的文章中我们介绍了超棒的20款javascript工具提示条(tooltips)类库,在这篇文章中我们曾经提到过Qtip2这个强大的jQuery工具提示插件,这个jQuery插件能够帮助你快速创建强大的工具提示(tooltip)功能。如果大家使用微博的话,肯定会经常类似如下的用户信息界面,这个界面使用的就是一个工具提示功能。使用Qtip2你也可以快速开发出类似的提示功能。
在接下来的内容中,我们将创建一个博客文章阅读页面,并且提供两个“按钮”来控制“删除”和“喜欢”,界面如下:
删除tooltip
相关信息提示
以上两个tooltip分别使用点击和hover来触发。
主要相关代码
javascript
倒入相关类库:
- <scripttype="text/javascript"src="js/jquery-1.8.2.min.js"></script>
- <scripttype="text/javascript"src="js/jquery.qtip.min.js"></script>
生成delete操作相关工具提示:
- $('<div />').qtip({
- content:{
- text:'<button id="confirm" style="font-size:12px;margin-left:0px">Yes</button> <button id="cancel" style="font-size:12px;margin-left:0px">No</button>',
- title:{
- text:'Are you sure to delete ?',
- button:true
- }
- },
- events:{
- show:function(event, api){
- deletelink = $(event.originalEvent.target);
- },
- render:function(event, api){
- $('button', api.elements.content).click(api.hide);
- var tmpdelid = $('.ui-tooltip');
- tmpdelid.on("click",'#confirm',function(e){
- deletelink.closest('article').slideUp();
- });
- }
- },
- position:{
- target:'event',
- my:'center',// Use the corner...
- at:'center'// ...and opposite corner
- },
- show:{
- event:'click',
- target: $('.delete'),
- effect:function(offset){
- $(this).slideDown(150);
- }
- },
- hide:{
- event:'unfocus',
- target: $('.delete'),
- effect:function(offset){
- $(this).slideUp(150);
- }
- },
- style:{
- classes:'ui-tooltip-shadow ui-tooltip-jtools',
- width:200
- }
- });
代码说明:
以上代码中使用content来定义标题,内容及其关闭按钮。使用events属性来定义 show 和 render方法,这两个方法的区别在于,render只在初始化的时候运行一次。show方法在每次展示工具提示的时候都调用。
hide,show,style属性用来定义相关的事件显示和隐藏的触发,及其相关样式设置。
这里我们使用一个小技巧,使用一个tooltip div来展示页面上所有的工具条提示。具体实现,这里使用show/hide中的target属性来定义。
另外两个工具条的实现也类似。完整代码如下:
- $(function(){
- var deletelink =null;
- $('#site').qtip({
- content:{
- text:'Welcome to our Geek Blogs: http://www.gbin1.com , we hope you can find a lot of interesting stuff',
- title:{
- text:'wlecome',
- button:true
- }
- }
- });
希望大家喜欢这个简单实用的工具条提示功能插件,如果你有任何使用问题,请给我们留言!
完整代码及内容请参见链接:http://www.gbtags.com/gb/share/5886.htm