DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS插件overlib用法實例詳解
JS插件overlib用法實例詳解
編輯:關於JavaScript     

本文實例講述了overlib用法。分享給大家供大家參考,具體如下:

overLIB 是一個生成提示框與彈出菜單等頁面效果的一段非常優秀的JS代碼。

它可以簡單的通過設置一些參數或命令來改變彈出頁面的款式、皮膚與形狀,不但如此,它還提供了非常簡單的擴展功能,來足客戶的不同需求。

overLIB 使用非常的簡單。

一、在<head></head> 標簽內添加:復制代碼 代碼如下:<script type="text/javascript" src="overlib.js"><!-- overLIB (c) Erik Bosrup --></script>
二、在<body></body>標簽內添加:復制代碼 代碼如下:<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div> 4.10以上的版本可省略此步

三、生成兩種不同款式(popup與sticky)的彈出頁面

<a href="javascript:void(0);" onmouseover="return overlib('這是一個popup.');" onmouseout="return nd();">popup示例</a>
<a href="javascript:void(0);" onmouseover="return overlib('這是一個sticky',STICKY, MOUSEOFF);" onmouseout="return nd();">stick示例 </a>

四、 命令與參數

popup
Attribute Name Type Required Default Description text string Yes n/a the text/html to display in the popup window trigger string No onMouseOver What is used to trigger the popup window. Can be one of onMouseOver or onClick sticky boolean No false Makes the popup stick around until closed caption string No n/a sets the caption to title fgcolor string No n/a color of the inside of the popup box bgcolor string No n/a color of the border of the popup box textcolor string No n/a sets the color of the text inside the box capcolor string No n/a sets color of the box's caption closecolor string No n/a sets the color of the close text textfont string No n/a sets the font to be used by the main text captionfont string No n/a sets the font of the caption closefont string No n/a sets the font for the "Close" text textsize string No n/a sets the size of the main text's font captionsize string No n/a sets the size of the caption's font closesize string No n/a sets the size of the "Close" text's font width integer No n/a sets the width of the box height integer No n/a sets the height of the box left boolean No false makes the popups go to the left of the mouse right boolean No false makes the popups go to the right of the mouse center boolean No false makes the popups go to the center of the mouse above boolean No false makes the popups go above the mouse. NOTE: only possible when height has been set below boolean No false makes the popups go below the mouse border integer No n/a makes the border of the popups thicker or thinner offsetx integer No n/a how far away from the pointer the popup will show up, horizontally offsety integer No n/a how far away from the pointer the popup will show up, vertically fgbackground url to image No n/a defines a picture to use instead of color for the inside of the popup. bgbackground url to image No n/a defines a picture to use instead of color for the border of the popup. NOTE: You will want to set bgcolor to "" or the color will show as well. NOTE: When having a Close link, Netscape will re-render the table cells, making things look incorrect closetext string No n/a sets the "Close" text to something else noclose boolean No n/a does not display the "Close" text on stickies with a caption status string No n/a sets the text in the browsers status bar autostatus boolean No n/a sets the status bar's text to the popup's text. NOTE: overrides status setting autostatuscap string No n/a sets the status bar's text to the caption's text. NOTE: overrides status and autostatus settings inarray integer No n/a tells overLib to read text from this index in the ol_text array, located in overlib.js. This parameter can be used instead of text caparray integer No n/a tells overLib to read the caption from this index in the ol_caps array capicon url No n/a displays the image given before the popup caption snapx integer No n/a snaps the popup to an even position in a horizontal grid snapy integer No n/a snaps the popup to an even position in a vertical grid fixx integer No n/a locks the popups horizontal position Note: overrides all other horizontal placement fixy integer No n/a locks the popups vertical position Note: overrides all other vertical placement background url No n/a sets image to be used instead of table box background padx integer,integer No n/a pads the background image with horizontal whitespace for text placement. Note: this is a two parameter command pady integer,integer No n/a pads the background image with vertical whitespace for text placement. Note: this is a two parameter command fullhtml boolean No n/a allows you to control the html over a background picture completely. The html code is expected in the "text" attribute frame string No n/a controls popups in a different frame. See the overlib page for more info on this function timeout string No n/a calls the specified javascript function and takes the return value as the text that should be displayed in the popup window delay integer No n/a makes that popup behave like a tooltip. It will popup only after this delay in milliseconds hauto boolean No n/a automatically determine if the popup should be to the left or right of the mouse. vauto boolean No n/a automatically determine if the popup should be above or below the mouse.

overLIB 可以接受任意個命令和參數。格式如下:命令[,'命令參數']

<a href="javascript:void(0);" onclick="return overlib('This is a sticky with a caption. And it is centered under the mouse!', STICKY, CAPTION,
'Sticky!', CENTER);" onmouseout="nd();">Click here!</a>

五、 overlib的一些使用示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<scriptlanguage="JavaScript" src="overlib.js"></script><html>
<head>
<metahttp-equiv="Content-Type" content="text/html; charset=gb2312">
<title>無標題文檔</title>
</head>
<body>
<ahref="#" onclick="return overlib('使用overlib的命令', CAPTION, '這是Caption命令,就是生成頭部',HAUTO);"" onmouseout="return nd();">彈出測試</a>
<ahref="javascript:void(0);" onmouseover="return overlib('This is an ordinary popup.',CLOSECLICK);" onmouseout="return nd();">here</a>
<ahref="javascript:void(0);" onmouseover="return overlib('This is what we call a sticky, since I stick around (it goes away if you move the mouse OVER and then OFF the overLIB popup--or mouseover another overLIB).', STICKY, MOUSEOFF);" onmouseout="return nd();">吸附性的提示框</a>
<ahref="javascript:void(0);" onclick="return overlib('This is a sticky with a caption. And it is centered under the mouse!', STICKY, CAPTION,'Sticky!',CENTER);">含CAPTION的STICKY!</a>
<ahref="javascript:void(0);" onclick="return overlib('Setting size and posiztion!', STICKY, CAPTION,'Sticky!',HEIGHT, 100,WIDTH,120,LEFT);">指定大小與位置彈出</a>
<ahref="javascript:void(0);" onclick="return overlib('Setting size and posiztion!', STICKY, CAPTION,'Sticky!',STATUS ,'Hello');">設置狀態欄</a>
</body>
</html>

六、自定義overlib。overlib有三種方式可以實現自定義。

1、我們上面用過的通過輸入不同命令來實現自定義。
2、修改overlib.js中的默認值來實現自定義
3、在引用的頁面指定變量來實現自定義。

overlib點擊此處本站下載。

希望本文所述對大家JavaScript程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved