代码如下:
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;
}
});
以上配置参数说明描述如下:
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
此外,tooltip还提供了一系列获取overlay对象的方法,具体使用方式如下:
代码如下:
var overlayObj=$("#overlay").overlay({api:true});
overlayObj.load();//自动显示overlay,(无需触发,会在页面加载完成时自动触发)
setTimeout(function(){overlayObj.close();},2000);//2秒后,自动加载(出现)的提示框隐藏
$("#overlayInfo").append("Poverlay is opened:"+overlayObj.isOpened()+"/p");//判断此时是否有overlay提示框是否显示
$("#overlayInfo").append("poverlay background image:"+overlayObj.getBackgroundImage()+"/p");
$("#overlayInfo").append("poverlay trigger:"+overlayObj.getTrigger()+"/p");
$("#overlayInfo").append("poverlay config-speed:"+overlayObj.getConf().speed+"/p");
$("#overlayInfo").append("poverlay 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;
}
--/stylestyle 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("Poverlay is opened:"+overlayObj.isOpened()+"/p");//判断此时是否有overlay提示框是否显示
$("#overlayInfo").append("poverlay background image:"+overlayObj.getBackgroundImage()+"/p");
$("#overlayInfo").append("poverlay trigger:"+overlayObj.getTrigger()+"/p");
$("#overlayInfo").append("poverlay config-speed:"+overlayObj.getConf().speed+"/p");
$("#overlayInfo").append("poverlay 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