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