快捷導(dǎo)航

jquery tools系列 overlay 學(xué)習(xí)第1/2頁

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

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

如scrollable的學(xué)習(xí)，首先給出操作的html目標(biāo)代碼：

<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()方法來實現(xiàn)的，其中overlay方法提供以下兩種方式：
1. $("button[rel]").overlay()//該方法能采用默認方法顯示提示overlay
2. $("button[rel]").overlay({config object}) //該方法通過配置對象將來定制overlay的顯示。
以下代碼為第二種方式的配置參數(shù)實現(xiàn)（只需將該實現(xiàn)放于jquery的ready方法中即可）：

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

 
    $("#overlay").overlay({api:true}).load();//自動顯示overlay,（無需觸發(fā)，會在頁面加載完成時自動觸發(fā)） 
    $("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功能配置項方式設(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; 
        } 
        }); 

以上配置參數(shù)說明描述如下：

屬性	默認值	說明
start (Object)	{top: 'center',left: 'center', width: 0,absolute: false}	用于設(shè)置overlay彈出框開始的位置以及大小。默認的情況下，overlay彈出框開始的位置是其觸發(fā)器（即觸發(fā)其顯示的頁面元素）的位置，并且overlay彈出框初始的大小為0；如果overlay不是通過頁面元素觸發(fā)的話，那么他開始的位置為屏幕的中間位置?？梢酝ㄟ^以下幾個參數(shù)設(shè)置來覆蓋該屬性的默認值：
		top:用于設(shè)置overlay彈出框開始位置據(jù)屏幕上邊緣的距離。
		left：用于設(shè)置overlay彈出框開始位置據(jù)屏幕左邊緣的距離。
		width:用于設(shè)置overlay彈出框在開始位置處的寬度（即彈出框最初始寬度）；而overlay在開始處高度則會根據(jù)寬度自動計算出來。
		absolute:如果該值設(shè)置為true的話，那么overlay彈出框開始處的位置這回根據(jù)瀏覽器窗口左上角處來計算并不考慮滾動位置。如果該值設(shè)置為，那么overlay彈出框開始處的位置將會將滾動位置計算在內(nèi)。

finish (Object)	{top: 100,left: 'center',absolute: false}	用于設(shè)置overlay彈出框最終所處的位置及大小。、可以通過以下幾個參數(shù)設(shè)置來覆蓋該屬性的默認值：
		top:用于設(shè)置overlay彈出框最終位置據(jù)屏幕上邊緣的距離。
		left：用于設(shè)置overlay彈出框最終位置據(jù)屏幕左邊緣的距離。
		absolute:如果該值設(shè)置為true的話，那么overlay彈出框最終處的位置會根據(jù)距瀏覽器窗口左上角位置來計算并不考慮滾動位置。如果該值設(shè)置為，那么overlay彈出框最終處的位置將會將滾動位置計算在內(nèi)。
		此外，overlay彈出框最終位置的大小由相關(guān)css屬性來設(shè)置的。

expose		overlay彈出框經(jīng)常與expose功能共同使用。而二者共同使用的方式正是通過overlay的該配置屬性來設(shè)置的。該配置項接受expose功能的配置對象。該屬性接受的參數(shù)分兩種：一種為只接受expose背景色設(shè)置的字符串；另一種方式為expose配置對象。該屬性的兩種參數(shù)方式可參見本文示例。
speed	'normal'	設(shè)置overlay彈出框彈出的速度。該屬性接受的有效值為：slow,normal,fast，以及毫秒數(shù)值。如果該屬性值被置為0，那么overlay彈出框?qū)詿o動畫效果的方式立即顯示。
fadeInSpeed	'fast'	設(shè)置overlay彈出框中內(nèi)容顯示的速度，該屬性接受的有效值通speed屬性。
oneInstance	TRUE	默認情況下，一個頁面只會顯示一個overlay彈出框。但是，可通過將該屬性設(shè)置為false來允許該頁面顯示多個overlay彈出框。（注：該屬性在closeOnClick設(shè)置為false的情況下才能有比較明顯的效果。）
closeOnClick	TRUE	默認情況下，點擊頁面中overlay彈出框外的其他區(qū)域，可以關(guān)閉該overlay彈出框。但是，將該屬性設(shè)置為false可以屏蔽該功能。
preload	TRUE	默認情況下，背景圖片會被預(yù)先加載到瀏覽器的緩存中。所以，當(dāng)overlay提示框被打開時，overlay提示框的背景圖片已被加載到緩存，所以當(dāng)觸發(fā)overlay提示框時，整個提示框彈出過程會很平滑。另外，可通過將屬性設(shè)置為false來阻止背景圖片的預(yù)加載。
close		關(guān)閉按鈕設(shè)置。如果用戶沒有在該處提供overlay提示框關(guān)閉按鈕，那么，overlay提示框會自動產(chǎn)生關(guān)閉按鈕。關(guān)于用戶自己定制關(guān)閉overlay提示按鈕的方法，請參考本文相關(guān)示例。
zIndex	9999	設(shè)置overlay提示框的z-index屬性（css）,至于z-index屬性作用，請參見相關(guān)資料。該屬性已被設(shè)置為一個很高的值-999，所以一般情況下，該屬性不需要再行設(shè)置。但是需要注意的是，該值應(yīng)該大于通頁面其他元素的z-index值。
target		如果rel屬性沒指定overlay提示框的話，那么可通過該屬性設(shè)置overlay提示框元素。

onBeforeLoad	None	回調(diào)函數(shù)，該屬性會在overlay提示框觸發(fā)前執(zhí)行，如果該函數(shù)返回false的話，那么overlay提示框?qū)蛔柚苟伙@示。
onLoad	None	回調(diào)函數(shù)，該屬性會在overlay提示框觸發(fā)完成后執(zhí)行。
onBeforeClose	None	回調(diào)函數(shù)。該屬性會在overlay提示框關(guān)閉事件觸發(fā)后，overlay提示框關(guān)閉前執(zhí)行。返回false則阻止overlay提示框關(guān)閉。
onClose	None	回調(diào)函數(shù)。該屬性會在overlay提示框關(guān)閉后觸發(fā)。
api	FALSE	該屬性設(shè)置同selector，tab功能的api屬性。該屬性意義參考本系列selector，tab相關(guān)說明。