所谓overlay,就是浮层。就是那种在当前页面弹出的一个新的层。它可以作为对话框的容器、图片展示容器、播放器容器等等。
废话少说,直接切入正题。
使用:
// select one or more elements to be overlay triggers
$(".my_overlay_trigger").overlay({
// one configuration property
color: '#ccc',
// another property
top: 50
// ... the rest of the configuration properties
});
上面这段代码,在拥有.my_overlay_trigger的元素上绑定了overlay特性,使它们成为了overlay的触发器。
触发器是有着落了,可是还没有用于显示的内容啊,即overlay的载体本身还没有的。默认,jquerytools会找触发器元素中是否指定了rel属性(值为jquery选择子,指向另一个元素),如果指定了,就自动将那个元素做为overlay的容器。而如果没有rel属性的话,就得在上面的代码中指定target属性了,需给target赋予一个jquery对象。
overlay属性
属性名称 | 属性值 | 解释 |
close | jquery对象值。可省 | 指定用于关闭的元素,给自动给那个元素绑定一个鼠标单击事件,点击之后,关闭此overlay。当此属性省略时,会自动在overlay容器里面找有.class类的元素。 |
closeOnClick | true or false,默认为true | 指定当点击overlay的外部区域时,是否自动关闭这个overlay,默认是关闭。设置为false的话,就定义了一个modal overlay |
closeOnEsc | true or false,默认为true | 指定当按了键盘上的esc键时,是否关闭当前这个overlay。如果设置为false,按esc将不起作用。 |
effect | 特效名,目前可用的有:'default', 'apple' | 定义overlay弹出时的动画效果 |
fixed | true or false,默认为true | 指定overlay是不是相对于浏览器可见容器固定,默认为固定。设置为false的话,当页面可以向下滚动时,overlay的显示位置将不再固定 |
mask | 遮罩参数,详见expose说明文档 | 指定是否带一个遮罩。如果不指定此属性,就没有遮罩。遮罩能带来比较好的视觉效果 |
left | 'center' or 具体数值,单位是px | 指定overlay弹出后,放的位置 |
load | true or false,默认为false | 指定,当在触发子上进行绑定overlay之后,是否立即执行显示效果,即把overlay弹出来 |
oneInstance | true or false,默认为true | 指定当前页面是否只允许有一个overlay出现,jquerytools overlay本身是支持多个overlay在同一个页面出现的情况的 |
speed | 'norma', 'slow', 'fast' 或 一个数值(以毫秒为单位) | 指定overlay弹出的速度,指定为0后,就立即弹出 |
target | 一个jquery对象 | 指定承载这个overlay的容器,一般是一个<div> |
top | 数值、或百分比字符串 'n%',或'center' | 用于指定当overlay弹出时,在浏览器可见区域内的位置 |
事件回调函数
回调函数名称 | 调用时机 |
onBeforeLoad | overlay显示之前调用。不过这个时候,overlay本身的位置已经确定下来了 |
onLoad | 当overlay已经完全被显示出来之后调用 |
onBeforeClose | 在此overlay被关闭之前调用 |
onClose | 在此overlay被关闭之后调用 |
每个回调函数都会收到一个jQuery.Event对象作为第一个参数传入。
对象编程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数据对象”这到底是什么东东?需要通过测试来弄清楚。
分享到:
相关推荐
jQuery-Tools-overlay 使用介绍,需要的朋友可以参考下
接着上次scrollable的学习,今天继续jquery tools六大功能的第四个功能——overlay的学习。
前端项目-jquery-loading-overlay,A flexible loading overlay jQuery Plugin
主机overlay和网络overlay介绍 .pptx
DICOM图像,overlay层,包含只有一层overlay,两侧overlay,overlay加原始图像三种DICOM图像。 不少DICOM开源框架对这种图像支持不够,显示有问题。便于测试系统对带有overlay图像的显示是否正确
Overlay组播Overlay组播Overlay组播Overlay组播Overlay组播Overlay组播Overlay组播Overlay组播
self._createDiv = function() { if (self._overlay) return; self._overlay = $(“<div></div>”); var overlayCss = { ‘width’: ‘100%’, ‘min-height’: ‘100%’, ‘position’: ‘fixed’, ‘top’: 0, ...
docker清理大杀器/docker的overlay、overlay2文件占用磁盘太大的解决办法
Overlay-like Effect with jQuery 是一个基于jquery的过渡(筛选)特效插件,区别于传统的遮罩效果,它通过改变其他元素的透明度实现类似遮罩的效果,它可以使某个元素突出显示,其他元素则在遮罩之下。
虽然方便好用,但是个人觉得其在UI方面的表现不是太出彩,今天无意中看到jquery tools–一种基于jquery的UI表现框架,其UI功能展示风格类似(或模仿)flex。该框架提供了tabs(选项卡/页签)overlay(覆盖层),tooltip...
关于FPGA overlay的解释,很有参考价值,对于项目实践很有作用。。。。
弹出层引用的库文件
SPM多重overlay方法,神经成像方面的人做为参考!SPM多重overlay方法,神经成像方面的人做为参考!
Overlay程序设计技术的基本原理是利用模块化设计思想,将任务划分成多个功能模块,在内存中只加载当前需要执行的模块,不加载其他暂不执行的模块。但当其他模块需要执行时,首先将内存中的模块卸载,然后将需要执行的模块...
1.网络虚拟化技术介绍 2.Overlay基本概览和分类 3.VXLAN基础基础
封装好的overlay 要解决tearing的问题,用overlay