jquery tools系列 expose 学习(2)

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图片：

复制代码 代码如下: