jquerytools系列overlay學習_jquery

來源：懂視網責編：小采時間：2020-11-27 20:44:13

jquerytools系列overlay學習_jquery

jquerytools系列overlay學習_jquery:接著上次scrollable的學習，今天繼續jquery tools六大功能的第四個功能——overlay的學習。如scrollable的學習，首先給出操作的html目標代碼：<button rel="#overlay">Open overlay</button> &l

推薦度：

點擊下載本文 文檔為doc格式

導讀jquerytools系列overlay學習_jquery:接著上次scrollable的學習，今天繼續jquery tools六大功能的第四個功能——overlay的學習。如scrollable的學習，首先給出操作的html目標代碼：<button rel="#overlay">Open overlay</button> &l

接著上次scrollable的學習，今天繼續jquery tools六大功能的第四個功能——overlay的學習。

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

<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>

該功能是通過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相關說明。

此外，tooltip還提供了一系列獲取overlay對象的方法,具體使用方式如下:

代碼如下:

var overlayObj=$("#overlay").overlay({api:true});
overlayObj.load();//自動顯示overlay,（無需觸發，會在頁面加載完成時自動觸發）
setTimeout(function(){overlayObj.close();},2000);//2秒后，自動加載（出現）的提示框隱藏
$("#overlayInfo").append("<P>overlay is opened:"+overlayObj.isOpened()+"</p>");//判斷此時是否有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對象的方法說明描述：

方法	默認值	描述
load()	Overlay	打開overlay提示框的另一個方法，通過該方法可以不通過頁面事件觸發而直接通過js腳本打開overlay提示框。
close()	Overlay	（通過js腳本對該方法的調用）關閉彈出的overlay提示框。
isOpened()	boolean	判斷當前是否有overlay提示框被打開。如果當前有overlay提示框已被打開，返回true。
getBackgroundImage()	jQuery	將當前overlay提示框的背景圖片作為一個jquery對象返回。
getContent()	jQuery	將overlay彈出框的內容以jquery對象的方式返回。
getTrigger()	jQuery	將觸發overlay彈出框的元素以jquery對象的方式返回。
getConf()	Object	獲取overlay彈出框初始化時的配置對象。
api	FALSE	同配置對象中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">

#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',//自定義關閉按鈕
//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;
}
});

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>

<p class="overlay" id="overlay2">
<h2 style="margin:10px 0" >Here is my another overlay</h2>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

jquerytools系列overlay學習_jquery

推薦度：

點擊下載本文 文檔為doc格式

標簽：學習 tools jQuery

熱門焦點

jquerytools系列overlay學習_jquery

jquerytools系列overlay學習_jquery

jquerytools系列overlay學習_jquery

最新推薦

猜你喜歡

熱門推薦