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 Cookie读写删除操作的函数
Mar 02 Javascript
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
jQuery分组选择器用法实例
Dec 23 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
详解Bootstrap插件
Apr 25 Javascript
AngularJS内建服务$location及其功能详解
Jul 01 Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
Feb 13 Javascript
React 使用Hooks简化受控组件的状态绑定
Mar 18 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
如何解决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
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
php 魔术方法详解
2014/11/11 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
JS获取页面input控件中所有text控件并追加样式属性
2013/02/25 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
Python 多线程抓取图片效率对比
2016/02/27 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
临床医学专业学生的自我评价分享
2013/11/21 职场文书
应用化学专业职业生涯规划书
2013/12/31 职场文书
公司总经理任命书
2014/06/05 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
民政局未婚证明
2015/06/15 职场文书
导游词之海南天涯海角
2019/12/05 职场文书