欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)冗吇雒姘逍Ч１疚膶⑹褂胘Query插件并結(jié)合實(shí)例給大家介紹一下面板滑動展示效果。

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

如何使用

首先在頁面中加載jquery庫文件和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è)滑出，并且將主頁面內(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)用，代碼如下：

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

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

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

相關(guān)文章

最新評論