jquery tools系列 expose 學習

2019-11-21 01:09:55

字體：大中小

來源：轉載

供稿：網友

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

<div id="test"> 
    expose test! 
</div> 

<div style="margin:0 auto;width:300px"> 
    <img src="http://flowplayer.org/tools/img/expose/ball_large.png" id="ball" style="width:130px" /> 
</div> 
<div style="position:relative;z-index:10000"> 
<button type="button" id="btn_open">open div</button> 
<button type="button" id="btn_close">close div</button> 
</div>

該功能是通過jqueryObject.expose()方法來實現的，其具體實現方式如下：
$("jquery selector").expose({config object}) //該方法通過配置對象將來定制expose的顯示。
以下代碼為配置參數說明描述：

屬性	默認值	詳細描述
color	'#456'	設置頁面中非expose(突出顯示)區域在expose（突出顯示）效果顯示時的背景顏色。如果此處未設置背景色，那么expose功能會提供一個默認的顏色。另外屬性亦可通過maskId的CSS樣式來設置。
opacity	0.8	設置頁面中非expose(突出顯示)區域在expose（突出顯示）效果顯示時的背景透明度。該處透明度的取值范圍為[0,1]，該處值越大，透明度越低。
loadSpeed	'slow'	設置頁面中非expose(突出顯示)區域在expose（突出顯示）效果觸發時的顯示速度。該處值可設置為：'slow','normal','fast'和毫秒數值。例如：如果此處設置值為2000，那么非expose(突出顯示)區域效果將會在2秒鐘中內顯示完成。如果此處設置值為0，那么非expose(突出顯示)區域將會沒有動畫效果并立即顯示出來。
closeSpeed	'fast'	設置頁面中非expose(突出顯示)區域在expose（突出顯示）效果關閉時的關閉速度。該處值可設置為：'slow','normal','fast'和毫秒數值。具體示例可參見本文相關示例。

maskId	'exposeMask'	非expose（突出顯示）區域對應的頁面div元素id，它是一個普通的div元素，當expose(突出顯示)被觸發后，他會自動調整以完全的覆蓋整個頁面。非expose(突出顯示)區域的顯示效果可以通過設置該處div的樣式來改變。如果此處沒有設置，那么該插件會默認提供一個id為exposeMask的div來實現非expose區域。
closeOnClick	TRUE	該屬性用于設置非expose區域被點擊時，是否關閉expose(突出顯示)效果。該屬性默認值為true，及非expose區域被點擊后，expose效果被關閉。
closeOnEsc	TRUE	該屬性用于設置Esc鍵被按下后，是否關閉expose(突出顯示)效果。該屬性默認值為true，及Esc鍵被按下后，expose效果被關閉。
zIndex	9998	設置頁面設置頁面中非expose(突出顯示)區域的z-index（CSS）屬性。一般情況下，默認的zIndex屬性值都非常大，所以這里不需要設置，但是，有一點需要注意的是，該非expose（突出顯示）的z-index屬性值一定要大于頁面中任何一個元素的z-index屬性。
api	FALSE	該屬性解釋可參見本系列中tabs,scollable等功能同屬性的解釋。

onBeforeLoad		expose（突出顯示）效果觸發前調用函數。如果該函數返回false，那么expose(突出效果)將會被阻止實現。
onLoad		expose（突出顯示）效果實現后,該函數被觸發。
onBeforeClose		expose（突出顯示）效果關閉前調用函數。如果該函數返回false，那么expose(突出效果)將會被阻止關閉。
onClose		expose（突出顯示）效果關閉后,該函數被觸發。

此外，expose還提供了一系列獲取expose對象的方法，這些方法的說明描述如下：

方法	返回值	詳細描述
load()	API	觸發expose(突出顯示)效果,該方法只有expose(突出顯示)被初始化后才能調用成功。
close()	API	關閉expose(突出顯示)效果。
isLoaded()	boolean	判斷當前expose(突出顯示)是否已被觸發。
getMask()	jQuery	返回非expose(突出顯示)的jquery對象。可以通過jquery的相關方法來改變非expose(突出顯示)區域的顯示效果。
getExposed()	jQuery	返回expose(突出顯示)的jquery對象。
getConf()	Object	返回expose(突出顯示)的配置對象。

onBeforeLoad(fn)	API	同配置文件中onBeforeLoad屬性。
onLoad(fn)	API	同配置文件中onLoad屬性。
onBeforeClose(fn)	API	同配置文件中onBeforeClose屬性。
onClose(fn)	API	同配置文件中onClose屬性。

對于expose配置對象屬性設置及方法調用的具體使用方法如下：

復制代碼代碼如下:

var testApi=$("#test").expose({ 
            color:'#44f', 
            opacity:0.5, 
            loadSpeed:2000, 
            closeSpeed:3000, 
            closeOnClick:false, 
            closeOnEsc:false, 
            api: true, 
            lazy:true, 
            onBeforeLoad:function(){ 
                alert("before load!"); 
            }, 
            onLoad:function(){ 
                alert("onLoad!"); 
            }, 
            onBeforeClose:function(){ 
                alert("mask-background:"+this.getMask().css("color")+",exposeId:"+this.getExposed().attr("id") 
                                    +"/n expose color:"+this.getConf().color); 
                //alert("Before close!"); 
            }, 
            onClose:function(){ 
                alert("Close!"); 
            } 

        }); 

         
    $("#test").click(function() { 
        testApi.load(); 
    }); 

    $("#btn_open").click(function(){ 
        testApi.load(); 
    }); 
    $("#btn_close").click(function(){ 
        testApi.close(); 
    }); 

    alert("test is load:"+testApi.isLoaded()); 

    $("#ball").expose({ 
        //此處通過maskId中樣式的backgroundcolor來設置color屬性 
        maskId:'mask', 
        opacity:0.5, 
        closeSpeed:'slow', 
        onBeforeLoad:function(){ 
            this.getExposed().animate({width:298}); 
        }, 
        onBeforeClose:function(){ 
            this.getExposed().animate({width:130});     
        } 

        }).click(function(){ 
        $(this).expose().load(); 
    });

最后，給出完整示例代碼及該功能得部分demo圖片：

復制代碼代碼如下:

<!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><!-- 
#test { 
    border:1px solid #ccc; 
    background-color:#fff; 
    padding:50px; 
    font-size:30px; 
    margin:20px auto; 
    text-align:center; 
    width:600px; 
} 
#mask { 
background:#072a88 url(http://flowplayer.org/tools/img/expose/mask_star_1600px.jpg) no-repeat scroll 50% -274px; 
} 
--></style><style >#test { 
    border:1px solid #ccc; 
    background-color:#fff; 
    padding:50px; 
    font-size:30px; 
    margin:20px auto; 
    text-align:center; 
    width:600px; 
} 
#mask { 
background:#072a88 url(http://flowplayer.org/tools/img/expose/mask_star_1600px.jpg) no-repeat scroll 50% -274px; 
}</style> 

<div id="test"> 
    expose test! 
</div> 

<div style="margin:0 auto;width:300px"> 
    <img src="http://flowplayer.org/tools/img/expose/ball_large.png" id="ball" style="width:130px" /> 
</div> 
<div style="position:relative;z-index:10000" > 
<button type="button" id="btn_open">open div</button> 
<button type="button" id="btn_close">close div</button> 
</div> 
<script type="text/javascript"><!-- 
$(function(){ 

    var testApi=$("#test").expose({ 
            color:'#44f', 
            opacity:0.5, 
            loadSpeed:2000, 
            closeSpeed:3000, 
            closeOnClick:false, 
            closeOnEsc:false, 
            api: true, 
            lazy:true, 
            onBeforeLoad:function(){ 
                alert("before load!"); 
            }, 
            onLoad:function(){ 
                alert("onLoad!"); 
            }, 
            onBeforeClose:function(){ 
                alert("mask-background:"+this.getMask().css("color")+",exposeId:"+this.getExposed().attr("id") 
                                    +"/n expose color:"+this.getConf().color); 
                //alert("Before close!"); 
            }, 
            onClose:function(){ 
                alert("Close!"); 
            } 

        }); 

         
    $("#test").click(function() { 
        testApi.load(); 
    }); 

    $("#btn_open").click(function(){ 
        testApi.load(); 
    }); 
    $("#btn_close").click(function(){ 
        testApi.close(); 
    }); 

    alert("test is load:"+testApi.isLoaded()); 

    $("#ball").expose({ 
        //此處通過maskId中樣式的backgroundcolor來設置color屬性 
        maskId:'mask', 
        opacity:0.5, 
        closeSpeed:'slow', 
        onBeforeLoad:function(){ 
            this.getExposed().animate({width:298}); 
        }, 
        onBeforeClose:function(){ 
            this.getExposed().animate({width:130});     
        } 

        }).click(function(){ 
        $(this).expose().load(); 
    }); 

}); 
// --></script>