首頁  >  文章  >  web前端  >  jQuery slidereveal實現的面板滑動側邊展出效果_jquery

jQuery slidereveal實現的面板滑動側邊展出效果_jquery

WBOY
WBOY原創
2016-05-16 16:09:371732瀏覽

我們藉助一個jQuery外掛:slidereveal.js,可以使用它控制面板左右側滑出與隱藏等效果,專案位址:https://github.com/nnattawat/slideReveal

如何使用

首先在頁面中載入jquery庫檔案和slidereveal.js外掛程式。

複製程式碼 程式碼如下:



然後在body裡放置面板元素如div#slider,內容自定,並且放置觸發呼叫面板的元素如button或a元素。

複製程式碼 程式碼如下:


    Helloweba歡迎您!


最後直接呼叫slidereveal.js插件,程式碼如下:

複製程式碼 程式碼如下:

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

選項設定

預設情況下,面板是從左側滑出,並且將主頁面內容向右“推”,並且可以使用鍵盤的“ESC”鍵關閉面板。

屬性 描述 預設值
width 整數,面板寬度。 250
push 布林型,設為true,面板展開時會將頁面主體內容「推」向一側,設為false時,面板展開在頁面主體內容之上。 true
position 字串,設定面板展開滑動的方向,可以設定為"left"或"right" "left"
speed 整型,面板展開速度,單位毫秒。 300
trigger jQuery DOM選擇器,設定可以觸發面板顯示和隱藏的頁面元素,如$("#element") 未定義
autoEscape 布林型,設定是否允許使用鍵盤的ESC鍵來隱藏已展開的面板。 true
top 整型,設定面板距離窗口上部的距離。 0
show 回調函數,當面板展開時呼叫。 -
shown 回調函數,當面板展開後呼叫。 -
hide 回調函數,當面板隱藏時呼叫。 -
show 回調函數,當面板隱藏後呼叫。 -

slidereveal.js外掛程式也提供了展開與隱藏的方法調用,程式碼如下:

複製程式碼 程式碼如下:

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

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn