|
|
復制代碼 代碼如下:
<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>
該功能是通過jqueryObject.expose()方法來實現(xiàn)的，其具體實現(xiàn)方式如下：
$("jquery selector").expose({config object}) //該方法通過配置對象將來定制expose的顯示。
以下代碼為配置參數(shù)說明描述：
| 屬性 | 默認值 | 詳細描述 |
| color | '#456' | 設置頁面中非expose(突出顯示)區(qū)域在expose（突出顯示）效果顯示時的背景顏色。如果此處未設置背景色，那么expose功能會提供一個默認的顏色。另外屬性亦可通過maskId的CSS樣式來設置。 |
| opacity | 0.8 | 設置頁面中非expose(突出顯示)區(qū)域在expose（突出顯示）效果顯示時的背景透明度。該處透明度的取值范圍為[0,1]，該處值越大，透明度越低。 |
| loadSpeed | 'slow' | 設置頁面中非expose(突出顯示)區(qū)域在expose（突出顯示）效果觸發(fā)時的顯示速度。該處值可設置為：'slow','normal','fast'和毫秒數(shù)值。例如：如果此處設置值為2000，那么非expose(突出顯示)區(qū)域效果將會在2秒鐘中內(nèi)顯示完成。如果此處設置值為0，那么非expose(突出顯示)區(qū)域將會沒有動畫效果并立即顯示出來。 |
| closeSpeed | 'fast' | 設置頁面中非expose(突出顯示)區(qū)域在expose（突出顯示）效果關閉時的關閉速度。該處值可設置為：'slow','normal','fast'和毫秒數(shù)值。具體示例可參見本文相關示例。 |
| maskId | 'exposeMask' | 非expose（突出顯示）區(qū)域對應的頁面div元素id，它是一個普通的div元素，當expose(突出顯示)被觸發(fā)后，他會自動調(diào)整以完全的覆蓋整個頁面。非expose(突出顯示)區(qū)域的顯示效果可以通過設置該處div的樣式來改變。如果此處沒有設置，那么該插件會默認提供一個id為exposeMask的div來實現(xiàn)非expose區(qū)域。 |
| closeOnClick | TRUE | 該屬性用于設置非expose區(qū)域被點擊時，是否關閉expose(突出顯示)效果。該屬性默認值為true，及非expose區(qū)域被點擊后，expose效果被關閉。 |
| closeOnEsc | TRUE | 該屬性用于設置Esc鍵被按下后，是否關閉expose(突出顯示)效果。該屬性默認值為true，及Esc鍵被按下后，expose效果被關閉。 |
| zIndex | 9998 | 設置頁面設置頁面中非expose(突出顯示)區(qū)域的z-index（CSS）屬性。一般情況下，默認的zIndex屬性值都非常大，所以這里不需要設置，但是，有一點需要注意的是，該非expose（突出顯示）的z-index屬性值一定要大于頁面中任何一個元素的z-index屬性。 |
| api | FALSE | 該屬性解釋可參見本系列中tabs,scollable等功能同屬性的解釋。 |
| onBeforeLoad | expose（突出顯示）效果觸發(fā)前調(diào)用函數(shù)。如果該函數(shù)返回false，那么expose(突出效果)將會被阻止實現(xiàn)。 | |
| onLoad | expose（突出顯示）效果實現(xiàn)后,該函數(shù)被觸發(fā)。 | |
| onBeforeClose | expose（突出顯示）效果關閉前調(diào)用函數(shù)。如果該函數(shù)返回false，那么expose(突出效果)將會被阻止關閉。 | |
| onClose | expose（突出顯示）效果關閉后,該函數(shù)被觸發(fā)。 | |
| 方法 | 返回值 | 詳細描述 |
| load() | API | 觸發(fā)expose(突出顯示)效果,該方法只有expose(突出顯示)被初始化后才能調(diào)用成功。 |
| close() | API | 關閉expose(突出顯示)效果。 |
| isLoaded() | boolean | 判斷當前expose(突出顯示)是否已被觸發(fā)。 |
| getMask() | jQuery | 返回非expose(突出顯示)的jquery對象。可以通過jquery的相關方法來改變非expose(突出顯示)區(qū)域的顯示效果。 |
| getExposed() | jQuery | 返回expose(突出顯示)的jquery對象。 |
| getConf() | Object | 返回expose(突出顯示)的配置對象。 |
| onBeforeLoad(fn) | API | 同配置文件中onBeforeLoad屬性。 |
| onLoad(fn) | API | 同配置文件中onLoad屬性。 |
| onBeforeClose(fn) | API | 同配置文件中onBeforeClose屬性。 |
| onClose(fn) | API | 同配置文件中onClose屬性。 |
復制代碼 代碼如下:
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="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({
//此處通過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>
JavaScript技術：jquery tools系列 expose 學習，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
