溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了jquery信息提示框中如何進行clueTip的應用，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
clueTip是一款非常不錯的，基于jQuery的信息提示插件。當鼠標滑向鏈接或者頁面中的元素，會出現一個漂亮的提示框。提示框里的內容可以是本頁面上的，也可以是通過ajax加載的的頁面，clueTip還提供了許多可配置的參數，用戶可以根據實際情況定制不同的效果和樣式。
使用非常簡單；
可定制，提供大量參數可配置；
提示窗口根據頁面大小可以自動調整位置；
可以ajax加載頁面內容
跨瀏覽器兼容，兼容IE6+,Firefox,Safria,Opera等主流瀏覽器。
clueTip有兩種展示提示窗口的方法，分為通過“rel”屬性ajax加載遠程頁面內容和通過“title”屬性（默認設置）加載頁面內容。
1、通過title屬性加載內容
<a class="title" href="#" title="提示窗口標題|內容.|內容分行。。。">鼠標滑向看看效果</a>
2、通過rel屬性加載遠程頁面內容
<a class="basic" href="ajax.php" rel="ajax.php" title="加載AJAX頁面">Ajax加載PHP頁面</a>
在<head>之間加入jquery和clueTip插件以及樣式clueTip.css。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cluetip.js"></script>
<script type="text/javascript">
$(function(){
$('a.title').cluetip({splitTitle: '|'});
$('a.basic').cluetip();
});
</script>
<link rel="stylesheet" type="text/css" href="cluetip.css" />
參數 描述 默認值 width 提示窗口的寬度 275 height 提示窗口的高度 'auto' positionBy 設置提示窗口的位置：'auto', 'mouse','bottomTop', 'fixed' 'auto' topOffset 窗口相對（上）位移量 15 leftOffset 窗口相對（左）位移量 15 local 是否使用同一頁面的內容，可以是頁面中的一個DIV，這時應該設置rel="#ID" false attribute 用來承接窗口內容的屬性 rel titleAttribute 窗口標題屬性 title splitTitle 設置內容分隔符 '' showTitle 是否顯示標題 true cluetipClass 窗口的樣式，樣式的名稱格式為.cluetip-cluetipClass default waitImage 是否顯示內容載入前的等待loading圖片。 true sticky 是否當手工單擊關閉時才關閉窗口 false closePosition 設置關閉按鈕的位置：'top' or 'bottom' or 'title' 'top closeText 關閉按鈕顯示的內容，可以是文本，也可以是html圖片 'Close'
更多參數設置請到官方網站查看：http://plugins.learningjquery.com/cluetip/
cluptip在用戶點擊了鏈接后，頁面不會轉向href地址，而是一點反應都沒有，那怎么解決點了鏈接后直接轉向該鏈接的頁面呢？解決辦法有：綁定a標簽的click事件,代碼如下：
$('a.basic).bind('click',function(){
window.location.href=$(this).attr('href');;
});
上述內容就是jquery信息提示框中如何進行clueTip的應用，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
