如overlay的学习,首先给出操作的html目标代码:
expose test!
open div close div
该功能是通过jqueryObject.expose()方法来实现的,其具体实现方式如下:
$("jquery selector").expose({config object}) //该方法通过配置对象将来定制expose的显示。
以下代码为配置参数说明描述:
属性
默认值
详细描述
color
'#456'
设置页面中非 e xpose(突出显示)区域在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图片:
BR>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
expose test!
open div close div
Kenyataan: Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn