DIV CSS 佈局教程網

如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相關說明。

此外，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">

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

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"));
}
});
// --></script>
<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>
<div id="overlayInfo"></div>