Usage
The general way to setup overlay is as follows:
$(".my_overlay_trigger").overlay({
color: '#ccc',
top: 50
});
When you click on one of the triggers it will open an overlay that is being specified by the trigger's rel attribute. Look at theminimal setup to get started quickly.
Demos
You can study the workings of overlay in the following examples. Each contains documented source code, along with a standalone page to allow you to easily transfer the examples to your own site. The most important example is the first one, "Minimal setup for overlay".
Combining overlay with Flowplayer
These demos provide some examples of how to use overlay and Flowplayer together.
Overlay Graphics
You can use our graphics as the basis for your design. You can freely change the design as you see fit. Click the image on the right to download a zip file. Before using the graphics, you should consult the User's Guideon how graphics can be used when designing the look and feel of the tools.
Here are a few examples of what is included in the zip file:
Configuration
Here is a list of all available configuration options:
Property
Default value
Description
close |
|
A jQuery selector for the closing elements inside the overlay. These can be any elements such as links, buttons or images. If this is not supplied, a close element is auto-generated. Read more about this in defining close actions. |
closeOnClick |
true |
By default, overlays are closed when the mouse is clicked outside the overlay area. Setting this property to false suppresses this behaviour which is suitable formodal dialogs. |
closeOnEsc |
true |
By default, overlays are closed when the ESC keyboard key is pressed. Setting this property to false suppresses this behaviour. |
effect |
'default' |
The effect to be used when an overlay is opened and closed. This can dramatically change the behaviour of the overlay. By default this tool uses an effect called "default" which is a simple show/hide effect.
Here is a list of currently available effects and you can also make your own effects.
|
fixed |
true |
since 1.2.0. whether overlay stays in the same position while the screen is scrolled. This is the default behaviour for all browsers except IE6 and below. IE6 does not support fixed positioning. If this property is set to false then the overlay is positioned in relationship to the document so that when the screen is scrolled then the overlay moves along with the document. |
mask |
|
Previously known as expose. Overlay is very often used together with the Mask Tool. Because of this, the support for this feature has been built inside the tool. This option accepts the mask configuration. This is either a simple string specifying the background color of the mask or a more complex object literal specifying more configuration variables.
See an example of an overlay together with mask. By default masking is disabled.
|
left |
"center" |
Specifies how far from the left-hand edge of the screen the overlay should be placed. By default the overlay is horizontally centered with the value "center" but you can also supply a numerical value specifying a distance in pixels. |
load |
false |
since 1.2.0. If enabled then the overlay loads immediately after it has been initialized. |
oneInstance |
true |
By default, there can be only one overlay on the page at once. Setting this property to false allows you to have multiple overlay instances. |
speed |
'normal' |
The speed of the fade-in animation on the "default" effect. Valid values are 'slow', 'normal' and 'fast', or you can supply a numerical value (in milliseconds). By setting this property to 0, the overlay will appear immediately without any animation. |
target |
|
The element to be overlayed (if not specified in the rel attribute of the triggering element). |
top |
'10%' |
Specifies how far from the top edge of the screen the overlay should be placed. Acceptable values are an integer number specifying a distance in pixels, a string (such as '15%') specifying a percentage value or "center" in which case the overlay is vertically centered. Percentage values work consistently at different screen resolutions. |
Events
Make sure you have read about Events in jQuery Tools. All event listeners receive the Event Object as the first argument and there are no other arguments for Overlay.
event
When it occurs?
onBeforeLoad |
before the overlay is displayed. The overlay has already been positioned at the location from where it will start animating. |
onLoad |
when the overlay has completely been displayed |
onBeforeClose |
before the overlay is closed |
onClose |
when the overlay is closed |
Scripting API
First make sure you have familiarized yourself with jQuery Tools scripting. Here is a list of all available API methods:
Method
Return value type
Description
close() |
Overlay |
Closes the overlay. |
getClosers() |
jQuery |
Returns the closing element(s) as a jQuery object. |
getConf() |
Object |
Returns the configuration for the overlay. |
getOverlay() |
jQuery |
Returns the overlayed element as a jQuery object. |
getTrigger() |
jQuery |
Returns the triggering element as a jQuery object. |
isOpened() |
boolean |
Returns true if the overlay is opened. |
load() |
Overlay |
Opens the overlay. |
Defining custom close elements
By default, a close button is auto-generated as the first element inside the container. Here is the generated HTML:
<div class="close"></div>
You can easily add more closing elements inside the overlay simply by assigning the CSS class name "close" to them. These elements can be styled and positioned any way you like inside the overlay.
If you supply a value for the
close
configuration variable, the close element is not auto-generated and you need to define the closing element(s) yourself.
Making custom effects
If you want to make custom effects you should use the $.tools.overlay.addEffect method. This method is "static", meaning that you don't have to have the overlay API (or instance) already loaded. You can add effects before any overlays are initialized.
This method accepts three arguments. The first argument is the effect name, the second argument is the function that performs the required functionality for loading the overlay and the third argument is a function that closes the overlay. You can use this method to modify existing effects or add new ones. Here is the official default effect taken directly from the source code of the overlay tool:
$.tools.overlay.addEffect("myEffect", function(position, done) {
this.getOverlay().css(position).fadeIn(this.getConf().speed, done);
},
function(done) {
this.getOverlay().fadeOut(this.getConf().closeSpeed, done);
}
);
As you can see it is fairly easy to implement effects. Inside the functions the this variable is a pointer to the scripting API. This gives you access to various parts of the overlay elements.
The loading function receives two arguments. The first argument position defines the top and left properties given in the configuration. The second argument is a callback function that must be called after you have performed your loading effect.
The done callback received as an argument must be called after you have performed you effect. The reason for this is that many times those effects perform animations that have a certain duration. We must know when these animations are finished so that the onLoad and onHide events are really called after the overlay is completely shown or hidden.
Note: if you are using jQuery's animate, fadeIn or fadeOut methods the done function can simply be given to this method as the last argument. jQuery will take care of it after the animation finishes. Otherwise you must call done.call().
Here is one custom overlay effect demo.
原文地址:http://flowplayer.org/tools/overlay/index.html
Keywords:javascript overlay,jquery lightbox,jquery applebox,jquery overlay,jquery overlayed content,applebox,apple box
Description:Generic JavaScript overlays with Apple-like look and feel
分享到:
相关推荐
前端项目-jquery-loading-overlay,A flexible loading overlay jQuery Plugin
Overlay-like Effect with jQuery 是一个基于jquery的过渡(筛选)特效插件,区别于传统的遮罩效果,它通过改变其他元素的透明度实现类似遮罩的效果,它可以使某个元素突出显示,其他元素则在遮罩之下。
----------------------------使用--------------------------------- gradle-7.3.3 JDK-11 TOMCAT-9 MYSQL-5.7.35 REDIS-5.X ----------------------------实现功能如下------------------------------------ ...
构建cas的war部署包(cas-overlay)(cas-server-webapp)(4.2.7)构建cas部署包
cas 单点登录5.3版本模板,自测可以集成springboot,亲测可用!注意:这个是源代码,不是集成springboot后的项目!下载请看清。如果想要集成后的项目,后续会发。
spring boot 搭建cas server overlay 5.3,导入即可用
jQuery-Tools-overlay 使用介绍,需要的朋友可以参考下
cas6.x需要使用jdk11版本,目前cas5.3.15.1是8的最高版本,但是稳定性cas-5.3.14.war最佳,本次基于jdk8-201编译
glog.overlay-x64_v120_Debug_dynamic -Version 0.3.3.0 OpenCV.overlay-x64_v120_Debug -Version 2.4.10 OpenCV.overlay-x64_v120 -Version 2.4.10 glog.overlay-x64_v120_dynamic -Version 0.3.3.0
描述 提供某些要在覆盖目录上运行的工具。 有关详细信息,请参见各个命令的帮助。 这是一小组工具,可帮助自动执行一些与Gentoo覆盖物维护相关的任务... $ overlay_maintain_tools --overlay-dir /srv/overlay mkreadm
webpack-hot-client-overlay 这是一个早期的原型,提供了与webpack-hot-client一起使用的浏览器内覆盖。笔记这主要是webpack-hot-middleware等效代码的直接复制粘贴端口。 目前,它打算足够我用于我自己的目的,如果...
单点登陆cas5.3.war
overlay_load test
Add images and wrap them with a link to the zoomed version -------------------------------------------- <a href="image_big.jpg"><img src="image_small.jpg" alt=""/></a> ------------------------------...
摘要:脚本资源,jQuery,jQuery插件 Overlay-like Effect with jQuery 是一个基于jquery的过渡特效插件,区别于传统的遮罩效果,它通过改变其他元素的透明度实现类似遮罩的效果,它可以使某个元素突出显示,其他元素则在...
PixiJS过滤器演示版单击以交互方式使用过滤器,以查看其工作原理。...pixi / filter-bulge-pinch ColorMapFilter @ pixi / filter-color-map ColorOverlayFilter @ pixi / filter-color-overlay ColorReplace
sso 单点登录cas使用(2): cas 4.2.7 maven cas-overlay服务端数据库配置
BlueSoft-Util.zip,一堆有用的类。在许多Bluesoft项目中使用的简单实用程序类
cas-overlay-template 4.2