JS插件overlib用法实例详解_javascript技巧
- WBOY原创
- 2016-05-16 15:23:191359浏览
本文实例讲述了overlib用法。分享给大家供大家参考，具体如下：
overLIB 是一个生成提示框与弹出菜单等页面效果的一段非常优秀的JS代码。
它可以简单的通过设置一些参数或命令来改变弹出页面的款式、皮肤与形状,不但如此，它还提供了非常简单的扩展功能，来足客户的不同需求。
overLIB 使用非常的简单。
一、在93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 标签内添加：
复制代码 代码如下:
670c7960c170a14501a8e29e3c417ae606d2e91aceacbb2485dcb9815fa9362e2cacc6d41bbb37262a98f745aa00fbf0
二、在6c04bd5ca3fcae76e30b72ad730ca86d36cc49f0c466276486e50c850b7e4956标签内添加：
复制代码 代码如下:
7e8545cffcb7aea8c9450a3decd15e2316b28748ea4df4d9c2150843fecfba68
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>
四、 指令與參數
彈出視窗
| 屬性名稱 | 類型 | 必填 | 預設 | 描述 |
|---|---|---|---|---|
| 文字 | 字串 | 是的 | 不適用 | 要在彈出視窗中顯示的文字/html |
| 觸發 | 字串 | 沒有 | onMouseOver | 什麼是用來觸發彈窗的。可以是 onMouseOver 或 onClick 之一 |
| 黏性 | 布林值 | 沒有 | 假 | 使彈出視窗一直存在直到關閉 |
| 標題 | 字串 | 沒有 | 不適用 | 將標題設定為標題 |
| fg顏色 | 字串 | 沒有 | 不適用 | 彈出框內部的顏色 |
| 背景顏色 | 字串 | 沒有 | 不適用 | 彈出框邊框的顏色 |
| 文字顏色 | 字串 | 沒有 | 不適用 | 設定框內文字的顏色 |
| capcolor | 字串 | 沒有 | 不適用 | 設定框標題的顏色 |
| 關閉顏色 | 字串 | 沒有 | 不適用 | 設定關閉文字的顏色 |
| 文字字體 | 字串 | 沒有 | 不適用 | 設定正文使用的字體 |
| 標題字體 | 字串 | 沒有 | 不適用 | 設定標題的字體 |
| 關閉字體 | 字串 | 沒有 | 不適用 | 設定「關閉」文字的字體 |
| 文字大小 | 字串 | 沒有 | 不適用 | 設定正文字體的大小 |
| 標題大小 | 字串 | 沒有 | 不適用 | 設定標題字體的大小 |
| 關閉尺寸 | 字串 | 沒有 | 不適用 | 設定「關閉」文字的字體大小 |
| 寬度 | 整數 | 沒有 | 不適用 | 設定框的寬度 |
| 身高 | 整數 | 沒有 | 不適用 | 設定盒子的高度 |
| 左 | 布林值 | 沒有 | 假 | 使彈出視窗位於滑鼠左側 |
| 對 | 布林值 | 沒有 | 假 | 使彈出視窗位於滑鼠右側 |
| 中心 | 布林值 | 沒有 | 假 | 使彈出視窗轉到滑鼠中心 |
| 以上 | 布林值 | 沒有 | 假 | 使彈出視窗位於滑鼠上方。注意：僅當高度已設定時才可能 |
| 下面 | 布林值 | 沒有 | 假 | 使彈出視窗位於滑鼠下方 |
| 邊框 | 整數 | 沒有 | 不適用 | 使彈出視窗的邊框變粗或變細 |
| 偏移量 | 整數 | 沒有 | 不適用 | 彈出視窗將在水平方向上距離指針多遠 |
| 偏移量 | 整數 | 沒有 | 不適用 | 彈出視窗將在垂直方向上距離指針多遠 |
| fg背景 | 影像網址 | 沒有 | 不適用 | 定義用來取代彈出視窗內部顏色的圖片。 |
| 背景 | 影像網址 | 沒有 | 不適用 | 定義用來取代彈出視窗邊框顏色的圖片。注意：您需要將 bgcolor 設為“”，否則顏色也會顯示。注意：當有關閉連結時，Netscape 將重新渲染表格單元格，使內容看起來不正確 |
| 關閉文字 | 字串 | 沒有 | 不適用 | 將「關閉」文字設定為其他內容 |
| 不關閉 | 布林值 | 沒有 | 不適用 | 不會在有標題的便籤上顯示「關閉」文字 |
| 狀態 | 字串 | 沒有 | 不適用 | 設定瀏覽器狀態列中的文字 |
| 自動狀態 | 布林值 | 沒有 | 不適用 | 將狀態列的文字設定為彈出視窗的文字。注意：覆蓋狀態設定 |
| 自動狀態帽 | 字串 | 沒有 | 不適用 | 將狀態列的文字設定為標題的文字。注意：覆蓋狀態和自動狀態設定 |
| 數組 | 整數 | 沒有 | 不適用 | 告訴 overLib 從位於 overlib.js 的 ol_text 陣列中的該索引讀取文字。可以使用此參數代替文字 |
| caparray | 整數 | 沒有 | 不適用 | 告訴 overLib 從 ol_caps 數組中的該索引讀取標題 |
| 卡皮肯 | 網址 | 沒有 | 不適用 | 顯示彈出標題之前給出的圖像 |
| 快照 | 整數 | 沒有 | 不適用 | 將彈出視窗對齊到水平網格中的均勻位置 |
| 敏捷 | 整數 | 沒有 | 不適用 | 將彈出視窗對齊到垂直網格中的均勻位置 |
| 修復 | 整數 | 沒有 | 不適用 | 鎖定彈出視窗水平位置注意：覆蓋所有其他水平放置 |
| 固定 | 整數 | 沒有 | 不適用 | 鎖定彈出視窗的垂直位置注意：覆蓋所有其他垂直位置 |
| 背景 | 網址 | 沒有 | 不適用 | 設定要使用的影像來取代表格框背景 |
| padx | 整數,整數 | 沒有 | 不適用 | 用水平空白填充背景圖像以放置文字。注意：這是一個兩個參數的指令 |
| 稻田 | 整數,整數 | 沒有 | 不適用 | 用垂直空白填充背景圖像以放置文字。注意：這是一個兩個參數的指令 |
| 完整html | 布林值 | 沒有 | 不適用 | 讓您可以完全控制背景圖片上的html。 html 程式碼應位於「text」屬性 |
| 框架 | 字串 | 沒有 | 不適用 | 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程序设计有所帮助。
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn