繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jquery tools系列 overlay 学习
- Javascript
- 动态改变图片尺寸（一）
- JavaScript＋PHP 应用一：网页制作中双下拉菜单的动态实现
- JavaScript + PHP 应用二：网页设计中树形菜单的动态实现
- 在Javascript中为String对象添加trim,ltrim,rtrim方法
- 纯JavaScript时钟
- 网页之定时器详解
- 为网页添加活动的背景音乐
- Javascript Game
- 实用的检测分辨率的程序代码
- 【推荐】一个非常漂亮的列表框
- 绝对精彩：在网页里做类似window右键的弹出式菜单
- 怎样使网页中的元素可编辑??
- JavaScript和Java的区别
- 怎样编写IE和NN6通用的闪烁(blank)效果
- 关于如何动态地在同一页面实现两个 < select > 互传 (s1 <==> s2)
- ＣＯＯＫＩＥ欺骗
- 连串英文自动换行的方法
- JavaScript中的正则表达式(1)
- JavaScript中的正则表达式(2)
- JavaScript窗口功能指南之定制新窗口
Javascript 中的 jquery tools系列 overlay 学习
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 678 ::
收藏到网摘: n/a
接着上次scrollable的学习，今天继续jquery tools六大功能的第四个功能——overlay的学习。 如scrollable的学习，首先给出操作的html目标代码：
复制代码 代码如下:
此外，tooltip还提供了一系列获取overlay对象的方法,具体使用方式如下:
var overlayObj=$("#overlay").overlay({api:true});
overlayObj.load();//自动显示overlay,（无需触发，会在页面加载完成时自动触发）
setTimeout(function(){overlayObj.close();},2000);//2秒后，自动加载（出现）的提示框隐藏
$("#overlayInfo").append("<P>overlay is opened:"+overlayObj.isOpened()+"</p>");//判断此时是否有overlay提示框是否显示
$("#overlayInfo").append("<p>overlay background image:"+overlayObj.getBackgroundImage()+"</p>");
$("#overlayInfo").append("<p>overlay trigger:"+overlayObj.getTrigger()+"</p>");
$("#overlayInfo").append("<p>overlay config-speed:"+overlayObj.getConf().speed+"</p>");
$("#overlayInfo").append("<p>overlay content:"+overlayObj.getContent().html()+"</p>");
overlayObj.onBeforeLoad=function(){
alert(this.getContent().attr("id"));
}
以下是overlay对象的方法说明描述：
最后，给出完整示例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="http://flowplayer.org/tools/js/tools/1.0.2/jquery.tools.min.js" ></script>
<style><!--
body {
padding:150px 50px;
font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;
}
#overlayInfo p{
color:red;
}
--></style><style >body {
padding:150px 50px;
font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;
}
#overlayInfo p{
color:red;
}</style>
<link rel="stylesheet" type="text/css" href="http://flowplayer.org/tools/css/overlay-minimal.css" />
<script type="text/javascript"><!--
$(function() {
$("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;
}
});
var overlayObj=$("#overlay").overlay({api:true});
overlayObj.load();//自动显示overlay,（无需触发，会在页面加载完成时自动触发）
setTimeout(function(){overlayObj.close();},2000);//2秒后，自动加载（出现）的提示框隐藏
$("#overlayInfo").append("<P>overlay is opened:"+overlayObj.isOpened()+"</p>");//判断此时是否有overlay提示框是否显示
$("#overlayInfo").append("<p>overlay background image:"+overlayObj.getBackgroundImage()+"</p>");
$("#overlayInfo").append("<p>overlay trigger:"+overlayObj.getTrigger()+"</p>");
$("#overlayInfo").append("<p>overlay config-speed:"+overlayObj.getConf().speed+"</p>");
$("#overlayInfo").append("<p>overlay content:"+overlayObj.getContent().html()+"</p>");
overlayObj.onBeforeLoad=function(){
alert(this.getContent().attr("id"));
}
});
// --></script>
<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>
<div id="overlayInfo"></div>
此外，tooltip还提供了一系列获取overlay对象的方法,具体使用方式如下:
复制代码 代码如下:
var overlayObj=$("#overlay").overlay({api:true});
overlayObj.load();//自动显示overlay,（无需触发，会在页面加载完成时自动触发）
setTimeout(function(){overlayObj.close();},2000);//2秒后，自动加载（出现）的提示框隐藏
$("#overlayInfo").append("<P>overlay is opened:"+overlayObj.isOpened()+"</p>");//判断此时是否有overlay提示框是否显示
$("#overlayInfo").append("<p>overlay background image:"+overlayObj.getBackgroundImage()+"</p>");
$("#overlayInfo").append("<p>overlay trigger:"+overlayObj.getTrigger()+"</p>");
$("#overlayInfo").append("<p>overlay config-speed:"+overlayObj.getConf().speed+"</p>");
$("#overlayInfo").append("<p>overlay content:"+overlayObj.getContent().html()+"</p>");
overlayObj.onBeforeLoad=function(){
alert(this.getContent().attr("id"));
}
以下是overlay对象的方法说明描述：
|
方法 |
默认值 | 描述 |
| load() | Overlay | 打开overlay提示框的另一个方法，通过该方法可以不通过页面事件触发而直接通过js脚本打开overlay提示框。 |
| close() | Overlay | （通过js脚本对该方法的调用）关闭弹出的overlay提示框。 |
| isOpened() | boolean | 判断当前是否有overlay提示框被打开。如果当前有overlay提示框已被打开，返回true。 |
| getBackgroundImage() | jQuery | 将当前overlay提示框的背景图片作为一个jquery对象返回。 |
| getContent() | jQuery | 将overlay弹出框的内容以jquery对象的方式返回。 |
| getTrigger() | jQuery | 将触发overlay弹出框的元素以jquery对象的方式返回。 |
| getConf() | Object | 获取overlay弹出框初始化时的配置对象。 |
| api | FALSE | 同配置对象中api。 |
| onBeforeLoad(fn) | API | 同配置文件中onBeforeLoad属性。 |
| onLoad(fn) | API | 同配置文件中onLoad属性。 |
| onBeforeClose(fn) | API | 同配置文件中onBeforeClose属性。 |
| onClose(fn) | API | 同配置文件中onClose属性。 |
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="http://flowplayer.org/tools/js/tools/1.0.2/jquery.tools.min.js" ></script>
<style><!--
body {
padding:150px 50px;
font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;
}
#overlayInfo p{
color:red;
}
--></style><style >body {
padding:150px 50px;
font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;
}
#overlayInfo p{
color:red;
}</style>
<link rel="stylesheet" type="text/css" href="http://flowplayer.org/tools/css/overlay-minimal.css" />
<script type="text/javascript"><!--
$(function() {
$("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;
}
});
var overlayObj=$("#overlay").overlay({api:true});
overlayObj.load();//自动显示overlay,（无需触发，会在页面加载完成时自动触发）
setTimeout(function(){overlayObj.close();},2000);//2秒后，自动加载（出现）的提示框隐藏
$("#overlayInfo").append("<P>overlay is opened:"+overlayObj.isOpened()+"</p>");//判断此时是否有overlay提示框是否显示
$("#overlayInfo").append("<p>overlay background image:"+overlayObj.getBackgroundImage()+"</p>");
$("#overlayInfo").append("<p>overlay trigger:"+overlayObj.getTrigger()+"</p>");
$("#overlayInfo").append("<p>overlay config-speed:"+overlayObj.getConf().speed+"</p>");
$("#overlayInfo").append("<p>overlay content:"+overlayObj.getContent().html()+"</p>");
overlayObj.onBeforeLoad=function(){
alert(this.getContent().attr("id"));
}
});
// --></script>
<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>
<div id="overlayInfo"></div>
评论 (0) All
