如overlay的学习，首先给出操作的html目标代码：
复制代码 代码如下:
<div id="test">
expose test!
</div>
<div style="margin:0 auto;width:300px">
<img src="/UploadFiles/2021-04-02/ball_large.png"></div>
<div 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配置对象属性设置及方法调用的具体使用方法如下：
复制代码 代码如下:
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图片：
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="/UploadFiles/2021-04-02/jquery.tools.min.js"><style><!--
#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><style >#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="/UploadFiles/2021-04-02/ball_large.png"></div>
<div 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>
<script type="text/javascript"><!--
$(function(){
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();
});
});
// --></script>
复制代码 代码如下:
<div id="test">
expose test!
</div>
<div style="margin:0 auto;width:300px">
<img src="/UploadFiles/2021-04-02/ball_large.png"></div>
<div 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的显示。
以下代码为配置参数说明描述：
复制代码 代码如下:
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图片：
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="/UploadFiles/2021-04-02/jquery.tools.min.js"><style><!--
#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><style >#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="/UploadFiles/2021-04-02/ball_large.png"></div>
<div 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>
<script type="text/javascript"><!--
$(function(){
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();
});
});
// --></script>
标签：
jquery,expose
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
暂无“jquery tools系列 expose 学习”评论...
更新动态
2024年11月13日
2024年11月13日
- 《忆蚀》Subliminal：揭秘后室之谜，路知行献声Weplay文化展
- 那英《征服NEWXRCD台湾版》日本压制[WAV+CUE]
- 群星《金曲百分百上》3CD(香港版)[WAV+CUE]
- 刘欢《雨中的树(新歌加精选)2CD》德国HD24K金碟[WAV+CUE]
- 郑源 《世间情歌》6N纯银SQCD[WAV+CUE][1G]
- 群星《粤潮2HQII》头版限量编号[低速原抓WAV+CUE][991M]
- 群星《2023好听新歌21》十倍音质 U盘音乐[WAV分轨][1G]
- 《热血传奇》双11感恩回馈 超值狂欢30天
- 原神5.2版本活动汇总 5.2版本活动有哪些
- 张敬轩.2010-NO.ELEVEN【环球】【WAV+CUE】
- 黄丽玲.2006-失恋无罪【艾回】【WAV+CUE】
- 阿达娃.2024-Laluna【W8VES】【FLAC分轨】
- 宝可梦大集结段位等级划分表大全 大集结段位一览
- 龙腾世纪影障守护者工坊与装备如何升级 工坊与装备升级说明
- 龙腾世纪影障守护者全成就攻略分享 龙腾世纪4全成就列表一览