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;width: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="width: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({width:298});  
  48.         },  
  49.         onBeforeClose:function(){  
  50.             this.getExposed().animate({width: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.     width: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.     width: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;width: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="width: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({width:298});  
  92.         },  
  93.         onBeforeClose:function(){  
  94.             this.getExposed().animate({width:130});   
  95.         }  
  96.           
  97.         }).click(function(){  
  98.         $(this).expose().load();  
  99.     });  
  100.   
  101. });  
  102. // --></mce:script>  

 

 

 

 

 

 

 

posted @ 2012-07-30 17:39  piuba  阅读(324)  评论(0)  编辑  收藏  举报