当前位置：首页 > 资讯 > 技术文档

JS插件overlib用法实例详解

时间：2020-06-07 20:05 编辑：来源：阅读：
扫一扫，手机访问

摘要：JS插件overlib用法实例详解

本文实例讲述了overlib用法。分享给大家供大家参考，具体如下： overLIB 是一个生成提示框与弹出菜单等页面效果的一段非常优秀的JS代码。它可以简单的通过设置一些参数或命令来改变弹出页面的款式、皮肤与形状,不但如此，它还提供了非常简单的扩展功能，来足客户的不同需求。 overLIB 使用非常的简单。一、在<head></head> 标签内添加：

[url=javascript:void(0);]

四、命令与参数 [b]popup [/b]

Attribute Name	Type	Required	Default	Description
text	string	Yes	[i]n/a[/i]	the text/html to display in the popup window
trigger	string	No	[i]onMouseOver[/i]	What is used to trigger the popup window. Can be one of onMouseOver or onClick
sticky	boolean	No	[i]false[/i]	Makes the popup stick around until closed
caption	string	No	[i]n/a[/i]	sets the caption to title
fgcolor	string	No	[i]n/a[/i]	color of the inside of the popup box
bgcolor	string	No	[i]n/a[/i]	color of the border of the popup box
textcolor	string	No	[i]n/a[/i]	sets the color of the text inside the box
capcolor	string	No	[i]n/a[/i]	sets color of the box's caption
closecolor	string	No	[i]n/a[/i]	sets the color of the close text
textfont	string	No	[i]n/a[/i]	sets the font to be used by the main text
captionfont	string	No	[i]n/a[/i]	sets the font of the caption
closefont	string	No	[i]n/a[/i]	sets the font for the "Close" text
textsize	string	No	[i]n/a[/i]	sets the size of the main text's font
captionsize	string	No	[i]n/a[/i]	sets the size of the caption's font
closesize	string	No	[i]n/a[/i]	sets the size of the "Close" text's font
width	integer	No	[i]n/a[/i]	sets the width of the box
height	integer	No	[i]n/a[/i]	sets the height of the box
left	boolean	No	[i]false[/i]	makes the popups go to the left of the mouse
right	boolean	No	[i]false[/i]	makes the popups go to the right of the mouse
center	boolean	No	[i]false[/i]	makes the popups go to the center of the mouse
above	boolean	No	[i]false[/i]	makes the popups go above the mouse. NOTE: only possible when height has been set
below	boolean	No	[i]false[/i]	makes the popups go below the mouse
border	integer	No	[i]n/a[/i]	makes the border of the popups thicker or thinner
offsetx	integer	No	[i]n/a[/i]	how far away from the pointer the popup will show up, horizontally
offsety	integer	No	[i]n/a[/i]	how far away from the pointer the popup will show up, vertically
fgbackground	url to image	No	[i]n/a[/i]	defines a picture to use instead of color for the inside of the popup.
bgbackground	url to image	No	[i]n/a[/i]	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	[i]n/a[/i]	sets the "Close" text to something else
noclose	boolean	No	[i]n/a[/i]	does not display the "Close" text on stickies with a caption
status	string	No	[i]n/a[/i]	sets the text in the browsers status bar
autostatus	boolean	No	[i]n/a[/i]	sets the status bar's text to the popup's text. NOTE: overrides status setting
autostatuscap	string	No	[i]n/a[/i]	sets the status bar's text to the caption's text. NOTE: overrides status and autostatus settings
inarray	integer	No	[i]n/a[/i]	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	[i]n/a[/i]	tells overLib to read the caption from this index in the ol_caps array
capicon	url	No	[i]n/a[/i]	displays the image given before the popup caption
snapx	integer	No	[i]n/a[/i]	snaps the popup to an even position in a horizontal grid
snapy	integer	No	[i]n/a[/i]	snaps the popup to an even position in a vertical grid
fixx	integer	No	[i]n/a[/i]	locks the popups horizontal position Note: overrides all other horizontal placement
fixy	integer	No	[i]n/a[/i]	locks the popups vertical position Note: overrides all other vertical placement
background	url	No	[i]n/a[/i]	sets image to be used instead of table box background
padx	integer,integer	No	[i]n/a[/i]	pads the background image with horizontal whitespace for text placement. Note: this is a two parameter command
pady	integer,integer	No	[i]n/a[/i]	pads the background image with vertical whitespace for text placement. Note: this is a two parameter command
fullhtml	boolean	No	[i]n/a[/i]	allows you to control the html over a background picture completely. The html code is expected in the "text" attribute
frame	string	No	[i]n/a[/i]	controls popups in a different frame. See the overlib page for more info on this function
timeout	string	No	[i]n/a[/i]	calls the specified javascript function and takes the return value as the text that should be displayed in the popup window
delay	integer	No	[i]n/a[/i]	makes that popup behave like a tooltip. It will popup only after this delay in milliseconds
hauto	boolean	No	[i]n/a[/i]	automatically determine if the popup should be to the left or right of the mouse.
vauto	boolean	No	[i]n/a[/i]	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点击此处本站下载[/url]。希望本文所述对大家JavaScript程序设计有所帮助。

全部评论(0)

上一篇：javascript中的链式调用
下一篇：自动生成文章摘要[JavaScript 版本]

资讯排行榜
更多>>