jquery tools overlay 使用方法

首先来看看比较简单的overlay用法



$(".my_overlay_trigger").overlay({
color: "#ccc",
top: 50
});

上面这段代码,在拥有.my_overlay_trigger的元素上绑定了overlay特性,使它们成为了overlay的触发器( trigger)。

触发器是有着落了,可是还没有用于显示的内容啊,即overlay的载体本身还没有的。默认,jquerytools会找触发器元素中是否指定了rel属性(rel中定义的是jquery选择器,指向另一个元素),如果指定了,就自动将那个元素做为overlay的容器。而如果没有rel属性的话,就得在上面的代码中指定target属性了,需给target赋予一个jquery对象。

overlay属性






































































属性名称属性值解释
closejquery对象值。可省,默认为".close"指定用于关闭的元素,给自动给那个元素绑定一个鼠标单击事件,点击之后,关闭此overlay。当此属性省略时,会自动在overlay容器里面找有.class类的元素。
closeOnClicktrue or false,默认为true指定当点击overlay的外部区域时,是否自动关闭这个overlay,默认是关闭。设置为false的话,就定义了一个modal overlay
closeOnEsctrue or false,默认为true指定当按了键盘上的esc键时,是否关闭当前这个overlay。如果设置为false,按esc将不起作用。
effect特效名,目前可用的有:'default', 'apple'定义overlay弹出时的动画效果
fixedtrue or false,默认为true指定overlay是不是相对于浏览器可见容器固定,默认为固定。设置为false的话,当页面可以向下滚动时,overlay的显示位置将不再固定
mask遮罩参数,详见expose说明文档指定是否带一个遮罩。如果不指定此属性,就没有遮罩。遮罩能带来比较好的视觉效果
left'center' or 具体数值,单位是px指定overlay弹出后,放的位置
loadtrue or false,默认为false指定,当在触发子上进行绑定overlay之后,是否立即执行显示效果,即把overlay弹出来
oneInstancetrue or false,默认为true指定当前页面是否只允许有一个overlay出现,jquerytools overlay本身是支持多个overlay在同一个页面出现的情况的
speed'norma', 'slow', 'fast' 或 一个数值(以毫秒为单位)指定overlay弹出的速度,指定为0后,就立即弹出
target一个jquery对象指定承载这个overlay的容器,一般是一个<div>
top数值、或百分比字符串 'n%',或'center'用于指定当overlay弹出时,在浏览器可见区域内的位置

事件回调函数


每个回调函数都会收到一个jQuery.Event对象作为第一个参数传入。 























回调函数名称调用时机
onBeforeLoadoverlay显示之前调用。不过这个时候,overlay本身的位置已经确定下来了
onLoad当overlay已经完全被显示出来之后调用
onBeforeClose在此overlay被关闭之前调用
onClose在此overlay被关闭之后调用

对象编程API


被绑定的触发器trigger,将会拥有一套API可以使用。这个API可以通过如下方式获得: 

var api = $(".my_overlay_trigger").data("overlay");

对于overlay来讲,它可以赋予触发器如下API。 











































方法名称返回值功能
close()此overlay数据对象关闭本overlay
getClosers()jquery对象获得本overlay中的close对象
getConf()js对象获得本overlay的配置属性
getOverlay()jquery对象得到overlay容器对象
getTrigger()jquery对象得到此overlay的触发器对象,一般就是自己了
isOpened()true or false检测当前overlay是打开的,还是关闭的
load()此overlay数据对象打开此overlay

如上,即是overlay的基本的参考内容了。后面,会补上一些经验性质的东西。并且,本身这上面还有几个疑点还没澄清。API中,返回" 此overlay数据对象"这到底是什么东东?需要通过测试来弄清楚。 
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值