Jquery tool Overlay

這兩天看了Jquery tool overlay的應用。想對overlay裏面參數做下說明。
屬性 默認值 說明
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彈出框最終所處的位置及大小。、可以通過以下幾個參數設置來覆蓋該屬性的默認值:同上
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相關說明。


如果rel屬性指定overlay提示框:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"  xml:lang="en">
    <head>
        <script src="jquery.tools.min.js">
        </script>
        
    </head>
    <body>
        <table>
            <tr><td οnclick="overlay(this)" rel="#overlays">aaaa</td></tr>
            <tr><td οnclick="overlay(this)" rel="#overlays">bbbb</td></tr>
            <tr><td οnclick="overlay(this)" rel="#overlays">cccc</td></tr>
            <div id="overlays" style="display:none;">
            <div class="close">close</div>
            aaa
            </div>
        </table>
    </body>
</html>
<script>
function overlay(obj){
    $(obj).overlay({
        load:true,
        closeOnClick:false
    });
}
</script>


如果rel屬性沒指定overlay提示框:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"  xml:lang="en">
    <head>
        <script src="jquery.tools.min.js">
        </script>
        
    </head>
    <body>
        <table>
            <tr><td οnclick="overlay(this)">aaaa</td></tr>
            <tr><td οnclick="overlay(this)">bbbb</td></tr>
            <tr><td οnclick="overlay(this)">cccc</td></tr>
            <div id="overlay" style="display:none;">
            <div class="close">close</div>
            aaa
            </div>
        </table>
    </body>
</html>
<script>
function overlay(obj){
    $(obj).overlay({
        target:'#overlay',
        load:true,
        closeOnClick:false
        
    });
}
</script>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章