快捷導(dǎo)航

jQuery+slidereveal實(shí)現(xiàn)的面板滑動側(cè)邊展出效果

更新時間：2015年03月14日 16:21:33 投稿：hebedich

WEB開發(fā)中有時需要在頁面上設(shè)置一個控制面板，默認(rèn)是不顯示的，當(dāng)用戶有需要時可以通過按鈕觸發(fā)調(diào)用面板展示。常見的有頁面?zhèn)冗吇雒姘逍Ч?。本文將使用jQuery插件并結(jié)合實(shí)例給大家介紹一下面板滑動展示效果。

我們借助一款jQuery插件：slidereveal.js，可以使用它控制面板左右側(cè)滑出與隱藏等效果，項(xiàng)目地址：https://github.com/nnattawat/slideReveal。

如何使用

首先在頁面中加載jquery庫文件和slidereveal.js插件。

<script src="jquery.js"></script> 

<script src="jquery.slidereveal.min.js"></script> 

然后在body里放置面板元素如div#slider，內(nèi)容自定，并且放置觸發(fā)調(diào)用面板的元素如button或者a元素。

<div id="slider" class="slider"> 

    Helloweba歡迎您！ 

</div> 

<button id="trigger" class="trigger">展開左側(cè)</button>

最后直接調(diào)用slidereveal.js插件，代碼如下：

$('#slider').slideReveal({ 

  trigger: $("#trigger") 

}); 

選項(xiàng)設(shè)置

默認(rèn)情況下，面板是從左側(cè)滑出，并且將主頁面內(nèi)容向右“推”，并且可以使用鍵盤的“ESC”鍵關(guān)閉面板。

屬性	描述	默認(rèn)值
width	整型，面板寬度。	250
push	布爾型，設(shè)置為true，面板展開時會將頁面主體內(nèi)容“推”向一側(cè)，設(shè)置為false時，面板展開在頁面主體內(nèi)容之上。	true
position	字符串，設(shè)置面板展開滑動的方向，可以設(shè)置為"left"或"right"	"left"
speed	整型，面板展開速度，單位毫秒。	300
trigger	jQuery DOM選擇器，設(shè)置可以觸發(fā)面板展示和隱藏的頁面元素，如$("#element")	未定義
autoEscape	布爾型，設(shè)置是否允許使用鍵盤的ESC鍵來隱藏已展開的面板。	true
top	整型，設(shè)置面板距離窗口上部的距離。	0
show	回調(diào)函數(shù)，當(dāng)面板展開時調(diào)用。	-
shown	回調(diào)函數(shù)，當(dāng)面板展開后調(diào)用。	-
hide	回調(diào)函數(shù)，當(dāng)面板隱藏時調(diào)用。	-
show	回調(diào)函數(shù)，當(dāng)面板隱藏后調(diào)用。	-

slidereveal.js插件還提供了展開與隱藏的方法調(diào)用，代碼如下：

//展開面板 

$('#slider').slideReveal("show"); 

//隱藏面板 

$('#slider').slideReveal("hide");

以上就是本文給大家分享的全部內(nèi)容了，有需要的小伙伴快來參考下吧，希望對大家熟悉jQuery能夠有所幫助。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线