Question

可以从左侧或者右侧滑出的面板。

使用侧栏

在任何元素上增加 .open-panel 类都可以使它能点击打开侧栏。如果有多个侧栏，你可以通过 data-panel='{panel的选择}'来指定具体打开哪一个侧栏

在任何元素上增加 .close-panel 类都可以使他点击关闭侧栏，因为侧栏只能同时打开一个，所以关闭的时候你不用指定是哪一个侧栏。

可以通过 .panel-left 或者 .panel-right 来指定侧栏是从左边还是右边出现。

可以通过 .panel-cover 或者 .panel-reveal 指定侧栏是覆盖在页面上还是推开页面。

配置

默认配置下，侧栏可以通过滑动手势打开，但是不能通过滑动手势关闭。

你可以通过 $.config.swipePanel， $.config.swipePanelOnlyClose等参数来配置。具体配置请参见 初始化参数

<div class="page">
  <header class="bar bar-nav">
    <h1 class='title'>侧栏</h1>
  </header>
  <div class="content">
    <div class="content-block">
      <p><a href="#" class="button button-fill open-panel" data-panel='#panel-left-demo'>打开左侧栏</a></p>
    </div>
  </div>
</div>
<div class="panel-overlay"></div>
<!-- Left Panel with Reveal effect -->
<div class="panel panel-left panel-reveal theme-dark" id='panel-left-demo'>
  <div class="content-block">
    <p>这是一个侧栏</p>
    <p>你可以在这里放用户设置页面</p>
    <p><a href="#" class="close-panel">关闭</a></p>
  </div>
  <div class="list-block">
    <!-- .... -->
  </div>
</div>
<div class="panel panel-right panel-reveal">
  <div class="content-block">
    <p>这是一个侧栏</p>
    <!-- Click on link with "close-panel" class will close panel -->
    <p><a href="#" class="close-panel">关闭</a></p>
  </div>
</div>

使用侧栏的时候请注意，务必用 .page 容器把 .bar 和 .content 包裹起来。

使用JS操作侧栏

除了使用 .open-panel 和 .close-panel之外。你可以直接调用 $.openPanel(panel) 和 $.closePanel() 来打开和关闭侧栏

• $.openPanel(panel): 打开一个指定的panel, 其中 panel 是你需要打开的panel，可以是选择器或者DOM或者Zepto对象。如果没有传panel参数则会自动打开第一个panel。返回bool值表示是否打开成功。
• $.closePanel(): 关闭打开的panel。返回bool值表示是否关闭成功。

<div class="page">
  <header class="bar bar-nav">
    <h1 class='title'>侧栏</h1>
  </header>
  <div class="content">
    <div class="content-block">
      <p><a href="#" class="button button-fill my-btn">JS打开侧栏</a></p>
    </div>
  </div>
</div>
<div class="panel-overlay"></div>
<!-- Left Panel with Reveal effect -->
<div class="panel panel-right panel-cover theme-dark" id='panel-js-demo'>
  <div class="content-block">
    <p>我是从右边出现的</p>
    <p>并且我是覆盖在页面上而不是推开页面</p>
    <p></p>
    <!-- Click on link with "close-panel" class will close panel -->
    <p><a href="#" class="close-panel">关闭</a></p>
  </div>
</div>
<div class="panel panel-right panel-reveal">
  <div class="content-block">
    <p>这是一个侧栏</p>
    <!-- Click on link with "close-panel" class will close panel -->
    <p><a href="#" class="close-panel">关闭</a></p>
  </div>
</div>

$(document).on("click", ".my-btn", function() {
  $.openPanel("#panel-js-demo");
});

事件

侧栏打开或者关闭的时候，会在 .panel 上触发对应的事件。

事件	说明
open	打开动画开始之前触发。
opened	打开动画结束之后 触发。
close	关闭动画开始之前触发。
closed	关闭动画结束之后 触发。