jQuery+slidereveal實現(xiàn)的面板滑動側邊展出效果
更新時間：2015年03月14日 16:21:33 投稿：hebedich
WEB開發(fā)中有時需要在頁面上設置一個控制面板，默認是不顯示的，當用戶有需要時可以通過按鈕觸發(fā)調(diào)用面板展示。常見的有頁面?zhèn)冗吇雒姘逍Ч?。本文將使用jQuery插件并結合實例給大家介紹一下面板滑動展示效果。
我們借助一款jQuery插件：slidereveal.js，可以使用它控制面板左右側滑出與隱藏等效果，項目地址：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">展開左側</button>
最后直接調(diào)用slidereveal.js插件，代碼如下：
復制代碼 代碼如下:
$('#slider').slideReveal({
trigger: $("#trigger")
});
選項設置
默認情況下，面板是從左側滑出，并且將主頁面內(nèi)容向右“推”，并且可以使用鍵盤的“ESC”鍵關閉面板。
| 屬性 | 描述 | 默認值 |
| width | 整型，面板寬度。 | 250 |
| push | 布爾型，設置為true，面板展開時會將頁面主體內(nèi)容“推”向一側，設置為false時，面板展開在頁面主體內(nèi)容之上。 | true |
| position | 字符串，設置面板展開滑動的方向，可以設置為"left"或"right" | "left" |
| speed | 整型，面板展開速度，單位毫秒。 | 300 |
| trigger | jQuery DOM選擇器，設置可以觸發(fā)面板展示和隱藏的頁面元素，如$("#element") | 未定義 |
| autoEscape | 布爾型，設置是否允許使用鍵盤的ESC鍵來隱藏已展開的面板。 | true |
| top | 整型，設置面板距離窗口上部的距離。 | 0 |
| show | 回調(diào)函數(shù)，當面板展開時調(diào)用。 | - |
| shown | 回調(diào)函數(shù)，當面板展開后調(diào)用。 | - |
| hide | 回調(diào)函數(shù)，當面板隱藏時調(diào)用。 | - |
| show | 回調(diào)函數(shù)，當面板隱藏后調(diào)用。 | - |
slidereveal.js插件還提供了展開與隱藏的方法調(diào)用，代碼如下：
復制代碼 代碼如下:
//展開面板
$('#slider').slideReveal("show");
//隱藏面板
$('#slider').slideReveal("hide");
以上就是本文給大家分享的全部內(nèi)容了，有需要的小伙伴快來參考下吧，希望對大家熟悉jQuery能夠有所幫助。
相關文章
html5的自定義data-*屬性和jquery的data()方法的使用示例
人們總喜歡往HTML標簽上添加自定義屬性來存儲和操作數(shù)據(jù)，這就是為什么在HTML5規(guī)范里增加了一個自定義data屬性，你可以拿它做很多有用的事情2013-08-08
這篇文章主要介紹了jquery中在頁面加載完成后執(zhí)行某個方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
重寫了昨天的圖片輪換，加入了自動切換效果，改變了布局，增強了可定制性，當然，還是有點小小的問題，在IE 6+,chrome,firfox3.68下測試正常運行2010-07-07
這次我們要實現(xiàn)的控件時Tab控件，在實際的應用中也比較多2010-05-05
今天的內(nèi)容是關于表單驗證插件的制作。表單驗證控件實現(xiàn)的主要功能是，當表單提交的時候檢查必填項是否正確填寫，同時根據(jù)需要驗證輸入信息是否符合規(guī)范2012-08-08
在第一次頁面加載時，元素A的X效果正常，點擊B之后，頁面局部刷新，此時，回到A，元素A失去X效果.后來了解了下頁面應用了ASP.NET AJAX局部刷新，這就明朗了，估計是和JQUERY沖突了2013-04-04
本文為大家介紹下jquery1.9 下如何檢測瀏覽器類型和版本，下面有個不錯的示例，大家可以參考下2013-12-12
效果類似這種，自動播放，實質(zhì)控制層的顯示隱藏。需要的朋友可以參考下。2011-12-12
jquery加載頁面的方法(頁面加載完成就執(zhí)行),建議大家看下windows.onload與$(document).ready之間的區(qū)別。2011-06-06
基于jquery實現(xiàn)表單類各種類型(文本框)失去焦點效果，代碼簡單實用，感興趣的朋友可以參考下，希望對你有所幫助2013-04-04