桃源资源网

jquery tools系列 expose 学习
网络编程 2024/11/16 佚名
3 2
如overlay的学习，首先给出操作的html目标代码：
复制代码 代码如下:
<div id="test">
    expose test!
</div>

<div style="margin:0 auto;width:300px">
    <img src="/UploadFiles/2021-04-02/ball_large.png"></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="/UploadFiles/2021-04-02/jquery.tools.min.js"><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="/UploadFiles/2021-04-02/ball_large.png"></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>
标签：
jquery,expose
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
桃源资源网 Design By www.nqtax.com

评论“jquery tools系列 expose 学习”

暂无“jquery tools系列 expose 学习”评论...
www.nqtax.com 桃源资源网
19,905影音资源
44,626技术资源
1,817软件资源
378,645站长资源

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
桃源资源网 Design By www.nqtax.com