walterzorn 系列-工具提示

作者:vkvi 來源:千一網絡(原創) 日期:2008-11-28

www.walterzorn.com 網站提供一些功能非常好的 JavaScript 封裝,千一網絡以中文的形式介紹該網站的產品。

JavaScript, DHTML Tooltips

JavaScript Cross Browser Library.

Developed by Walter Zorn

易用的、跨瀏覽器的 Tooltip JavaScript 庫用于創建工具提示、彈出式信息窗。

特性(截圖)

Tooltip Features

跨瀏覽器

這個 Tooltip JavaScript 幾乎工作于所有的瀏覽器,除了那些沒人再用的古老的瀏覽器(Netscape 4、Opera 5/6)。支持的瀏覽器:Gecko Browsers (Firefox, Mozilla, Netscape 6+, Galeon and others), IE 5+, Opera 7+, Konqueror, Safari.

在 Opera 中,Tooltip Library 無法阻止本地的、基于操作系統的工具提示顯示在鏈接上,并且顯示在網頁的任何內容的上頁。

Opera Tooltip

如何使用這個腳本

1、下載庫

下載 wz_tooltip.zip 并解壓,按 LGPL 發布。

2、將 wz_tooltip.js 連接到 HTML 文件中

復制下面的行到 BODY 節中,最好是緊跟在開標簽 <body> 后面。

<script type="text/javascript" src="wz_tooltip.js"></script>

如果必要,修改路徑 src="wz_tooltip.js" 為 JavaScript 文件。注意:使用下載的文件,不要強行鏈接我站(指 walterzorn 網站)的 wz_tooltip.js 文件。

3、在 onmouseover 事件處理程序中標明工具提示文字

每一個顯示工具提示的 html 標簽需要 onmouseover 和 onmouseout 屬性,如下:

<a href="index.htm" onmouseover="Tip('Some text')" onmouseout="UnTip()">Homepage </a>

就這樣,沒有 title 屬性,沒有包含 DIV。你可以看到,顯示的文字必須用單引號引起來,然后傳遞給 Tip() 函數。注意:工具提示文字中的每個單引號(撇號)必須用反斜杠轉義。比如:

Tip('This text won\'t trigger a JavaScript error.');

在 onmouseout 事件處理程序中調用 UnTip() 來再次隱藏工具提示。

當然你也可以為 Tip() 和/或 UnTip() 使用不同的事件處理程序。

擴展配置

4、選擇:將 HTML 元素轉換到工具提示中

為了代替直接在工具提示中使用文字,你可以標識特定的 HTML 元素以將其轉換到工具提示中。在某些方面這是有益的。

  • 你可以在工具條中擁有十分重要的東西,而一個頁面的 HTML 內容(不是 JavaScript 內容)對網絡搜索引擎是有益的。

  • 如果在網頁中放置恰當,對于禁用了 JavaScript 的用戶來說,這些內容仍然是可見的。
  • 同樣,HTML 元素也可以一直顯示;比如,如果你想在不同的地方的工具提示中顯示它的內容。
  • 這樣可以輕松地定義 HTML 元素然后直接轉換成工具提示中復雜的 HTML,比 JavaScript 字符串輕松多了。

要定義用 HTML 創建的工具提示,只需要通過 TipToTip() 函數把想要的 HTML 標簽的 ID 傳過去。示例:

<a href="index.htm" onmouseover="TagToTip('Span2')" onmouseout="UnTip()">Home page </a>
...
<span id="Span2">This is some comment<br>about my home page</span>
...

在這個示例中,鏈接上的工具提示將顯示從 <span> 元素抓取的內容。注意只是包括換行標簽的內部內容會被拷貝,而 SPAN 標簽本身和任何它上面的版式不會被拷貝。

當頁面正在讀取時,Tooltip Library 自動隱藏轉換為工具提示的 HTML 元素(比如:上面示例中的 <span> 元素)。要隱藏自動隱藏我,在 wz_tooltip.js 的全局工具提示配置文件中設置 TagsToTip 變量為 false(預設默認值:true)。 如果喜歡,你也可以通過設置它們的 CSS 'display' 屬性為 'none' 來自行隱藏這些 HTML 元素。

另一方面的提示:特別是在 IE 中,關閉自動隱藏特性會獲得更好的頁面讀取展現效果。

5、工具提示中的 HTML

在工具提示中使用圖像,必須在 <img> 標簽中標明 width 和 height 屬性。以便讓腳本準確測量工具提示的大小。

工具提示文字中的雙引號必須以 HTML 字符實體(&quote;)的形式來寫,這是因為雙引號已經作為 onmouseover 事件處理程序的定義字符,并且不能被嵌套。撇號(單引號)必須用前斜杠轉義,因為撇號已經作為工具提示文字的定義字符。工具提示文字中的 HTML 標簽屬性定義字符,你可以使用 &quot; 或 \'。比如:

正確:
<a href="index.htm" onmouseover="Tip('Text with <img src=\'pics/image.jpg\' width=\'60\'>image.')" onmouseout="UnTip()"> Homepage </a>
or
<a href="index.htm" onmouseover="Tip('Text with <img src=&quot;pics/image.jpg&quot; width=&quot;60&quot;>image.')" onmouseout="UnTip()"> Homepage </a>
 
錯誤:
<a href="index.htm" onmouseover="Tip('Text with <img src="pics/image.jpg" width="60">image.')" onmouseout="UnTip()"> Homepage </a>

6、用 CSS 類格式工具提示

用 CSS 類可以簡單地轉換 DIV 或 SPAN 元素中的工具提示文字。你可以把標題文字做成一樣(關于如何定義工具提示標題,請參見下面的命令參考中 TITLE 命令描述)。示例:

... onmouseover="Tip('<div class=&quot;TipCls1&quot;>Text of tooltip number one</div>')" ...
... onmouseover="Tip('<span class=\'TipCls2\'>Text of tooltip number two</span>')" ...
... onmouseover="Tip('Tooltip number 3', TITLE, '<div class=\'TitleCls\'>Some Title</div>')" ...

7、通過變量或函數調用獲得工具提示內容

為了代替用單引號結束字符串,Tip() 很好地接受其它地方定義的變量或調用一個函數,比如 <script> 塊中或單獨的 JS 文件。這與通過 Tip() 或 TagToTip() 命令是相同的(請見下面列出的命令)。因為,每次將要顯示工具提示時,它的內容或格式可以動態建立。

示例:

<html>
<head>
...
<script type="text/javascript">
var txt1 = "This is the text of the first tooltip";
function TooltipTxt(n)
{
    return "This is the text of the " + n + " tooltip";
}
</script>
</head>
<body>
<script type="text/javascript" src="wz_tooltip.js"></script>
...
<a href="a.htm" onmouseover="Tip(txt1)" onmouseout="UnTip()">Link 1</a>
...
<a href="b.htm" onmouseover="Tip(TooltipTxt('second'))" onmouseout="UnTip()">Link 2</a>
...
<a href="c.htm" onmouseover="Tip(TooltipTxt('third'))" onmouseout="UnTip()">Link 3</a>
...
</body>
</html>

8、用命令單獨自定義工具提示

全局默認配置對所有的工具提示有效,可以在 JavaScript 文件中改變它,位于 GLOBAL TOOLTIP CONFIGURATION 一節。要單獨配置工具提示,你可以使用下面列出的命令。這些獨立的命令重寫 wz_tooltip.js 中的全局配置。它們可以通過 onmouseover 事件處理程序的 Tip() 或 TagToTip() 函數傳遞。每一個命令必須帶有值,用逗號隔開:

onmouseover="Tip('Some text', ABOVE, true)"
或者
onmouseover="TagToTip('SomeID', TITLEFONTCOLOR, '#CCFFCC')"

多個命令構成一個逗號分隔的命令-值對列表。 命令順序無所謂。示例:

onmouseover="Tip('Some tooltip text', SHADOW, true, TITLE, 'Some Title', PADDING, 9)"
  • ABOVE 工具提示在鼠標指針的下邊。值:true 或 false。
  • BGCOLOR 工具提示背景顏色。值:HTML 顏色,用單引號,比如 '#D3E3F6' 或 'DarkCyan',或空字符串 '' 作為無背景。
  • BGIMG 背景圖片。
  • BORDERCOLOR 邊框顏色。值:HTML 顏色。
  • BORDERSTYLE 邊框樣式。值:CSS 邊框樣式。
  • BORDERWIDTH 工具提示邊框粗細。值:數值 >= 0,默認 1。
  • CENTERMOUSE 鼠標位于工具提示的中間。
  • CLICKCLOSE 用戶在工具提示或文檔中單擊鼠標時關閉工具提示。值:true 或 false。
  • CLICKSTICKY 用戶點擊觸發工具提示的元素時仍然顯示工具提示。
  • CLOSEBTN 在標題欄中顯示關閉按鈕。值:true 或 false。
  • CLOSEBTNCOLORS 關閉按鈕的顏色。數組,分別為:背景色、文字色、鼠標移上時高亮背景色、鼠標移上時高亮文字顏色。如:['', '#66ff66', 'white', '#00cc00']。
  • CLOSEBTNTEXT 關閉按鈕文字。比如 'Click Me'。
  • COPYCONTENT 只對 TagToTip() 有效,表示是否把 HTML 元素復制到工具提示,若為 false,表示移動到。如果是復制到,其中 input 的 value 都將得到保持。
  • DELAY 延遲多少顯示工具提示。毫秒。值:數值 >= 0。
  • DURATION 延遲多少的時間工具提示隱藏。毫秒。
  • EXCLUSIVE 只有當前工具提示隱藏后才顯示其它工具提示。值:true 或 false。
  • FADEIN 漸顯,某些瀏覽器不支持。值:數值 >= 0。
  • FADEOUT 漸隱,某些瀏覽器不支持。值:數值 >= 0。
  • Fix(模式 1) 在修定的 [x,y] 坐標顯示工具提示,如:[230, 874]。
  • Fix(模式 2) 在任何 HTML 元素上顯示工具提示,即使是在另一個工具提示中。... onmouseover="Tip('Some text', FIX, ['PurpleSpan', 0, 5])" ... <span id="PurpleSpan">HTML element to show the tooltip on</span>
  • FOLLOWMOUSE 鼠標跟隨。值:true 或 false。
  • FONTCOLOR 字體顏色。
  • FONTFACE 字體名稱。
  • FONTSIZE 字體大小。值:帶單位的大小。
  • FONTWEIGHT 字體加重。值:'normal' or 'bold'。
  • HEIGHT 工具提示的高度。值:任意數值。
  • JUMPHORZ 如果為 true,工具提示碰觸到窗口邊緣時,跳轉到水平方向的另一邊。
  • JUMPVERT 如果為 true,工具提示碰觸到窗口邊緣時,跳轉到豎直方向的另一邊。
  • LEFT 工具提示在鼠標指針的左邊。值:true 或 false。
  • OFFSETX 在鼠標指針上的水平偏移。
  • OFFSETY 在鼠標指針上的豎直偏移。
  • OPACITY 透明度。值:0-100,0 完全透明。
  • PADDING 工具提示的內邊距。值:數值 >= 0。
  • SHADOW 是否顯示陰影。
  • SHADOWCOLOR 陰影顏色。
  • SHADOWWIDTH 陰影大小。值:數值 >= 0。
  • STICKY 工具提示一直停在其初始位置,直到另一個工具提示觸發。值:true 或 false。
  • TEXTALIGN 文字排列方式。
  • TITLE 顯示標題欄。值:標題文字。
  • TITLEALIGN 標題文字排列方式。
  • TITLEBGCOLOR 標題背景顏色。
  • TITLEFONTCOLOR 標題字體顏色。
  • TITLEFONTFACE 標題字體名稱。
  • TITLEFONTSIZE 標題字體大小。值:帶單位的大小。
  • TLEPADDING 標題的內邊距。值:數值 >= 0。
  • WIDTH  工具提示的寬度。值:任意數值。
相關文章
文章評論
  • 1 樓:Online Casino
    hey your blog design is very nice, neat and fresh and with updated content, make people feel peace and I always enjoy browsing your site.

    - Norman
最新22选5开奖公告