zoukankan      html  css  js  c++  java

  • jquery tools系列(五)——expose

    不知不觉，已经进行到了jquery tools六大功能的第五个功能——expose的学习了，废话不多说，直接进入正题。

            如overlay的学习，首先给出操作的html目标代码：

    [c-sharp] view plaincopy
    1. <div id="test">  
    2.     expose test!  
    3. </div>  
    4.   
    5. <div style="margin:0 auto;300px">  
    6.     <img src="http://flowplayer.org/tools/img/expose/ball_large.png" mce_src="http://flowplayer.org/tools/img/expose/ball_large.png" id="ball" style="130px" />   
    7. </div>  
    8. <div style="position:relative;z-index:10000" mce_style="position:relative;z-index:10000">  
    9.  <button type="button" id="btn_open">open div</button>   
    10.   <button type="button" id="btn_close">close div</button>   
    11. </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配置对象属性设置及方法调用的具体使用方法如下：

    [c-sharp] view plaincopy
    1. var testApi=$("#test").expose({  
    2.             color:'#44f',  
    3.             opacity:0.5,  
    4.             loadSpeed:2000,  
    5.             closeSpeed:3000,  
    6.             closeOnClick:false,  
    7.             closeOnEsc:false,  
    8.             api: true,  
    9.             lazy:true,  
    10.             onBeforeLoad:function(){  
    11.                 alert("before load!");  
    12.             },  
    13.             onLoad:function(){  
    14.                 alert("onLoad!");  
    15.             },  
    16.             onBeforeClose:function(){  
    17.                 alert("mask-background:"+this.getMask().css("color")+",exposeId:"+this.getExposed().attr("id")  
    18.                                     +"/n expose color:"+this.getConf().color);  
    19.                 //alert("Before close!");  
    20.             },  
    21.             onClose:function(){  
    22.                 alert("Close!");  
    23.             }  
    24.               
    25.         });  
    26.           
    27.           
    28.     $("#test").click(function() {  
    29.         testApi.load();  
    30.     });  
    31.       
    32.     $("#btn_open").click(function(){  
    33.         testApi.load();  
    34.     });  
    35.     $("#btn_close").click(function(){  
    36.         testApi.close();  
    37.     });  
    38.       
    39.     alert("test is load:"+testApi.isLoaded());  
    40.       
    41.     $("#ball").expose({  
    42.         //此处通过maskId中样式的backgroundcolor来设置color属性  
    43.         maskId:'mask',  
    44.         opacity:0.5,  
    45.         closeSpeed:'slow',  
    46.         onBeforeLoad:function(){  
    47.             this.getExposed().animate({298});  
    48.         },  
    49.         onBeforeClose:function(){  
    50.             this.getExposed().animate({130});   
    51.         }  
    52.           
    53.         }).click(function(){  
    54.         $(this).expose().load();  
    55.     });  

     最后，给出完整示例代码及该功能得部分demo图片：

    [c-sharp] view plaincopy
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
    2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    3.   
    4. <mce:script src="http://flowplayer.org/tools/js/tools/1.0.2/jquery.tools.min.js" mce_src="http://flowplayer.org/tools/js/tools/1.0.2/jquery.tools.min.js"></mce:script>  
    5. <mce:style><!--  
    6. #test {  
    7.     border:1px solid #ccc;  
    8.     background-color:#fff;  
    9.     padding:50px;  
    10.     font-size:30px;  
    11.     margin:20px auto;  
    12.     text-align:center;  
    13.     600px;  
    14. }  
    15. #mask {  
    16.      background:#072a88 url(http://flowplayer.org/tools/img/expose/mask_star_1600px.jpg) no-repeat scroll 50% -274px;  
    17.  }  
    18. --></mce:style><style mce_bogus="1">#test {  
    19.     border:1px solid #ccc;  
    20.     background-color:#fff;  
    21.     padding:50px;  
    22.     font-size:30px;  
    23.     margin:20px auto;  
    24.     text-align:center;  
    25.     600px;  
    26. }  
    27. #mask {  
    28.      background:#072a88 url(http://flowplayer.org/tools/img/expose/mask_star_1600px.jpg) no-repeat scroll 50% -274px;  
    29.  }</style>  
    30.   
    31. <div id="test">  
    32.     expose test!  
    33. </div>  
    34.   
    35. <div style="margin:0 auto;300px">  
    36.     <img src="http://flowplayer.org/tools/img/expose/ball_large.png" mce_src="http://flowplayer.org/tools/img/expose/ball_large.png" id="ball" style="130px" />   
    37. </div>  
    38. <div style="position:relative;z-index:10000" mce_style="position:relative;z-index:10000">  
    39.  <button type="button" id="btn_open">open div</button>   
    40.   <button type="button" id="btn_close">close div</button>   
    41. </div>  
    42. <mce:script type="text/javascript"><!--  
    43. $(function(){  
    44.   
    45.     var testApi=$("#test").expose({  
    46.             color:'#44f',  
    47.             opacity:0.5,  
    48.             loadSpeed:2000,  
    49.             closeSpeed:3000,  
    50.             closeOnClick:false,  
    51.             closeOnEsc:false,  
    52.             api: true,  
    53.             lazy:true,  
    54.             onBeforeLoad:function(){  
    55.                 alert("before load!");  
    56.             },  
    57.             onLoad:function(){  
    58.                 alert("onLoad!");  
    59.             },  
    60.             onBeforeClose:function(){  
    61.                 alert("mask-background:"+this.getMask().css("color")+",exposeId:"+this.getExposed().attr("id")  
    62.                                     +"/n expose color:"+this.getConf().color);  
    63.                 //alert("Before close!");  
    64.             },  
    65.             onClose:function(){  
    66.                 alert("Close!");  
    67.             }  
    68.               
    69.         });  
    70.           
    71.           
    72.     $("#test").click(function() {  
    73.         testApi.load();  
    74.     });  
    75.       
    76.     $("#btn_open").click(function(){  
    77.         testApi.load();  
    78.     });  
    79.     $("#btn_close").click(function(){  
    80.         testApi.close();  
    81.     });  
    82.       
    83.     alert("test is load:"+testApi.isLoaded());  
    84.       
    85.     $("#ball").expose({  
    86.         //此处通过maskId中样式的backgroundcolor来设置color属性  
    87.         maskId:'mask',  
    88.         opacity:0.5,  
    89.         closeSpeed:'slow',  
    90.         onBeforeLoad:function(){  
    91.             this.getExposed().animate({298});  
    92.         },  
    93.         onBeforeClose:function(){  
    94.             this.getExposed().animate({130});   
    95.         }  
    96.           
    97.         }).click(function(){  
    98.         $(this).expose().load();  
    99.     });  
    100.   
    101. });  
    102. // --></mce:script>  
  • 相关阅读:
    springboot mybatis 后台框架平台 集成代码生成器 shiro 权限
    java二维码工具类，中间带ＬＯＧＯ的，很强大
    Itween 动画插件中 的画线
    对象池的简单使用
    DoTween 动画插件简单示例
    快速排序 and 拉格朗日插值查找
    简单工厂模式
    Java集合框架学习
    幂等性学习
    实战重构工厂模式
  • 原文地址：https://www.cnblogs.com/piuba/p/2615658.html
Copyright © 2011-2022 走看看