overLIB

原创 2004年08月05日 10:41:00

http://www.bosrup.com/web/overlib/?Documentation
文档
1.介绍
学习做某件事情的最好方法是自己动手去做。因此这个文件写的不长,只提供了基本指令。如果想深入学习请参阅命令参考。你将学习去做所有的cool stuff。

2. 准备页
第一,你需要准备一个在其上使用 overLIB 的页面。在Head区域结束标签之前的某处插入下面一行。

<script type="text/javascript" src="overlib.js">


然后放置下面的一行到你的页面的<body></body>区域-- 更可取的是在body区域之后立刻开始,也就是, 在<body>标签之后就插入(这很重要!):

<div id="overDiv" style ="position:absolute; visibility:hidden; z-index:1000;"></div>

如果你有在页上的其他 div 层 (也就是,放置了 DIV 容器) 你可能需要改变 z-index 的值以避免重叠。 如果文件是放在不同目录,你也一定将 overlib.js 换成正确的路径。


3. 二个不同的行为
你能用 overLIB 制造二个不同类型的popup。 第一个类型是:在你从一个链接或其他的物件把你的鼠标移开之后,popup 消失。 另一个类型'sticky'则在附近停留。 我们叫他们为 "sticky" 链接。 不同处请看这里和这里。

4. 工具提示popup
让我们看看快速消失的POPUP的代码, 它时常被叫做工具提示。
 
<a href="javascript:void(0);" onmouseover="return overlib('This is an ordinary popup.');" onmouseout="return nd();">here</a>


如你见到的一样这不是一个普通的超链接我们已经将hrefr的url替换为javascript:void(0),(一也能使用 JavaScript:; 只要他们愿意)。 当我们按下链接的时候这将使浏览器不要再载入新的页。这当然是可选择的。如果你想要,你能链接到页或别的东西。

在 onmouseover 部份 overLIB 被包含进来。无论你想要使那一种popup类型你都得调用overlib()函数。它能接受任何数量的叁数。你将很快会了解为什么这样是好的。制作一个简单的popup我们只要通过单引号将我们想要显示的文本插入到函数中。 如果字符串中包含任何的单引号,他们一定要在它们前面加上反斜线。 (/') 字符串的任何双引号 (") 应该被实体参数&quot;代替.

在此之后是onmouseout。它包含一个必要的隐藏函数。 当你把鼠标移出链接时候,对 nd() 函数的调用使popup消失。但是,你想使popups停留的话,您必须保持鼠标一直停在那儿。(You still have to have it there when making stickies though.


5. sticky popup

现在让我们看看当鼠标从链接移开之后停留的popup -sticky popup。

<a href="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();">here</a>

在他们二个之间的唯一差别是( 除了被传递的文本以外):'sticky'类型在引号内的文本之后有较多的文本,这被称为指令。 在这情况下sticky指令告诉 overLIB 我们想要popup逗留。而且MOUSEOFF指令允许你在第一次鼠标定位到popup上面并且在移开时关掉时popup。 注意: 所有的指令是以大写字母的方式而且能包含不同类型的零或更多叁数数值。想看核心模组指令的详细描述请到命令参考页。


6. 可点击的popup和指令
现在你知道了非常基本的部份让我们看看较困难些的东西。 你是否记得在frontpage里你可以在链接上单击然后使一个popup显现在上面? 这一点都不难。 你仅需把 overLIB 码放在 onclick里来代替 onmouseover 。(或二者并存) 在这有一个例子: 点击这里! 让我们再一次消化代码:

<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>

这里我们有 onclick里调用overlib()代替onmouseover,而且我们有许多指令! 正如'sticky'是一个告诉 overLIB 使popup 'sticky'的指令, 另一个命令告诉 overLIB 做其他的事情。 正常地,一个popup的第一个指令是单引号内部的文字字符串,但是它并不总是这样的。 (参见包含在命令参考页中的详细讨论)。在文本之后,你可以任何顺序向overLIB传递你想要的任何命令。一些指令虽然期待接收超过仅仅一个指令,它也想要一些数据 (如CAPTION, '插入物富于机智的说明在这里'. 当那是下一个叁数被期望是那一个数据的外壳时候。When that is the case the next parameter is expected to be that data.) 一些指令也期待超过一个叁数。 ( 这些在命令参考中被解释).

让我们通过一个调用的指令来看实际上发生的东西。 首先我们有sticky告诉 overLIB 这一个popup应该是一个‘sticky’并且在附近逗留。 接着是CAPTION和它的叁数 'sticky!'. 这告诉 overLIB ,我们想要在popup上加一个标题而且标题文本应该是sticky!。 在最后一个指令是CENTER告诉 overLIB 置中在鼠标指针下面的popup。


7. 定置overLIB
你能以三不同的方式定置overLIB 。 第一个方法你已经知道: 通过指令。 然而如果你想要所有的popup是红色的而且使用一个较大的字型, 通过一串指令设置每个popup不是很好玩的。 指令你应看作是针对某个特定的popup。 当你跟想要跟普通的不同的东西时候,指令才使用。

a.在 overlib.js 中
设定side-wede的缺省值(使用相同的overlib.js 的所有页用) 用你喜爱的文字档编辑程序打开overlib.js 。在它里面,查找"Configuration". 在那里你能改变 overLIB's Javascript缺省值变量设定。你想要改变的变量全部以ol_开头,这里是替换它们的描述。 他们看起来像这一样:

// Font face for the main text
if (typeof ol_textfont == 'undefined'){ var ol_textfont="Verdana,Arial,Helvetica";}

在命令参考中你也能见到哪一变量的每个指令盖过。 变更 overlib.js 的 " Configuration " 区段的设定是修改 overLIB 适合你的需要的有效方法。


b.在页上
当你需要改变在特定的页上许多popup的时候,你可以只在你的网站上的特定的页上更改从而不影响其他的页。在在载入 overlib.js 的JavaScritp 代码之前的位置对你想要的这个页缺省的变量简单赋值。 在这里看它的方式:

<script type="text/javascript">
var ol_textfont = "Courier New, Courier";
</script>
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<script language="JavaScript" src="overlib.js"><!-- overLIB (c) Erik Bosrup --></script>

 

c.当调用 overlib() 的时候
最后 (先前同样地提到) ,你能通过指令到在overlib()中调用本身去改变设定。 这里是一个替换了指令的先前的例子:

onmouseout="return nd();">My link

8. 命令参考
既然你知道基本的overlib()函数是如何工作的, 而且你知道如何改变脚本的设定,或在页上,你将玩得很开心因为overLIB不得不提供所有的高阶功能。 命令基准有overLIB所有的指令解释(那里是超过 50!) 而且在那里你将会找到如何使用他们的资料。

9. overLIB 插件
通过插件的使用 overLIB 同样有被增强的能力。 插件提供允许使用更多指令,这些指令是使用者可能想使他/她的popup拥有的。 每个插件的文档解释每个特别的插件支持的指令。 如果你试着没有载入支持模块就使用一个指令, 你将会得到一个XXXX 未定义的错误。同时, 如果你发现overLIB 没有的特性、mission critical feature you're mossing,你可以自己写一个插件模块!

10. 仍然不了解?
不要烦恼,你不是第一。 在你之前虽然启动找寻帮忙,再一次经过手册而且试试例子等等的尝试也确定你使用没有在它上的任何其他的 Java 描述语言,小程式和同类的 " 空的 " 页。 用正直的 overLIB 来制造页第一然后试较多的复杂事物。
当事物就是不工作的时候,得到帮忙有方法。 看一看 overLIB's 支持页并且见到安装你的东西。

欢迎来到 overLIB!

overlib实例与用法介绍

overLIB 是一个生成提示框与弹出菜单等页面效果的一段非常优秀的JS代码。 它可以简单的通过设置一些参数或命令来改变弹出页面的款式、皮肤与形状,不但如此,它还提供了非常简单的扩展功能,来足客户的...
  • renzhenhuai
  • renzhenhuai
  • 2013-04-12 20:56:27
  • 1109

overLib弹出效果

-----------------原文地址-------------------http://www.3aj.cn/java/article/4/17690.html      这个问题由我来做...
  • lvyudong686
  • lvyudong686
  • 2013-12-04 16:48:14
  • 455

overlib.rar 实用js类库

  • 2008年09月23日 17:16
  • 43KB
  • 下载

overlib的应用

  • 2014年08月05日 17:04
  • 48KB
  • 下载

overlib.zip

  • 2009年07月13日 12:52
  • 61KB
  • 下载

overlibmws.js

  • 2009年01月06日 13:02
  • 32KB
  • 下载

overlib压缩包

  • 2012年07月26日 09:51
  • 59KB
  • 下载

overlib简明教程

觉得网上overlib的资料比较少,个人觉得对于项目还是比较有用的,所以决定写一个小的教程首先,overlib主要是用来给产生tooltips的,也叫popup,就是浮出的提示框。使用overlib的...
  • hujinpu
  • hujinpu
  • 2007-11-09 09:27:00
  • 438

overlib教程

觉得网上overlib的资料比较少,个人觉得对于项目还是比较有用的,所以决定写一个小的教程 首先,overlib主要是用来给产生tooltips的,也叫popup,就是浮出的提示框。 使用over...
  • renzhenhuai
  • renzhenhuai
  • 2013-04-12 20:54:59
  • 1133

overlib的使用

overlib 是一个生成提示框与弹出菜单等页面效果的一段非常优秀的JS代码。它可以简单的通过设置一些参数或命令来改变弹出页面的款式、皮肤与形状,不但如此,它还提供了非常简单的扩展功能。    o...
  • msg_java2011
  • msg_java2011
  • 2011-09-05 17:03:57
  • 757
收藏助手
不良信息举报
您举报文章:overLIB
举报原因:
原因补充:

(最多只允许输入30个字)