5月
21
2007
分類:
最近更新:
2007-05-21
TWPUG問答~ 滑鼠指到某一列，可以出現說明文字
請問滑鼠指到某一列，可以出現說明文字?
(TWPUG::JavaScript討論區)
Just HTML. 不需要用到 JavaScript. 任何網頁元件只要具有 title 屬性，當滑鼠停留在其上方時就會出現提示文字(tooltip)，顯示 title 所指定的文字內容。See also: HTML 4.01 Specification: The title attribute.
<p title="提示1">某一行</p>
<div><span title="提示2">某一行</span></div>
<table><tr><td title="提示3">某一格</td></tr></table>如果你覺得瀏覽器提供的提示文字功能(tooltip)太簡單，希望以 JavaScript 實踐，其基本概念為: 首先你要先為網頁元件指派 mouseover 及 mouseout 事件處理動作。接著在 mouseover 處理動作中，要找出網頁元件在頁面的 position 與長寬，以便計算提示文字呈現時的位置。不幸的是，網頁元件的position與長寬的求法有些複雜。若從頭寫一個提示文字功能煩了點。
所幸這個看似簡單實則複雜的功能，有許多 JavaScript framework 都實作了。你應該直接選一套來用。我以 YUI (Yahoo! UI Library) 作為示範。YUI 實作了一個名為 Tooltip 的功能，說明文件: Yahoo! UI Library: Tooltip。
<p>跟上面的例子一樣，但要為網頁元件指定 ID。</p>
<p id="tip1" title="提示1">某一行</p>
<div><span id="tip2" title="提示2">某一行</span></div>
<table><tr><td id="tip3" title="提示3">某一格</td></tr></table>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/container/assets/container.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/container/container-min.js"></script>
<script type="text/javascript">
var myTooltip = [];
myTooltip['tip1'] = new YAHOO.widget.Tooltip("myTooltip1", { context:"tip1", showdelay:0 } );
myTooltip['tip2'] = new YAHOO.widget.Tooltip("myTooltip2", { context:"tip2", showdelay:0 } );
myTooltip['tip3'] = new YAHOO.widget.Tooltip("myTooltip3", { context:"tip3", showdelay:0 } );
</script>
雖然 YUI::Tooltip 允許我們以 JavaScript 的方式指定提示文字的內容，但我建議使用 HTML 的 title 屬性完成這件事。一來在 JavaScript 程式碼中不會出現文字內容的 hard code ；二來當使用者的瀏覽器不支援或關閉 JavaScript 功能時，使用者仍然可以透過瀏覽器本身的 tooltip 功能看到提示文字。
樂多舊網址: http://blog.roodo.com/rocksaying/archives/3283943.html
樂多舊回應