jquery tools系列 overlay 学习
作者：bea
如scrollable的学习，首先给出操作的html目标代码： 代码如下: <button rel="#overlay">Open overlay</button> <button rel="#overlay2">Other overlay</button> <div class="overlay" id="overlay"> <h2 style="margin:10px 0" >Here is
如scrollable的学习，首先给出操作的html目标代码：
代码如下:
<button rel="#overlay">Open overlay</button>
<button rel="#overlay2">Other overlay</button>
<div class="overlay" id="overlay">
<h2 style="margin:10px 0" >Here is my overlay</h2>
<p style="float: left; margin:0px 20px 0 0;">
<span>$$$$$$$$$$</span>
</p>
<p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Donec lorem ligula, elementum vitae,
imperdiet a, posuere nec, ante. Quisque mattis massa id metus.
</p>
</div>
<div class="overlay" id="overlay2">
<h2 style="margin:10px 0" >Here is my another overlay</h2>
<p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Donec lorem ligula, elementum vitae,
imperdiet a, posuere nec, ante. Quisque mattis massa id metus.
</p>
<div>
<button id="overlayClose">close</button>
</div>
</div>
该功能是通过jqueryObject.overlay()方法来实现的，其中overlay方法提供以下两种方式：
1. $("button[rel]").overlay()//该方法能采用默认方法显示提示overlay
2. $("button[rel]").overlay({config object}) //该方法通过配置对象将来定制overlay的显示。
以下代码为第二种方式的配置参数实现（只需将该实现放于jquery的ready方法中即可）：
代码如下:
$("#overlay").overlay({api:true}).load();//自动显示overlay,（无需触发，会在页面加载完成时自动触发）
$("button[rel]").overlay({
start:{
width: 300,
absolute: false
},
finish:{
top:10,
left:400,
absolute:false
},
speed:3000,
fadeInSpeed:3000,
closeOnClick: false,
oneInstance:false,
close:'#overlayClose',//自定义关闭按钮
//expose: '#BAD0DB'//方式一：只以简单的背景色字符串方式设置
expose: {//方式二：以expose功能配置项方式设置
color: '#BAD0DB',
opacity: 0.7,
closeSpeed: 1000
},
onBeforeLoad:function(){
//alert(this.getTrigger().attr("rel")+":onBeforeLoad");//显示该overlay提示框的触发器rel属性值
},
onLoad:function(){
//alert(this.getTrigger().attr("rel")+":onLoad");
},
onBeforeClose:function(){
alert(this.getTrigger().attr("rel")+":onBeforeClose");
return false;
}
});
以上配置参数说明描述如下：
属性
默认值
说明
start (Object)
{top: 'center',left: 'center', width: 0,absolute: false}
用于设置overlay弹出框开始的位置以及大小。默认的情况下，overlay弹出框开始的位置是其触发器（即触发其显示的页面元素）的位置，并且overlay弹出框初始的大小为0；如果overlay不是通过页面元素触发的话，那么他开始的位置为屏幕的中间位置。可以通过以下几个参数设置来覆盖该属性的默认值：
top:用于设置overlay弹出框开始位置据屏幕上边缘的距离。
left：用于设置overlay弹出框开始位置据屏幕左边缘的距离。
width:用于设置overlay弹出框在开始位置处的宽度（即弹出框最初始宽度）；而overlay在开始处高度则会根据宽度自动计算出来。
absolute:如果该值设置为true的话，那么overlay弹出框开始处的位置这回根据浏览器窗口左上角处来计算并不考虑滚动位置。如果该值设置为，那么overlay弹出框开始处的位置将会将滚动位置计算在内。
finish (Object)
{top: 100,left: 'center',absolute: false}
用于设置overlay弹出框最终所处的位置及大小。、可以通过以下几个参数设置来覆盖该属性的默认值：
top:用于设置overlay弹出框最终位置据屏幕上边缘的距离。
left：用于设置overlay弹出框最终位置据屏幕左边缘的距离。
absolute:如果该值设置为true的话，那么overlay弹出框最终处的位置会根据距浏览器窗口左上角位置来计算并不考虑滚动位置。如果该值设置为，那么overlay弹出框最终处的位置将会将滚动位置计算在内。
此外，overlay弹出框最终位置的大小由相关css属性来设置的。
expose
overlay弹出框经常与expose功能共同使用。而二者共同使用的方式正是通过overlay的该配置属性来设置的。该配置项接受expose功能的配置对象。该属性接受的参数分两种：一种为只接受expose背景色设置的字符串；另一种方式为expose配置对象。该属性的两种参数方式可参见本文示例。
speed
'normal'
设置overlay弹出框弹出的速度。该属性接受的有效值为：slow,normal,fast，以及毫秒数值。如果该属性值被置为0，那么overlay弹出框将会以无动画效果的方式立即显示。
fadeInSpeed
'fast'
设置overlay弹出框中内容显示的速度，该属性接受的有效值通speed属性。
oneInstance
TRUE
默认情况下，一个页面只会显示一个overlay弹出框。但是，可通过将该属性设置为false来允许该页面显示多个overlay弹出框。（注：该属性在closeOnClick设置为false的情况下才能有比较明显的效果。）
closeOnClick
TRUE
默认情况下，点击页面中overlay弹出框外的其他区域，可以关闭该overlay弹出框。但是，将该属性设置为false可以屏蔽该功能。
preload
TRUE
默认情况下，背景图片会被预先加载到浏览器的缓存中。所以，当overlay提示框被打开时，overlay提示框的背景图片已被加载到缓存，所以当触发overlay提示框时，整个提示框弹出过程会很平滑。另外，可通过将属性设置为false来阻止背景图片的预加载。
close
关闭按钮设置。如果用户没有在该处提供overlay提示框关闭按钮，那么，overlay提示框会自动产生关闭按钮。关于用户自己定制关闭overlay提示按钮的方法，请参考本文相关示例。
zIndex
9999
设置overlay提示框的z-index属性（css）,至于z-index属性作用，请参见相关资料。该属性已被设置为一个很高的值-999，所以一般情况下，该属性不需要再行设置。但是需要注意的是，该值应该大于通页面其他元素的z-index值。
target
如果rel属性没指定overlay提示框的话，那么可通过该属性设置overlay提示框元素。
onBeforeLoad
None
回调函数，该属性会在overlay提示框触发前执行，如果该函数返回false的话，那么overlay提示框将会被阻止而不显示。
onLoad
None
回调函数，该属性会在overlay提示框触发完成后执行。
onBeforeClose
None
回调函数。该属性会在overlay提示框关闭事件触发后，overlay提示框关闭前执行。返回false则阻止overlay提示框关闭。
onClose
None
回调函数。该属性会在overlay提示框关闭后触发。
api
FALSE
该属性设置同selector，tab功能的api属性。该属性意义参考本系列selector，tab相关说明。
1
2
下一页
阅读全文
有用 | 无用
代码如下:
<button rel="#overlay">Open overlay</button>
<button rel="#overlay2">Other overlay</button>
<div class="overlay" id="overlay">
<h2 style="margin:10px 0" >Here is my overlay</h2>
<p style="float: left; margin:0px 20px 0 0;">
<span>$$$$$$$$$$</span>
</p>
<p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Donec lorem ligula, elementum vitae,
imperdiet a, posuere nec, ante. Quisque mattis massa id metus.
</p>
</div>
<div class="overlay" id="overlay2">
<h2 style="margin:10px 0" >Here is my another overlay</h2>
<p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Donec lorem ligula, elementum vitae,
imperdiet a, posuere nec, ante. Quisque mattis massa id metus.
</p>
<div>
<button id="overlayClose">close</button>
</div>
</div>
该功能是通过jqueryObject.overlay()方法来实现的，其中overlay方法提供以下两种方式：
1. $("button[rel]").overlay()//该方法能采用默认方法显示提示overlay
2. $("button[rel]").overlay({config object}) //该方法通过配置对象将来定制overlay的显示。
以下代码为第二种方式的配置参数实现（只需将该实现放于jquery的ready方法中即可）：
代码如下:
$("#overlay").overlay({api:true}).load();//自动显示overlay,（无需触发，会在页面加载完成时自动触发）
$("button[rel]").overlay({
start:{
width: 300,
absolute: false
},
finish:{
top:10,
left:400,
absolute:false
},
speed:3000,
fadeInSpeed:3000,
closeOnClick: false,
oneInstance:false,
close:'#overlayClose',//自定义关闭按钮
//expose: '#BAD0DB'//方式一：只以简单的背景色字符串方式设置
expose: {//方式二：以expose功能配置项方式设置
color: '#BAD0DB',
opacity: 0.7,
closeSpeed: 1000
},
onBeforeLoad:function(){
//alert(this.getTrigger().attr("rel")+":onBeforeLoad");//显示该overlay提示框的触发器rel属性值
},
onLoad:function(){
//alert(this.getTrigger().attr("rel")+":onLoad");
},
onBeforeClose:function(){
alert(this.getTrigger().attr("rel")+":onBeforeClose");
return false;
}
});
以上配置参数说明描述如下：
属性
默认值
说明
start (Object)
{top: 'center',left: 'center', width: 0,absolute: false}
用于设置overlay弹出框开始的位置以及大小。默认的情况下，overlay弹出框开始的位置是其触发器（即触发其显示的页面元素）的位置，并且overlay弹出框初始的大小为0；如果overlay不是通过页面元素触发的话，那么他开始的位置为屏幕的中间位置。可以通过以下几个参数设置来覆盖该属性的默认值：
top:用于设置overlay弹出框开始位置据屏幕上边缘的距离。
left：用于设置overlay弹出框开始位置据屏幕左边缘的距离。
width:用于设置overlay弹出框在开始位置处的宽度（即弹出框最初始宽度）；而overlay在开始处高度则会根据宽度自动计算出来。
absolute:如果该值设置为true的话，那么overlay弹出框开始处的位置这回根据浏览器窗口左上角处来计算并不考虑滚动位置。如果该值设置为，那么overlay弹出框开始处的位置将会将滚动位置计算在内。
finish (Object)
{top: 100,left: 'center',absolute: false}
用于设置overlay弹出框最终所处的位置及大小。、可以通过以下几个参数设置来覆盖该属性的默认值：
top:用于设置overlay弹出框最终位置据屏幕上边缘的距离。
left：用于设置overlay弹出框最终位置据屏幕左边缘的距离。
absolute:如果该值设置为true的话，那么overlay弹出框最终处的位置会根据距浏览器窗口左上角位置来计算并不考虑滚动位置。如果该值设置为，那么overlay弹出框最终处的位置将会将滚动位置计算在内。
此外，overlay弹出框最终位置的大小由相关css属性来设置的。
expose
overlay弹出框经常与expose功能共同使用。而二者共同使用的方式正是通过overlay的该配置属性来设置的。该配置项接受expose功能的配置对象。该属性接受的参数分两种：一种为只接受expose背景色设置的字符串；另一种方式为expose配置对象。该属性的两种参数方式可参见本文示例。
speed
'normal'
设置overlay弹出框弹出的速度。该属性接受的有效值为：slow,normal,fast，以及毫秒数值。如果该属性值被置为0，那么overlay弹出框将会以无动画效果的方式立即显示。
fadeInSpeed
'fast'
设置overlay弹出框中内容显示的速度，该属性接受的有效值通speed属性。
oneInstance
TRUE
默认情况下，一个页面只会显示一个overlay弹出框。但是，可通过将该属性设置为false来允许该页面显示多个overlay弹出框。（注：该属性在closeOnClick设置为false的情况下才能有比较明显的效果。）
closeOnClick
TRUE
默认情况下，点击页面中overlay弹出框外的其他区域，可以关闭该overlay弹出框。但是，将该属性设置为false可以屏蔽该功能。
preload
TRUE
默认情况下，背景图片会被预先加载到浏览器的缓存中。所以，当overlay提示框被打开时，overlay提示框的背景图片已被加载到缓存，所以当触发overlay提示框时，整个提示框弹出过程会很平滑。另外，可通过将属性设置为false来阻止背景图片的预加载。
close
关闭按钮设置。如果用户没有在该处提供overlay提示框关闭按钮，那么，overlay提示框会自动产生关闭按钮。关于用户自己定制关闭overlay提示按钮的方法，请参考本文相关示例。
zIndex
9999
设置overlay提示框的z-index属性（css）,至于z-index属性作用，请参见相关资料。该属性已被设置为一个很高的值-999，所以一般情况下，该属性不需要再行设置。但是需要注意的是，该值应该大于通页面其他元素的z-index值。
target
如果rel属性没指定overlay提示框的话，那么可通过该属性设置overlay提示框元素。
onBeforeLoad
None
回调函数，该属性会在overlay提示框触发前执行，如果该函数返回false的话，那么overlay提示框将会被阻止而不显示。
onLoad
None
回调函数，该属性会在overlay提示框触发完成后执行。
onBeforeClose
None
回调函数。该属性会在overlay提示框关闭事件触发后，overlay提示框关闭前执行。返回false则阻止overlay提示框关闭。
onClose
None
回调函数。该属性会在overlay提示框关闭后触发。
api
FALSE
该属性设置同selector，tab功能的api属性。该属性意义参考本系列selector，tab相关说明。
1
2
下一页
阅读全文
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- JS 日期验证正则附asp日期格式化函数
- jquery 简单导航实现代码
- 禁止JQuery中的load方法装载IE缓存中文件的方法
- 一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
- 用Javascript 和 CSS 实现脚注（Footnote）效果
- Javascript 获取滚动条位置等信息的函数
- 用Javascript实现锚点(Anchor)间平滑跳转
- 用 Javascript 验证表单(form)中的单选(radio)值
- 用 Javascript 验证表单(form)中多选框(checkbox)值
- Javascript String.replace的妙用
- Javascript 检测、添加、移除样式(className)函数代码
- Javascript 阻止浏览器默认操作的实现代码
- javascript 流畅动画实现原理
- javascript 定义初始化数组函数
- JS 网页彩蛋 实现代码
- javascript十个最常用的自定义函数(中文版)
- javascript 获取select下拉列表值的代码
- Javascript中的var_dump函数实现代码
- jquery tools系列 expose 学习