侧栏

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

使用侧栏

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

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

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

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

配置

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

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

{% highlight html %}

侧栏

这是一个侧栏

你可以在这里放用户设置页面

关闭

这是一个侧栏

关闭

{% endhighlight %}

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

使用JS操作侧栏

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

{% highlight html %}

侧栏

我是从右边出现的

并且我是覆盖在页面上而不是推开页面

关闭

这是一个侧栏

关闭

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

事件

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

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