jquery tools系列 expose 學(xué)習(xí)
更新時(shí)間：2009年09月06日 12:38:07 作者：
不知不覺(jué)，已經(jīng)進(jìn)行到了jquery tools六大功能的第五個(gè)功能——expose的學(xué)習(xí)了，廢話不多說(shuō)，直接進(jìn)入正題。
如overlay的學(xué)習(xí)，首先給出操作的html目標(biāo)代碼：
<div id="test">
expose test!
</div>
<div style="margin:0 auto;width:300px">
<img src="http://flowplayer.org/tools/img/expose/ball_large.png" id="ball" style="width:130px" />
</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>
該功能是通過(guò)jqueryObject.expose()方法來(lái)實(shí)現(xiàn)的，其具體實(shí)現(xiàn)方式如下：
$("jquery selector").expose({config object}) //該方法通過(guò)配置對(duì)象將來(lái)定制expose的顯示。
以下代碼為配置參數(shù)說(shuō)明描述：
對(duì)于expose配置對(duì)象屬性設(shè)置及方法調(diào)用的具體使用方法如下：
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({
//此處通過(guò)maskId中樣式的backgroundcolor來(lái)設(shè)置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="http://flowplayer.org/tools/js/tools/1.0.2/jquery.tools.min.js" ></script>
<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="http://flowplayer.org/tools/img/expose/ball_large.png" id="ball" style="width:130px" />
</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({
//此處通過(guò)maskId中樣式的backgroundcolor來(lái)設(shè)置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>
復(fù)制代碼 代碼如下:
<div id="test">
expose test!
</div>
<div style="margin:0 auto;width:300px">
<img src="http://flowplayer.org/tools/img/expose/ball_large.png" id="ball" style="width:130px" />
</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>
該功能是通過(guò)jqueryObject.expose()方法來(lái)實(shí)現(xiàn)的，其具體實(shí)現(xiàn)方式如下：
$("jquery selector").expose({config object}) //該方法通過(guò)配置對(duì)象將來(lái)定制expose的顯示。
以下代碼為配置參數(shù)說(shuō)明描述：
| 方法 | 返回值 | 詳細(xì)描述 |
| load() | API | 觸發(fā)expose(突出顯示)效果,該方法只有expose(突出顯示)被初始化后才能調(diào)用成功。 |
| close() | API | 關(guān)閉expose(突出顯示)效果。 |
| isLoaded() | boolean | 判斷當(dāng)前expose(突出顯示)是否已被觸發(fā)。 |
| getMask() | jQuery | 返回非expose(突出顯示)的jquery對(duì)象。可以通過(guò)jquery的相關(guān)方法來(lái)改變非expose(突出顯示)區(qū)域的顯示效果。 |
| getExposed() | jQuery | 返回expose(突出顯示)的jquery對(duì)象。 |
| getConf() | Object | 返回expose(突出顯示)的配置對(duì)象。 |
| onBeforeLoad(fn) | API | 同配置文件中onBeforeLoad屬性。 |
| onLoad(fn) | API | 同配置文件中onLoad屬性。 |
| onBeforeClose(fn) | API | 同配置文件中onBeforeClose屬性。 |
| onClose(fn) | API | 同配置文件中onClose屬性。 |
復(fù)制代碼 代碼如下:
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({
//此處通過(guò)maskId中樣式的backgroundcolor來(lái)設(shè)置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圖片：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="http://flowplayer.org/tools/js/tools/1.0.2/jquery.tools.min.js" ></script>
<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="http://flowplayer.org/tools/img/expose/ball_large.png" id="ball" style="width:130px" />
</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({
//此處通過(guò)maskId中樣式的backgroundcolor來(lái)設(shè)置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>
相關(guān)文章
Jquery 獲取指定標(biāo)簽的對(duì)象及屬性的設(shè)置與移除
這篇文章主要介紹了Jquery如何獲取指定標(biāo)簽的對(duì)象及屬性的設(shè)置與移除,需要的朋友可以參考下2014-05-05
jQuery使用addClass()方法給元素添加多個(gè)class樣式
這篇文章主要介紹了jQuery使用addClass()方法給元素添加多個(gè)class樣式的方法,實(shí)例分析了addClass方法的使用技巧及添加多個(gè)樣式的實(shí)現(xiàn)方法,需要的朋友可以參考下2015-03-03
jQuery使用動(dòng)態(tài)渲染表單功能完成ajax文件下載
使用ajax實(shí)現(xiàn)文件下載，方便，快捷，時(shí)尚，多么有挑戰(zhàn)的一個(gè)功能，首先獲取url和data然后把參數(shù)組裝成form的input再利用request發(fā)送請(qǐng)求，也就是動(dòng)態(tài)渲染表單，提交表單后再刪除，本例將實(shí)現(xiàn)文件下載功能，感興趣的朋友可以聊解下2013-01-01
Jquery通過(guò)Ajax方式來(lái)提交Form表單的具體實(shí)現(xiàn)
提交Form表單的方法有很多，在本文為大家介紹下Jquery通過(guò)Ajax方式是如何提交Form表單的2013-11-11
基于jQuery實(shí)現(xiàn)select下拉選擇可輸入附源碼下載
一般的select下拉框是不能輸入的，只能供大家選擇，今天小編給大家分享基于jQuery實(shí)現(xiàn)select下拉選擇可輸入附源碼下載，需要的朋友參考下2016-02-02
jQuery制作全屏寬度固定高度輪播圖(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇jQuery制作全屏寬度固定高度輪播圖(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
jquery1.4 教程一 便利的設(shè)置函數(shù)
jquery1.4已經(jīng)發(fā)布了，1.4相對(duì)于1.32的改進(jìn)還是非常巨大的，可以說(shuō)是全面性的，性能也全面超越了1.32。這一周，將一一展示jquery1.4的改進(jìn)，同時(shí)也會(huì)放出相應(yīng)的demo。2010-02-02
jQuery實(shí)現(xiàn)級(jí)聯(lián)菜單效果(仿淘寶首頁(yè)菜單動(dòng)畫(huà))
今天我們就帶大家體會(huì)一下級(jí)聯(lián)菜單的顯示，只是實(shí)現(xiàn)了簡(jiǎn)單的效果，不過(guò)大都原理是一樣的2014-04-04
這篇文章主要介紹了jquery中one()方法的用法,實(shí)例分析了one()方法的功能及使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
jquery動(dòng)態(tài)添加刪除一行數(shù)據(jù)示例
這篇文章主要介紹了jquery如何動(dòng)態(tài)添加刪除一行數(shù)據(jù),需要的朋友可以參考下2014-06-06