JS插件overlib用法实例详解


Posted in Javascript onDecember 26, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
两个比较有用的Javascript工具函数代码
Feb 17 Javascript
读jQuery之八 包装事件对象
Jun 21 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
深入理解js数组的sort排序
May 28 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
jQuery validate 验证radio实例
Mar 01 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
Sep 10 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
js正则表达式简单校验方法
Jan 03 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
Dec 26 #Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 #Javascript
详解Document.Cookie
Dec 25 #Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 #Javascript
JQuery datepicker 用法详解
Dec 25 #Javascript
一道JS前端闭包面试题解析
Dec 25 #Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 #Javascript
You might like
PHP的宝库目录--PEAR
2006/10/09 PHP
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
[55:16]Mski vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python之wxPython菜单使用详解
2014/09/28 Python
Python3里的super()和__class__使用介绍
2015/04/23 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
Python字典的核心底层原理讲解
2019/01/24 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
python3将变量输入的简单实例
2020/08/19 Python
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
会计电算化学生个人的自我评价
2014/02/08 职场文书
学校开学标语
2014/10/06 职场文书
万里长城导游词
2015/01/30 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
社区党员干部承诺书
2015/05/04 职场文书