使用Qtip2来开发功能强大的删除和信息提示功能

• 在线演示1
•  
• 本地下载
 

 

 

申请达人，去除赞助商链接

前面的文章中我们介绍了超棒的20款javascript工具提示条(tooltips)类库，在这篇文章中我们曾经提到过Qtip2这个强大的jQuery工具提示插件，这个jQuery插件能够帮助你快速创建强大的工具提示（tooltip）功能。如果大家使用微博的话，肯定会经常类似如下的用户信息界面，这个界面使用的就是一个工具提示功能。使用Qtip2你也可以快速开发出类似的提示功能。

在接下来的内容中，我们将创建一个博客文章阅读页面，并且提供两个“按钮”来控制“删除”和“喜欢”，界面如下：

删除tooltip

相关信息提示

以上两个tooltip分别使用点击和hover来触发。

主要相关代码

javascript

倒入相关类库：

1. <scripttype="text/javascript"src="js/jquery-1.8.2.min.js"></script>
2. <scripttype="text/javascript"src="js/jquery.qtip.min.js"></script>

 

生成delete操作相关工具提示：

1. $('<div />').qtip({
2. content:{
3. text:'<button id="confirm" style="font-size:12px;margin-left:0px">Yes</button>&nbsp;<button id="cancel" style="font-size:12px;margin-left:0px">No</button>',
4. title:{
5. text:'Are you sure to delete ?',
6. button:true
7. }
8. },
9. events:{
10. show:function(event, api){
11. deletelink = $(event.originalEvent.target);
12. },
13. render:function(event, api){
14. $('button', api.elements.content).click(api.hide);
15. var tmpdelid = $('.ui-tooltip');
17. tmpdelid.on("click",'#confirm',function(e){
18. deletelink.closest('article').slideUp();
19. });
20. }
21. },
22. position:{
23. target:'event',
24. my:'center',// Use the corner...
25. at:'center'// ...and opposite corner
27. },
28. show:{
29. event:'click',
30. target: $('.delete'),
31. effect:function(offset){
32. $(this).slideDown(150);
33. }
34. },
35. hide:{
36. event:'unfocus',
37. target: $('.delete'),
38. effect:function(offset){
39. $(this).slideUp(150);
40. }
41. },
42. style:{
43. classes:'ui-tooltip-shadow ui-tooltip-jtools',
44. width:200
45. }
46. });

 

 

 

代码说明：

以上代码中使用content来定义标题，内容及其关闭按钮。使用events属性来定义 show 和 render方法，这两个方法的区别在于，render只在初始化的时候运行一次。show方法在每次展示工具提示的时候都调用。

hide，show，style属性用来定义相关的事件显示和隐藏的触发，及其相关样式设置。

这里我们使用一个小技巧，使用一个tooltip div来展示页面上所有的工具条提示。具体实现，这里使用show/hide中的target属性来定义。

另外两个工具条的实现也类似。完整代码如下：

1. $(function(){
2. var deletelink =null;
3. $('#site').qtip({
4. content:{
5. text:'Welcome to our Geek Blogs: http://www.gbin1.com , we hope you can find a lot of interesting stuff',
6. title:{
7. text:'wlecome',
8. button:true
9. }
10. }
11. });

 

希望大家喜欢这个简单实用的工具条提示功能插件，如果你有任何使用问题，请给我们留言！

完整代码及内容请参见链接：http://www.gbtags.com/gb/share/5886.htm