jquery tools系列 overlay 學(xué)習(xí)

更新時(shí)間：2009年09月06日 12:31:03 作者：

接著上次scrollable的學(xué)習(xí)，今天繼續(xù)jquery tools六大功能的第四個(gè)功能——overlay的學(xué)習(xí)。

此外，tooltip還提供了一系列獲取overlay對象的方法,具體使用方式如下:

 
var overlayObj=$("#overlay").overlay({api:true}); 
        overlayObj.load();//自動(dòng)顯示overlay,（無需觸發(fā)，會在頁面加載完成時(shí)自動(dòng)觸發(fā)） 
        setTimeout(function(){overlayObj.close();},2000);//2秒后，自動(dòng)加載（出現(xiàn)）的提示框隱藏 
        $("#overlayInfo").append("<P>overlay is opened:"+overlayObj.isOpened()+"</p>");//判斷此時(shí)是否有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對象的方法說明描述：

方法	默認(rèn)值	描述
load()	Overlay	打開overlay提示框的另一個(gè)方法，通過該方法可以不通過頁面事件觸發(fā)而直接通過js腳本打開overlay提示框。
close()	Overlay	（通過js腳本對該方法的調(diào)用）關(guān)閉彈出的overlay提示框。
isOpened()	boolean	判斷當(dāng)前是否有overlay提示框被打開。如果當(dāng)前有overlay提示框已被打開，返回true。
getBackgroundImage()	jQuery	將當(dāng)前overlay提示框的背景圖片作為一個(gè)jquery對象返回。
getContent()	jQuery	將overlay彈出框的內(nèi)容以jquery對象的方式返回。
getTrigger()	jQuery	將觸發(fā)overlay彈出框的元素以jquery對象的方式返回。
getConf()	Object	獲取overlay彈出框初始化時(shí)的配置對象。
api	FALSE	同配置對象中api。

onBeforeLoad(fn)	API	同配置文件中onBeforeLoad屬性。
onLoad(fn)	API	同配置文件中onLoad屬性。
onBeforeClose(fn)	API	同配置文件中onBeforeClose屬性。
onClose(fn)	API	同配置文件中onClose屬性。

最后，給出完整示例代碼：

復(fù)制代碼代碼如下:

 
<!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"  /> 
<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',//自定義關(guān)閉按鈕 
        //expose: '#BAD0DB'//方式一：只以簡單的背景色字符串方式設(shè)置 
        expose: {//方式二：以expose功能配置項(xiàng)方式設(shè)置 
            color: '#BAD0DB', 
            opacity: 0.7, 
            closeSpeed: 1000 
        }, 
        onBeforeLoad:function(){ 
            //alert(this.getTrigger().attr("rel")+":onBeforeLoad");//顯示該overlay提示框的觸發(fā)器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();//自動(dòng)顯示overlay,（無需觸發(fā)，會在頁面加載完成時(shí)自動(dòng)觸發(fā)） 
        setTimeout(function(){overlayObj.close();},2000);//2秒后，自動(dòng)加載（出現(xiàn)）的提示框隱藏 
        $("#overlayInfo").append("<P>overlay is opened:"+overlayObj.isOpened()+"</p>");//判斷此時(shí)是否有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> 