亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

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

如何使用

首先在頁(yè)面中加載jquery庫(kù)文件和slidereveal.js插件。

復(fù)制代碼 代碼如下:

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

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

復(fù)制代碼 代碼如下:

<div id="slider" class="slider">
    Helloweba歡迎您！
</div>
<button id="trigger" class="trigger">展開左側(cè)</button>

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

復(fù)制代碼 代碼如下:

$('#slider').slideReveal({
  trigger: $("#trigger")
});

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

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

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

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

復(fù)制代碼 代碼如下:

//展開面板
$('#slider').slideReveal("show");
//隱藏面板
$('#slider').slideReveal("hide");

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

相關(guān)文章

最新評(píng)論