如scrollable的學(xué)習(xí)，首先給出操作的html目標(biāo)代碼：
<button rel="#overlay">Open overlay</button>
<button rel="#overlay2">Other overlay</button>
<p 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>
</p>
<p 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>
<p>
<button id="overlayClose">close</button>
</p>
</p>
該功能是通過(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方法中即可）：
代碼如下:
$("#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ō)明。 |
此外，tooltip還提供了一系列獲取overlay對(duì)象的方法,具體使用方式如下:
代碼如下:
var overlayObj=$("#overlay").overlay({api:true});
overlayObj.load();//自動(dòng)顯示overlay,（無(wú)需觸發(fā)，會(huì)在頁(yè)面加載完成時(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對(duì)象的方法說(shuō)明描述：
方法 | 默認(rèn)值 | 描述 |
| load() | Overlay | 打開(kāi)overlay提示框的另一個(gè)方法，通過(guò)該方法可以不通過(guò)頁(yè)面事件觸發(fā)而直接通過(guò)js腳本打開(kāi)overlay提示框。 |
| close() | Overlay | （通過(guò)js腳本對(duì)該方法的調(diào)用）關(guān)閉彈出的overlay提示框。 |
| isOpened() | boolean | 判斷當(dāng)前是否有overlay提示框被打開(kāi)。如果當(dāng)前有overlay提示框已被打開(kāi)，返回true。 |
| getBackgroundImage() | jQuery | 將當(dāng)前overlay提示框的背景圖片作為一個(gè)jquery對(duì)象返回。 |
| getContent() | jQuery | 將overlay彈出框的內(nèi)容以jquery對(duì)象的方式返回。 |
| getTrigger() | jQuery | 將觸發(fā)overlay彈出框的元素以jquery對(duì)象的方式返回。 |
| getConf() | Object | 獲取overlay彈出框初始化時(shí)的配置對(duì)象。 |
| api | FALSE | 同配置對(duì)象中api。 |
| onBeforeLoad(fn) | API | 同配置文件中onBeforeLoad屬性。 |
| onLoad(fn) | API | 同配置文件中onLoad屬性。 |
| onBeforeClose(fn) | API | 同配置文件中onBeforeClose屬性。 |
| onClose(fn) | API | 同配置文件中onClose屬性。 |
最后，給出完整示例代碼：
代碼如下:
<!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" href="http://flowplayer.org/tools/css/overlay-minimal.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'//方式一：只以簡(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;
}
});
var overlayObj=$("#overlay").overlay({api:true});
overlayObj.load();//自動(dòng)顯示overlay,（無(wú)需觸發(fā)，會(huì)在頁(yè)面加載完成時(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>
<p 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>
</p>
<p 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>
<p>
<button id="overlayClose">close</button>
</p>
</p>
<p id="overlayInfo"></p>
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2024 51dongshi.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬(wàn)商天勤律師事務(wù)所王興未律師提供法律服務(wù)
