|
这篇文章主要介绍了overlib用法,结合实例较为详细的分析了JavaScript插件overlib的相关使用技巧,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。 | 
发表于 2015-12-26 09:42:53
