qTip2 精致的jQuery提示信息插件

点击打开链接本文转载至 郑阳星的博客   

作者：zccst（转） 

三个文件： 
<link href="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.css" rel="stylesheet" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script src="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.js"></script> 


从官方网站下载最新版本时，可以选择相应的样式及插件；可选的样式包括几种色彩风格(Colour Styles)、CSS3相关样式如圆角；以及以下各种插件，可根据自己需要选择： 

Ajax，这个不用说，请求远程内容的 
Tips，气泡对话效果，如箭头 
Modal，模态对话框效果，如jQuery UI Dialog / ThickBox 的效果 
Image map，提供对map内area标记的提示支持 
SVG，对SVG元素提供提示的支持 
BGIFrame，用于IE6这种古董，如遮住select控件等 
除了以上插件的功能外，它的主要功能有（仅列出较常用的）： 

设置提示的内容、标题、关闭按钮等 
使用元素的属性，来作为提示信息内容，如链接的标题(<a title="提示信息")、图片的提示(<img src="提示信息")等等 
提示信息显示的位置 
提示信息的目标，即显示到什么元素上 
提示信息显示/隐藏触发的事件，如鼠标移到元素上、点击(mouseenter,click) 
提示信息显示/隐藏的效果 
外观的定义，通过相应样式设置 
跟随可拖动目标、鼠标指针等 


使用频率最高的估计也就以下这些参数 

Js代码  

1. $.fn.qtip.defaults = {  
2.    content: {  
3.       text: true,   
4.       attr: 'title',   
5.       ajax: false,  
6.       title: {  
7.          text: false,   
8.          button: false  
9.       }  
10.    },  
11.    position: {  
12.       my: 'top left',   
13.       at: 'bottom right',  
14.    },  
15.    show: {  
16.       event: 'mouseenter',  
17.       solo: false,  
18.       ready: false,  
19.       modal: false  
20.    },  
21.    hide: {  
22.       event: 'mouseleave'  
23.    },  
24.    style: 'ui-tooltip-default'  
25. };  

对于显示的位置，有以下参数可以设置： 
my = [ 
'top left', 'top right', 'top center', 
'bottom left', 'bottom right', 'bottom center', 
'right center', 'right top', 'right bottom', 
'left center', 'left top', 'left bottom', 'center' 
] 
at = [ 
'bottom left', 'bottom right', 'bottom center', 
'top left', 'top right', 'top center', 
'left center', 'left top', 'left bottom', 
'right center', 'right top', 'right bottom', 'center' 
] 

而对于显示的色彩风格则有以下各种颜色： 
['red', 'blue', 'dark', 'light', 'green','jtools', 'plain', 'youtube', 'cluetip', 'tipsy', 'tipped'] 

比如red就是ui-tooltip-red，默认为default。另外还有ui-tooltip-shadow、ui-tooltip-rounded分别表示阴影、圆角效果，可以叠加，如下： 
$("#demo2").qtip({ 
  content: "这是提示内容（by囧月）", 
  style: { 
    classes: 'ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded' 
  } 
}); 


另外对于ajax则有以下主要参数可以设置（与jQuery.ajax一致）： 
$('.selector').qtip({ 
   content: { 
      text: 'Loading...', // Loading text... 
      ajax: { 
         url: '/path/to/file', // URL to the JSON script 
         type: 'GET', // POST or GET 
         data: { id: 3 }, // Data to pass along with your request 
         dataType: 'json', // Tell it we're retrieving JSON 
         success: function(data, status) { 
          //... 
         } 
      } 
   } 
}); 
需要注意的是，AJAX默认使用GET请求而且启用了cache。 




参数设置 

先看一下qTip2默认的参数设置： 

Js代码  

1. $.fn.qtip.defaults = {  
2.    // 页面加载完成就创建提示信息的元素  
3.    prerender: false,   
4.    // 为提示信息设置id，如设置为myTooltip  
5.    // 就可以通过ui-tooltip-myTooltip访问这个提示信息  
6.    id: false,   
7.    // 每次显示提示都删除上一次的提示  
8.    overwrite: true,   
9.    // 通过元素属性创建提示  
10.    // 如a[title]，把原有的title重命名为oldtitle  
11.    suppress: true,  
12.    // 内容相关的设置   
13.    content: {  
14.       // 提示信息的内容  
15.       // 如果只设置内容可以直接 content: "提示信息"  
16.       // 而不需要 content: { text: { "提示信息" } }  
17.       text: true,   
18.       // 提示信息使用的元素属性  
19.       attr: 'title',   
20.       // ajax插件  
21.       ajax: false,  
22.       title: {  
23.          // 提示信息的标题  
24.          // 如果只设置标题可以直接 title: "标题"  
25.          text: false,   
26.          // 提示信息的关闭按钮  
27.          // 如button:"x",button:"关闭"  
28.          // 都可以启用关闭按钮  
29.          button: false  
30.       }  
31.    },  
32.    // 位置相关的设置  
33.    position: {  
34.       // 提示信息的位置  
35.       // 如提示的目标元素的右下角(at属性)  
36.       // 对应 提示信息的左上角(my属性)  
37.       my: 'top left',   
38.       at: 'bottom right',  
39.       // 提示的目标元素，默认为选择器  
40.       target: FALSE,  
41.       // 提示信息默认添加到的容器  
42.       container: FALSE,  
43.       // 使提示信息在指定目标内可见，不会超出边界  
44.       viewport: FALSE,        
45.       adjust: {  
46.          // 提示信息位置偏移  
47.          x: 0, y: 0,  
48.          mouse: TRUE,  
49.          resize: TRUE,  
50.          method: 'flip flip'  
51.       },  
52.       // 特效  
53.       effect: function(api, pos, viewport) {  
54.          $(this).animate(pos, {  
55.             duration: 200,  
56.             queue: FALSE  
57.          });  
58.       }  
59.    },  
60.    // 显示提示的相关设置  
61.    show: {  
62.       // 触发事件的目标元素  
63.       // 默认为选择器  
64.       target: false,  
65.       // 事件名称，默认为鼠标移到时  
66.       // 可以改为click点击  
67.       event: 'mouseenter',  
68.       // 特效  
69.       effect: true,  
70.       // 延迟显示时间  
71.       delay: 90,  
72.       // 隐藏其他提示  
73.       solo: false,  
74.       // 在页面加载完就显示提示  
75.       ready: false,  
76.       modal: {  
77.          // 启用模态对话框效果  
78.          on: false,  
79.          // 特效  
80.          effect: true,  
81.          blur: true,  
82.          escape: true  
83.       }  
84.    },  
85.    // 隐藏提示的相关设置  
86.    // 参考show  
87.    hide: {  
88.       target: false,  
89.       event: 'mouseleave',  
90.       effect: true,  
91.       delay: 0,  
92.       // 设置为true时，不会隐藏  
93.       fixed: false,  
94.       inactive: false,  
95.       leave: 'window',  
96.       distance: false  
97.    },  
98.    // 样式相关  
99.    style: {  
100.       // 样式名称  
101.       classes: '',  
102.       widget: false,  
103.       width: false,  
104.       height: false,  
105.       // tip插件，箭头相关设置  
106.       tip: {  
107.          corner: true,  
108.          mimic: false,  
109.          width: 8,  
110.          height: 8,  
111.          border: true,  
112.          offset: 0  
113.       }  
114.    },  
115.    // 相关事件绑定  
116.    events: {  
117.       render: null,  
118.       move: null,  
119.       show: null,  
120.       hide: null,  
121.       toggle: null,  
122.       visible: null,  
123.       focus: null,  
124.       blur: null  
125.    }  
126. };  

使用方法 

以下就简单演示一些使用方法 
$("#demo2").qtip({ 
  content: "这是提示内容（by囧月）" 
}); 

创建一个带标题的提示： 
$("#demo3").qtip({ 
  content: { 
    text: "这是提示内容（by囧月 lwme.cnblogs.com）" 
    , title: "提示标题" 
  } 
}); 

带关闭按钮的提示： 
$("#demo3").qtip({ 
  content: { 
    text: "这是提示内容（by囧月 lwme.cnblogs.com）", 
    title: { 
      text: "提示标题", 
      button: "关闭" 
    } 
  } 
}); 
使用元素的属性作为提示信息： 
$("a[title]").qtip(); //从链接的title 
$("img[alt]").qtip(); //从img的alt 
$("div[title]").qtip(); //从div的title 

也可以显式指定元素属性作为提示信息： 
$('img[alt]').qtip({ 
   content: { 
      attr: 'alt' 
   } 
}); 

使用AJAX请求远程： 
$("#demo4").qtip({ 
  content: { 
    text: "加载中...", 
    ajax: { 
      url: "lwmeAtCnblogs.aspx?name=囧月" 
    } 
  } 
}); 

设置位置及样式： 
$("#demo5").qtip({ 
  position: { 
    my: 'bottom left', 
    at: 'top center' 
  }, 
  style: { 
    classes: 'ui-tooltip-red' 
  } 
}); 

点击时出现模态对话框： 
$('button').qtip({ 
  content: "这是提示内容（by囧月 lwme.cnblogs.com）", 
  show: { 
    event: 'click', // Show it on click... 
    solo: true, // ...and hide all other tooltips... 
    modal: true // ...and make it modal 
  }, 
  hide: false 
}); 

页面加载完成时显示，且不会自动隐藏： 
$('button').qtip({ 
  content: "这是提示内容（by囧月 lwme.cnblogs.com）", 
  show: { 
    ready: true 
  }, 
  hide: false 
});