對於這問題,就需要進一步去計算是否當下情況是屬於這種邊邊角角的問題。經過一番測試,結合前人的智慧,整理出暫時滿意的結果。
我另外撰寫了判斷 Tips 出現的相對位置:
function getScrollInfo() { switch(document.compatMode.toUpperCase()) { case "BACKCOMPAT": { return document.body; } default: { return document.documentElement; } } } function returnX(e) { var TipWidth=300; //Tips 寬度設定 var oBody = getScrollInfo(); var maxWidth = oBody.scrollLeft + oBody.clientWidth; var result=0; if( (oBody.scrollLeft + e.clientX) > (maxWidth - TipWidth) ) result=maxWidth - TipWidth - 15 else result=oBody.scrollLeft + e.clientX - 15 return result; } function returnY(e) { var TipHigh=50; //Tips 高度設定(預估值) var oBody = getScrollInfo(); var maxHeight = oBody.scrollTop + oBody.clientHeight - 3; var result=0; if( (oBody.scrollTop + e.clientY) > (maxHeight - TipHigh) ) result=e.clientY + oBody.scrollTop - TipHigh - 15 else result=oBody.scrollTop + e.clientY + 15 return result; }
透過上述的函式,可以去修改原先的 code 為:
.mousemove(function(e){ $('.tool-tips').css('top',returnY(e));
$('.tool-tips').css('left',returnX(e)); })
.mousemove(function(e){ $('.tool-tips').css('top',returnY(e));
$('.tool-tips').css('left',returnX(e)); })
將完整程式 整理如下:
<style> .tool-tips{ position: absolute; visibility: hidden; z-index: 13000; color: #fff; width:300px; } .tool-text{ padding: 4px 8px 8px; font-size:12px; color: black; background: #FFFFCC bottom right; border-style:outset;} </style> <script> //jQuery tips function $(document).ready( function() { $('<div class="tool-tips"><div class="tool-text"></div></div>').appendTo('body'); $('.ShowTips').mouseover(function(){ $(this).css('cursor','help'); $('.tool-tips').css('visibility','visible'); $('.tool-tips'); var xixu = this; if(xixu.title) {xixu.yishi=xixu.title;xixu.title='';} var dual = xixu.yishi.split('::'); if(dual.length>1) { myTitle = dual[0]; myText = dual[1]; } else { myTitle = $(this).text(); myText = xixu.yishi; } $('.tool-title').html(myTitle); $('.tool-text').html(myText); }).mousemove(function(e){ $('.tool-tips').css('top',returnY(e)); $('.tool-tips').css('left',returnX(e)); }).mouseout(function(){ $('.tool-tips').css('visibility','hidden'); }) }) function getScrollInfo() { switch(document.compatMode.toUpperCase()) { case "BACKCOMPAT": { return document.body; } default: { return document.documentElement; } } } function returnX(e) { var TipWidth=300; //Tips 寬度設定 var oBody = getScrollInfo(); var maxWidth = oBody.scrollLeft + oBody.clientWidth; var result=0; if( (oBody.scrollLeft + e.clientX) > (maxWidth - TipWidth) ) result=maxWidth - TipWidth - 15 else result=oBody.scrollLeft + e.clientX - 15 return result; } function returnY(e) { var TipHigh=50; //Tips 高度設定(預估值) var oBody = getScrollInfo(); var maxHeight = oBody.scrollTop + oBody.clientHeight - 3; var result=0; if( (oBody.scrollTop + e.clientY) > (maxHeight - TipHigh) ) result=e.clientY + oBody.scrollTop - TipHigh - 15 else result=oBody.scrollTop + e.clientY + 15 return result; } </script>
此外,這次不再使用 <acronym> 來當作使用 Tips 的標籤,而是只要 class 屬性 = "ShowTips" ,就自動套用 Tips 功能。所以,叫用範例如下:
<img class="ShowTips" title="本院主要規劃單位。" src="../images/help.gif" />
<img class="ShowTips" title="本院主要規劃單位。" src="../images/help.gif" />
[補充:20100225]
看到另一個關於 jQuery tips 的 plug-in ,功能更是強大,如果需要製作更精美的 Tips 介面,可以參考以下網址:
http://plugins.jquery.com/project/bt
http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html
http://urin.github.com/jquery.balloon.js/
下圖是該 plug-in 做出來的展示圖:
沒有留言:
張貼留言