jquery tools系列 overlay 學習第1/2頁

2019-11-21 01:09:58

字體：大中小

來源：轉載

供稿：網友

如scrollable的學習，首先給出操作的html目標代碼：

<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; 
        } 
        }); 

以上配置參數說明描述如下：

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

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

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

onBeforeLoad	None	回調函數，該屬性會在overlay提示框觸發前執行，如果該函數返回false的話，那么overlay提示框將會被阻止而不顯示。
onLoad	None	回調函數，該屬性會在overlay提示框觸發完成后執行。
onBeforeClose	None	回調函數。該屬性會在overlay提示框關閉事件觸發后，overlay提示框關閉前執行。返回false則阻止overlay提示框關閉。
onClose	None	回調函數。該屬性會在overlay提示框關閉后觸發。
api	FALSE	該屬性設置同selector，tab功能的api屬性。該屬性意義參考本系列selector，tab相關說明。