|
|
復(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>
該功能是通過(guò)jqueryObject.overlay()方法來(lái)實(shí)現(xiàn)的，其中overlay方法提供以下兩種方式：
1. $("button[rel]").overlay()//該方法能采用默認(rèn)方法顯示提示overlay
2. $("button[rel]").overlay({config object}) //該方法通過(guò)配置對(duì)象將來(lái)定制overlay的顯示。
以下代碼為第二種方式的配置參數(shù)實(shí)現(xiàn)（只需將該實(shí)現(xiàn)放于jquery的ready方法中即可）：
復(fù)制代碼 代碼如下:
$("#overlay").overlay({api:true}).load();//自動(dòng)顯示overlay,（無(wú)需觸發(fā)，會(huì)在頁(yè)面加載完成時(shí)自動(dòng)觸發(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'//方式一：只以簡(jiǎn)單的背景色字符串方式設(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;
}
});
以上配置參數(shù)說(shuō)明描述如下：
| 屬性 | 默認(rèn)值 | 說(shuō)明 |
| start (Object) | {top: 'center',left: 'center', width: 0,absolute: false} | 用于設(shè)置overlay彈出框開(kāi)始的位置以及大小。默認(rèn)的情況下，overlay彈出框開(kāi)始的位置是其觸發(fā)器（即觸發(fā)其顯示的頁(yè)面元素）的位置，并且overlay彈出框初始的大小為0；如果overlay不是通過(guò)頁(yè)面元素觸發(fā)的話，那么他開(kāi)始的位置為屏幕的中間位置。可以通過(guò)以下幾個(gè)參數(shù)設(shè)置來(lái)覆蓋該屬性的默認(rèn)值： |
| top:用于設(shè)置overlay彈出框開(kāi)始位置據(jù)屏幕上邊緣的距離。 | ||
| left：用于設(shè)置overlay彈出框開(kāi)始位置據(jù)屏幕左邊緣的距離。 | ||
| width:用于設(shè)置overlay彈出框在開(kāi)始位置處的寬度（即彈出框最初始寬度）；而overlay在開(kāi)始處高度則會(huì)根據(jù)寬度自動(dòng)計(jì)算出來(lái)。 | ||
| absolute:如果該值設(shè)置為true的話，那么overlay彈出框開(kāi)始處的位置這回根據(jù)瀏覽器窗口左上角處來(lái)計(jì)算并不考慮滾動(dòng)位置。如果該值設(shè)置為，那么overlay彈出框開(kāi)始處的位置將會(huì)將滾動(dòng)位置計(jì)算在內(nèi)。 | ||
| finish (Object) | {top: 100,left: 'center',absolute: false} | 用于設(shè)置overlay彈出框最終所處的位置及大小。、可以通過(guò)以下幾個(gè)參數(shù)設(shè)置來(lái)覆蓋該屬性的默認(rèn)值： |
| top:用于設(shè)置overlay彈出框最終位置據(jù)屏幕上邊緣的距離。 | ||
| left：用于設(shè)置overlay彈出框最終位置據(jù)屏幕左邊緣的距離。 | ||
| absolute:如果該值設(shè)置為true的話，那么overlay彈出框最終處的位置會(huì)根據(jù)距瀏覽器窗口左上角位置來(lái)計(jì)算并不考慮滾動(dòng)位置。如果該值設(shè)置為，那么overlay彈出框最終處的位置將會(huì)將滾動(dòng)位置計(jì)算在內(nèi)。 | ||
| 此外，overlay彈出框最終位置的大小由相關(guān)css屬性來(lái)設(shè)置的。 | ||
| expose | overlay彈出框經(jīng)常與expose功能共同使用。而二者共同使用的方式正是通過(guò)overlay的該配置屬性來(lái)設(shè)置的。該配置項(xiàng)接受expose功能的配置對(duì)象。該屬性接受的參數(shù)分兩種：一種為只接受expose背景色設(shè)置的字符串；另一種方式為expose配置對(duì)象。該屬性的兩種參數(shù)方式可參見(jiàn)本文示例。 | |
| speed | 'normal' | 設(shè)置overlay彈出框彈出的速度。該屬性接受的有效值為：slow,normal,fast，以及毫秒數(shù)值。如果該屬性值被置為0，那么overlay彈出框?qū)?huì)以無(wú)動(dòng)畫(huà)效果的方式立即顯示。 |
| fadeInSpeed | 'fast' | 設(shè)置overlay彈出框中內(nèi)容顯示的速度，該屬性接受的有效值通speed屬性。 |
| oneInstance | TRUE | 默認(rèn)情況下，一個(gè)頁(yè)面只會(huì)顯示一個(gè)overlay彈出框。但是，可通過(guò)將該屬性設(shè)置為false來(lái)允許該頁(yè)面顯示多個(gè)overlay彈出框。（注：該屬性在closeOnClick設(shè)置為false的情況下才能有比較明顯的效果。） |
| closeOnClick | TRUE | 默認(rèn)情況下，點(diǎn)擊頁(yè)面中overlay彈出框外的其他區(qū)域，可以關(guān)閉該overlay彈出框。但是，將該屬性設(shè)置為false可以屏蔽該功能。 |
| preload | TRUE | 默認(rèn)情況下，背景圖片會(huì)被預(yù)先加載到瀏覽器的緩存中。所以，當(dāng)overlay提示框被打開(kāi)時(shí)，overlay提示框的背景圖片已被加載到緩存，所以當(dāng)觸發(fā)overlay提示框時(shí)，整個(gè)提示框彈出過(guò)程會(huì)很平滑。另外，可通過(guò)將屬性設(shè)置為false來(lái)阻止背景圖片的預(yù)加載。 |
| close | 關(guān)閉按鈕設(shè)置。如果用戶沒(méi)有在該處提供overlay提示框關(guān)閉按鈕，那么，overlay提示框會(huì)自動(dòng)產(chǎn)生關(guān)閉按鈕。關(guān)于用戶自己定制關(guān)閉overlay提示按鈕的方法，請(qǐng)參考本文相關(guān)示例。 | |
| zIndex | 9999 | 設(shè)置overlay提示框的z-index屬性（css）,至于z-index屬性作用，請(qǐng)參見(jiàn)相關(guān)資料。該屬性已被設(shè)置為一個(gè)很高的值-999，所以一般情況下，該屬性不需要再行設(shè)置。但是需要注意的是，該值應(yīng)該大于通頁(yè)面其他元素的z-index值。 |
| target | 如果rel屬性沒(méi)指定overlay提示框的話，那么可通過(guò)該屬性設(shè)置overlay提示框元素。 | |
| onBeforeLoad | None | 回調(diào)函數(shù)，該屬性會(huì)在overlay提示框觸發(fā)前執(zhí)行，如果該函數(shù)返回false的話，那么overlay提示框?qū)?huì)被阻止而不顯示。 |
| onLoad | None | 回調(diào)函數(shù)，該屬性會(huì)在overlay提示框觸發(fā)完成后執(zhí)行。 |
| onBeforeClose | None | 回調(diào)函數(shù)。該屬性會(huì)在overlay提示框關(guān)閉事件觸發(fā)后，overlay提示框關(guān)閉前執(zhí)行。返回false則阻止overlay提示框關(guān)閉。 |
| onClose | None | 回調(diào)函數(shù)。該屬性會(huì)在overlay提示框關(guān)閉后觸發(fā)。 |
| api | FALSE | 該屬性設(shè)置同selector，tab功能的api屬性。該屬性意義參考本系列selector，tab相關(guān)說(shuō)明。 |
JavaScript技術(shù)：jquery tools系列 overlay 學(xué)習(xí)第1/2頁(yè)，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
