jquery tools系列 expose 学习

如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>

赞 (0)

相关推荐

  • jquery tools系列 overlay 学习第1/2页

    如scrollable的学习,首先给出操作的html目标代码: 复制代码 代码如下: <button rel="#overlay">Open overlay</button> <button rel="#overlay2">Other overlay</button> <div class="overlay" id="overlay">     <h2 styl

  • jQuery Tools tooltip使用说明

    HTML 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>jQuery Tools standalone demo</title> <!-- include the Tools --> <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

  • jQuery Tools tab(幻灯片)

    jQuery Tools tab(幻灯片)

    html 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>jQuery Tools standalone demo</title> <!-- include the Tools --> <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

  • jQuery Tools Dateinput使用介绍

    帮助文档:传送门 html 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>jQuery Tools dateinput demo</title> <!-- include the Tools --> <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></s

  • jquery tools之tooltip

    如tabs的学习,首先给出操作的html目标代码: 复制代码 代码如下: <form id="myform"> <h3> Registration Form</h3> <!-- username --> <label for="username">Username</label> <input id="username" /> <div class=&quo

  • jquery tools 系列 scrollable学习

    复制代码 代码如下: <!-- navigator --> <div class="navi"></div> <!-- prev link --> <a class="prev"></a> <!-- root element for scrollable --> <div class="scrollable"> <div id="thu

  • jquery tools 系列 scrollable（2）

    jquery tools 系列 scrollable（2）

    scrollable提供的一系列获取scrollable对象的方法具体使用方式如下: 复制代码 代码如下: var scrollable=$("div.scrollable").scrollable();     //alert(scrollable.getConf().prev);//获取配置对象中的prev属性     scrollable.getConf().speed=200;//设置配置对象的speed属性     //alert(scrollable.getIndex())

  • jquery tools之tabs 选项卡/页签

    虽然方便好用,但是个人觉得其在UI方面的表现不是太出彩,今天无意中看到jquery tools--一种基于jquery的UI表现框架,其UI功能展示风格类似(或模仿)flex.该框架提供了tabs(选项卡/页签)overlay(覆盖层),tooltip(提示框),scrollable(滚动信息栏),expose(突出显示),flahembed(视频播放嵌入)六大类功能(其官方网站自称为六大工具),这六大类功能又是每个功能都有自己的独立支持包,不相互干扰,用户完全可以跟据自己需要下载,这样就减少了

  • jQuery Tools tab使用介绍

    先给个官方例子.可以先弄出来看看效果 html 复制代码 代码如下: <!DOCTYPE html> <html> <!-- This is a jQuery Tools standalone demo. Feel free to copy/paste. http://flowplayer.org/tools/demos/ --> <head> <title>jQuery Tools standalone demo</title> &

  • jquery tools系列 expose 学习

    如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&q

  • jQuery原理系列-css选择器的简单实现

    jQuery最强大的功能在于它可以通过css选择器查找元素,它的源码中有一半是sizzle css选择器引擎的代码,在html5规范出来之后,增加了document.querySelector和document.querySelectorAll直接查找元素,如果是做移动端开发的,使用jQuery的必要性大大降低. 用js代码实现css选择器,必然是用正则表达式来识别字符串了,当然浏览器提供的原生api 效率更高,以下代码只做原理性展示,并未优先性能, 例如 1)查找id显然是用document.

随机推荐