jquery tools系列 expose 学习

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

复制代码 代码如下:


<div>
    expose test!
</div>

<div>
    <img src="https://flowplayer.org/tools/img/expose/ball_large.png" />
</div>
<div>
<button type="button">open div</button>
<button type="button">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的样式来改变。如果此处没有设置,那么该插件会默认提供一个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   同配置文件中onClose属性。  
对于expose配置对象属性设置及方法调用的具体使用方法如下:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjyxdg.html