合作(zuò)
咨詢
建站(zhàn)咨詢
- 作(zuò)者：admin
- 發表時(shí)間(jiān)：2013-07-02 14:17:29
- 來(lái)源：未知
clueTip是一款非常不錯的，基于jQuery的信息提示插件。當鼠标滑向鏈接或者頁面中的元素，會(huì)出現一個(gè)漂亮的提示框。提示框裏的內(nèi)容可(kě)以是本頁面上(shàng)的，也可(kě)以是通(tōng)過ajax加載的的頁面，clueTip還(hái)提供了許多(duō)可(kě)配置的參數(shù)，用戶可(kě)以根據實際情況定制(zhì)不同的效果和(hé)樣式。
clueTip有(yǒu)以下特性：
使用非常簡單；
可(kě)定制(zhì)，提供大(dà)量參數(shù)可(kě)配置；
提示窗口根據頁面大(dà)小(xiǎo)可(kě)以自動調整位置；
可(kě)以ajax加載頁面內(nèi)容
跨浏覽器(qì)兼容，兼容IE6+,Firefox,Safria,Opera等主流浏覽器(qì)。
XHTML
clueTip有(yǒu)兩種展示提示窗口的方法，分為(wèi)通(tōng)過“rel”屬性ajax加載遠程頁面內(nèi)容和(hé)通(tōng)過“title”屬性（默認設置）加載頁面內(nèi)容。
1、通(tōng)過title屬性加載內(nèi)容
鼠标滑向看看效果
2、通(tōng)過rel屬性加載遠程頁面內(nèi)容
Ajax加載PHP頁面
Javascript和(hé)樣式
在之間(jiān)加入jquery和(hé)clueTip插件以及樣式clueTip.css。
clueTip插件常用參數(shù)一覽表
| 參數(shù) | 描述 | 默認值 |
| width | 提示窗口的寬度 | 275 |
| height | 提示窗口的高(gāo)度 | 'auto' |
| positionBy | 設置提示窗口的位置：'auto', 'mouse','bottomTop', 'fixed' | 'auto' |
| topOffset | 窗口相對（上(shàng)）位移量 | 15 |
| leftOffset | 窗口相對（左）位移量 | 15 |
| local | 是否使用同一頁面的內(nèi)容，可(kě)以是頁面中的一個(gè)DIV，這時(shí)應該設置rel="#ID" | false |
| attribute | 用來(lái)承接窗口內(nèi)容的屬性 | rel |
| titleAttribute | 窗口标題屬性 | title |
| splitTitle | 設置內(nèi)容分隔符 | '' |
| showTitle | 是否顯示标題 | true |
| cluetipClass | 窗口的樣式，樣式的名稱格式為(wèi).cluetip-cluetipClass | default |
| waitImage | 是否顯示內(nèi)容載入前的等待loading圖片。 | true |
| sticky | 是否當手工單擊關閉時(shí)才關閉窗口 | false |
| closePosition | 設置關閉按鈕的位置：'top' or 'bottom' or 'title' | 'top |
| closeText | 關閉按鈕顯示的內(nèi)容，可(kě)以是文本，也可(kě)以是html圖片 | 'Close' |
更多(duō)參數(shù)設置請(qǐng)到官方網站(zhàn)查看：http://plugins.learningjquery.com/cluetip/
cluptip在用戶點擊了鏈接後，頁面不會(huì)轉向href地址，而是一點反應都沒有(yǒu)，那(nà)怎麽解決點了鏈接後直接轉向該鏈接的頁面呢？解決辦法有(yǒu)：綁定a标簽的click事件,代碼如下：
$('a.basic).bind('click',function(){
window.location.href=$(this).attr('href');;
});
