|
|
復(fù)制代碼 代碼如下:
<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()//該方法能采用默認(rèn)方法顯示提示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ù)說明描述如下：
| 屬性 | 默認(rèn)值 | 說明 |
| start (Object) | {top: 'center',left: 'center', width: 0,absolute: false} | 用于設(shè)置overlay彈出框開始的位置以及大小。默認(rèn)的情況下，overlay彈出框開始的位置是其觸發(fā)器（即觸發(fā)其顯示的頁面元素）的位置，并且overlay彈出框初始的大小為0；如果overlay不是通過頁面元素觸發(fā)的話，那么他開始的位置為屏幕的中間位置?？梢酝ㄟ^以下幾個參數(shù)設(shè)置來覆蓋該屬性的默認(rèn)值： |
| 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è)置來覆蓋該屬性的默認(rèn)值： |
| 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 | 默認(rèn)情況下，一個頁面只會顯示一個overlay彈出框。但是，可通過將該屬性設(shè)置為false來允許該頁面顯示多個overlay彈出框。（注：該屬性在closeOnClick設(shè)置為false的情況下才能有比較明顯的效果。） |
| closeOnClick | TRUE | 默認(rèn)情況下，點擊頁面中overlay彈出框外的其他區(qū)域，可以關(guān)閉該overlay彈出框。但是，將該屬性設(shè)置為false可以屏蔽該功能。 |
| preload | TRUE | 默認(rèn)情況下，背景圖片會被預(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)說明。 |
JavaScript技術(shù)：jquery tools系列 overlay 學(xué)習(xí)第1/2頁，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
