jquery tools系列(五)——expose-CSDN博客

本文链接：https://blog.csdn.net/gaoyusi4964238/article/details/4523901

不知不觉，已经进行到了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" mce_src="http://flowplayer.org/tools/img/expose/ball_large.png" id="ball" style="width:130px" /> </div> <div style="position:relative;z-index:10000" mce_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配置对象属性设置及方法调用的具体使用方法如下：

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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> <mce:style></mce:style><style mce_bogus="1">#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" mce_src="http://flowplayer.org/tools/img/expose/ball_large.png" id="ball" style="width:130px" /> </div> <div style="position:relative;z-index:10000" mce_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> <mce:script type="text/javascript"></mce:script>