qTip2 精致的基于jQuery提示信息插件

更新時間：2012年02月17日 21:58:38 作者：

qTip2是一個灰常強大且精致的jQuery提示信息插件，是qTip的第2版，也是一個全新的版本，提供了豐富的功能及漂亮的外觀，非常易于使用

qTip2采用了MIT/GPLv2許可，官方網(wǎng)站為：http://craigsworks.com/projects/qtip2/，目前還沒發(fā)布一個穩(wěn)定版，Nightly版本經(jīng)常會更新，當然這并不影響正常使用。
簡介
若不放心可以嘗試舊版的qTip，但在一些參數(shù)上會有所不同；若是從qTip升級到qTip2，可以使用官方提供的轉(zhuǎn)換工具來升級你的代碼：http://craigsworks.com/projects/qtip2/converter/。

如果使用時出現(xiàn)問題，那么直接下載以下3個文件吧，至少官方演示很正常：

復制代碼代碼如下:

 
<link  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> 

從官方網(wǎng)站下載最新版本時，可以選擇相應的樣式及插件；可選的樣式包括幾種色彩風格(Colour Styles)、CSS3相關(guān)樣式如圓角；以及以下各種插件，可根據(jù)自己需要選擇：

Ajax，這個不用說，請求遠程內(nèi)容的
Tips，氣泡對話效果，如箭頭
Modal，模態(tài)對話框效果，如jQuery UI Dialog / ThickBox 的效果
Image map，提供對map內(nèi)area標記的提示支持
SVG，對SVG元素提供提示的支持
BGIFrame，用于IE6這種古董，如遮住select控件等

除了以上插件的功能外，它的主要功能有（僅列出較常用的）：

設(shè)置提示的內(nèi)容、標題、關(guān)閉按鈕等
使用元素的屬性，來作為提示信息內(nèi)容，如鏈接的標題(<a title="提示信息")、圖片的提示(<img src="提示信息")等等
提示信息顯示的位置
提示信息的目標，即顯示到什么元素上
提示信息顯示/隱藏觸發(fā)的事件，如鼠標移到元素上、點擊(mouseenter,click)
提示信息顯示/隱藏的效果
外觀的定義，通過相應樣式設(shè)置
跟隨可拖動目標、鼠標指針等

使用方法
以下就簡單演示一些使用方法

創(chuàng)建一個最簡單的提示：

復制代碼代碼如下:

 
$("#demo2").qtip({ 
content: "這是提示內(nèi)容（by囧月）" 
}); 

創(chuàng)建一個帶標題的提示：

復制代碼代碼如下:

 
$("#demo3").qtip({ 
content: { 
text: "這是提示內(nèi)容（by囧月 lwme.cnblogs.com）" 
, title: "提示標題" 
} 
}); 

帶關(guān)閉按鈕的提示：

復制代碼代碼如下:

 
$("#demo3").qtip({ 
content: { 
text: "這是提示內(nèi)容（by囧月 lwme.cnblogs.com）" 
, title: { 
text: "提示標題" 
, button: "關(guān)閉" 
} 
} 
}); 

使用元素的屬性作為提示信息：

復制代碼代碼如下:

 
$("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=囧月" 
} 
} 
}); 

設(shè)置位置及樣式：

復制代碼代碼如下:

 
$("#demo5").qtip({ 
position: { 
my: 'bottom left', 
at: 'top center' 
}, 
style: { 
classes: 'ui-tooltip-red' 
} 
}); 

點擊時出現(xiàn)模態(tài)對話框：

復制代碼代碼如下:

 
$('button').qtip({ 
content: "這是提示內(nèi)容（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: "這是提示內(nèi)容（by囧月 lwme.cnblogs.com）", 
show: { 
ready: true 
}, 
hide: false 
}); 

參數(shù)設(shè)置
先看一下qTip2默認的參數(shù)設(shè)置：

復制代碼代碼如下:

 
$.fn.qtip.defaults = { 
// 頁面加載完成就創(chuàng)建提示信息的元素 
prerender: false, 
// 為提示信息設(shè)置id，如設(shè)置為myTooltip 
// 就可以通過ui-tooltip-myTooltip訪問這個提示信息 
id: false, 
// 每次顯示提示都刪除上一次的提示 
overwrite: true, 
// 通過元素屬性創(chuàng)建提示 
// 如a[title]，把原有的title重命名為oldtitle 
suppress: true, 
// 內(nèi)容相關(guān)的設(shè)置 
content: { 
// 提示信息的內(nèi)容 
// 如果只設(shè)置內(nèi)容可以直接 content: "提示信息" 
// 而不需要 content: { text: { "提示信息" } } 
text: true, 
// 提示信息使用的元素屬性 
attr: 'title', 
// ajax插件 
ajax: false, 
title: { 
// 提示信息的標題 
// 如果只設(shè)置標題可以直接 title: "標題" 
text: false, 
// 提示信息的關(guān)閉按鈕 
// 如button:"x",button:"關(guān)閉" 
// 都可以啟用關(guān)閉按鈕 
button: false 
} 
}, 
// 位置相關(guān)的設(shè)置 
position: { 
// 提示信息的位置 
// 如提示的目標元素的右下角(at屬性) 
// 對應 提示信息的左上角(my屬性) 
my: 'top left', 
at: 'bottom right', 
// 提示的目標元素，默認為選擇器 
target: FALSE, 
// 提示信息默認添加到的容器 
container: FALSE, 
// 使提示信息在指定目標內(nèi)可見，不會超出邊界 
viewport: FALSE, 
adjust: { 
// 提示信息位置偏移 
x: 0, y: 0, 
mouse: TRUE, 
resize: TRUE, 
method: 'flip flip' 
}, 
// 特效 
effect: function(api, pos, viewport) { 
$(this).animate(pos, { 
duration: 200, 
queue: FALSE 
}); 
} 
}, 
// 顯示提示的相關(guān)設(shè)置 
show: { 
// 觸發(fā)事件的目標元素 
// 默認為選擇器 
target: false, 
// 事件名稱，默認為鼠標移到時 
// 可以改為click點擊 
event: 'mouseenter', 
// 特效 
effect: true, 
// 延遲顯示時間 
delay: 90, 
// 隱藏其他提示 
solo: false, 
// 在頁面加載完就顯示提示 
ready: false, 
modal: { 
// 啟用模態(tài)對話框效果 
on: false, 
// 特效 
effect: true, 
blur: true, 
escape: true 
} 
}, 
// 隱藏提示的相關(guān)設(shè)置 
// 參考show 
hide: { 
target: false, 
event: 'mouseleave', 
effect: true, 
delay: 0, 
// 設(shè)置為true時，不會隱藏 
fixed: false, 
inactive: false, 
leave: 'window', 
distance: false 
}, 
// 樣式相關(guān) 
style: { 
// 樣式名稱 
classes: '', 
widget: false, 
width: false, 
height: false, 
// tip插件，箭頭相關(guān)設(shè)置 
tip: { 
corner: true, 
mimic: false, 
width: 8, 
height: 8, 
border: true, 
offset: 0 
} 
}, 
// 相關(guān)事件綁定 
events: { 
render: null, 
move: null, 
show: null, 
hide: null, 
toggle: null, 
visible: null, 
focus: null, 
blur: null 
} 
}; 

看起來是很多，但是使用頻率最高的估計也就以下這些參數(shù)：

復制代碼代碼如下:

 
$.fn.qtip.defaults = { 
content: { 
text: true, 
attr: 'title', 
ajax: false, 
title: { 
text: false, 
button: false 
} 
}, 
position: { 
my: 'top left', 
at: 'bottom right', 
}, 
show: { 
event: 'mouseenter', 
solo: false, 
ready: false, 
modal: false 
}, 
hide: { 
event: 'mouseleave' 
}, 
style: 'ui-tooltip-default' 
}; 

對于顯示的位置，有以下參數(shù)可以設(shè)置：

復制代碼代碼如下:

 
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: "這是提示內(nèi)容（by囧月）" 
, style: { 
classes: 'ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded' 
} 
}); 

另外對于ajax則有以下主要參數(shù)可以設(shè)置（與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。
結(jié)尾
關(guān)于qTip2就介紹到這里，更多信息請參閱以下鏈接：
官方網(wǎng)站：http://craigsworks.com/projects/qtip2/
在線演示：http://craigsworks.com/projects/qtip2/demos/
官方文檔：http://craigsworks.com/projects/qtip2/docs/
最后，放一個簡單的DEMO。
作者：囧月

您可能感興趣的文章: