脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery overlay

jquery tools系列 overlay 学习第2/2页

 更新时间：2009年09月06日 12:31:03   作者：  
接着上次scrollable的学习，今天继续jquery tools六大功能的第四个功能——overlay的学习。

此外，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>
上一页12阅读全文
您可能感兴趣的文章:

相关文章

最新评论