当前位置：编程学习 > JS >>
答案：如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弹出框开始处的位置将会将滚动位置计算在内。 | ||
| < 上一个：javascript十个最常用的自定义函数(中文版) 更多图片编程知识:
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络， |
