欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery tools系列 expose 學(xué)習(xí)

 更新時(shí)間：2009年09月06日 12:38:07   作者：  
不知不覺，已經(jīng)進(jìn)行到了jquery tools六大功能的第五個(gè)功能——expose的學(xué)習(xí)了，廢話不多說，直接進(jìn)入正題。
如overlay的學(xué)習(xí)，首先給出操作的html目標(biāo)代碼：
復(fù)制代碼 代碼如下:

<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()方法來實(shí)現(xiàn)的，其具體實(shí)現(xiàn)方式如下：
$("jquery selector").expose({config object}) //該方法通過配置對象將來定制expose的顯示。
以下代碼為配置參數(shù)說明描述：
屬性 默認(rèn)值 詳細(xì)描述
color '#456' 設(shè)置頁面中非expose(突出顯示)區(qū)域在expose（突出顯示）效果顯示時(shí)的背景顏色。如果此處未設(shè)置背景色，那么expose功能會(huì)提供一個(gè)默認(rèn)的顏色。另外屬性亦可通過maskId的CSS樣式來設(shè)置。
opacity 0.8 設(shè)置頁面中非expose(突出顯示)區(qū)域在expose（突出顯示）效果顯示時(shí)的背景透明度。該處透明度的取值范圍為[0,1]，該處值越大，透明度越低。
loadSpeed 'slow' 設(shè)置頁面中非expose(突出顯示)區(qū)域在expose（突出顯示）效果觸發(fā)時(shí)的顯示速度。該處值可設(shè)置為：'slow','normal','fast'和毫秒數(shù)值。例如：如果此處設(shè)置值為2000，那么非expose(突出顯示)區(qū)域效果將會(huì)在2秒鐘中內(nèi)顯示完成。如果此處設(shè)置值為0，那么非expose(突出顯示)區(qū)域?qū)?huì)沒有動(dòng)畫效果并立即顯示出來。
closeSpeed 'fast' 設(shè)置頁面中非expose(突出顯示)區(qū)域在expose（突出顯示）效果關(guān)閉時(shí)的關(guān)閉速度。該處值可設(shè)置為：'slow','normal','fast'和毫秒數(shù)值。具體示例可參見本文相關(guān)示例。
　 　
maskId 'exposeMask' 非expose（突出顯示）區(qū)域?qū)?yīng)的頁面div元素id，它是一個(gè)普通的div元素，當(dāng)expose(突出顯示)被觸發(fā)后，他會(huì)自動(dòng)調(diào)整以完全的覆蓋整個(gè)頁面。非expose(突出顯示)區(qū)域的顯示效果可以通過設(shè)置該處div的樣式來改變。如果此處沒有設(shè)置，那么該插件會(huì)默認(rèn)提供一個(gè)id為exposeMask的div來實(shí)現(xiàn)非expose區(qū)域。
closeOnClick TRUE 該屬性用于設(shè)置非expose區(qū)域被點(diǎn)擊時(shí)，是否關(guān)閉expose(突出顯示)效果。該屬性默認(rèn)值為true，及非expose區(qū)域被點(diǎn)擊后，expose效果被關(guān)閉。
closeOnEsc TRUE 該屬性用于設(shè)置Esc鍵被按下后，是否關(guān)閉expose(突出顯示)效果。該屬性默認(rèn)值為true，及Esc鍵被按下后，expose效果被關(guān)閉。
zIndex 9998 設(shè)置頁面設(shè)置頁面中非expose(突出顯示)區(qū)域的z-index（CSS）屬性。一般情況下，默認(rèn)的zIndex屬性值都非常大，所以這里不需要設(shè)置，但是，有一點(diǎn)需要注意的是，該非expose（突出顯示）的z-index屬性值一定要大于頁面中任何一個(gè)元素的z-index屬性。
api FALSE 該屬性解釋可參見本系列中tabs,scollable等功能同屬性的解釋。
　 　
onBeforeLoad 　 expose（突出顯示）效果觸發(fā)前調(diào)用函數(shù)。如果該函數(shù)返回false，那么expose(突出效果)將會(huì)被阻止實(shí)現(xiàn)。
onLoad 　 expose（突出顯示）效果實(shí)現(xiàn)后,該函數(shù)被觸發(fā)。
onBeforeClose 　 expose（突出顯示）效果關(guān)閉前調(diào)用函數(shù)。如果該函數(shù)返回false，那么expose(突出效果)將會(huì)被阻止關(guān)閉。
onClose 　 expose（突出顯示）效果關(guān)閉后,該函數(shù)被觸發(fā)。
此外，expose還提供了一系列獲取expose對象的方法，這些方法的說明描述如下：
方法 返回值 詳細(xì)描述
load() API 觸發(fā)expose(突出顯示)效果,該方法只有expose(突出顯示)被初始化后才能調(diào)用成功。
close() API 關(guān)閉expose(突出顯示)效果。
isLoaded() boolean 判斷當(dāng)前expose(突出顯示)是否已被觸發(fā)。
getMask() jQuery 返回非expose(突出顯示)的jquery對象?？梢酝ㄟ^jquery的相關(guān)方法來改變非expose(突出顯示)區(qū)域的顯示效果。
getExposed() jQuery 返回expose(突出顯示)的jquery對象。
getConf() Object 返回expose(突出顯示)的配置對象。
　 　
onBeforeLoad(fn) API 同配置文件中onBeforeLoad屬性。
onLoad(fn) API 同配置文件中onLoad屬性。
onBeforeClose(fn) API 同配置文件中onBeforeClose屬性。
onClose(fn) API 同配置文件中onClose屬性。
對于expose配置對象屬性設(shè)置及方法調(diào)用的具體使用方法如下：
復(fù)制代碼 代碼如下:

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來設(shè)置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圖片：
復(fù)制代碼 代碼如下:

<!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來設(shè)置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>

相關(guān)文章

最新評論