热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

jquerytools系列expose学习

如overlay的学习,首先给出操作的html目标代码: 代码如下:     expose tes
如overlay的学习,首先给出操作的html目标代码:
代码如下:


    expose test!



    






该功能是通过jqueryObject.expose()方法来实现的,其具体实现方式如下:
$("jquery selector").expose({config object}) //该方法通过配置对象将来定制expose的显示。
以下代码为配置参数说明描述:
属性 默认值 详细描述
color 设置页面中非expose(突出显示)区域在expose(突出显示)效果显示时的背景颜色。如果此处未设置背景色,那么expose功能会提供一个默认的颜色。另外属性亦可通过maskId的CSS样式来设置。
opacity 0.8 设置页面中非expose(突出显示)区域在expose(突出显示)效果显示时的背景透明度。该处透明度的取值范围为[0,1],该处值越大,透明度越低。
loadSpeed
closeSpeed 和毫秒数值。具体示例可参见本文相关示例。
   
maskId expose(突出显示)区域对应的页面div元素id,它是一个普通的div元素,当expose(突出显示)被触发后,他会自动调整以完全的覆盖整个页面。非expose(突出显示)区域的显示效果可以通过设置该处div的样式来改变。如果此处没有设置,那么该插件会默认提供一个idexposeMaskdiv来实现非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 代码如下:

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图片:
代码如下:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



推荐阅读
author-avatar
手机用户2602930681
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有