JS插件overlib用法实例详解

overLIB 是一个生成提示框与弹出菜单等页面效果的一段非常优秀的JS代码。

它可以简单的通过设置一些参数或命令来改变弹出页面的款式、皮肤与形状,不但如此,它还提供了非常简单的扩展功能,来足客户的不同需求。

overLIB 使用非常的简单。

一、在<head></head> 标签内添加:

复制代码 代码如下:

<script type="text/javascript" src="https://www.jb51.net/overlib.js"><!-- overLIB (c) Erik Bosrup --></script>


二、在<body></body>标签内添加:

复制代码 代码如下:

<div></div>

4.10以上的版本可省略此步

三、生成两种不同款式(popup与sticky)的弹出页面

<a href="javascript:void(0);">popup示例</a> <a href="javascript:void(0);">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);">Click here!</a>

五、 overlib的一些使用示例

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgwsgj.html