Side Panels

Side panel is on left or right side of page, and you can swipe-left-to-right or swipe-right-to-left to open it.

How to use

Add .open-panel To any link to make it a button which can open a side panel. You can add data-panel='{panel's css selector}' to spcify which panel to open, if you have more than one panel.

Add .close-panel to any link to make it a close button which can close a panel. You have not need to spcify which panel to close, because only one panel can be opened at the same time.

Use .panel-left or .panel-right to spcify left panel or right panel.

Use .panel-cover or .panel-reveal to spcify then type of panel.

Config

The panel can be opened and closed by slide gestures by default.

You can set $.config.swipePanel and $.config.swipePanelOnlyClose to enable or disable the slide gestures in init config

{% highlight html %}

Side Panel

Open left side panel

This is a side panel

{% endhighlight %}

Use JavaScript

We can also open and close Panels with JavaScript, for this we need to look at related App methods: $.openPanel(panel) and $.closePanel()

$.openPanel(panel) Open a panel.
$.closePanel():close currently opened Panel.

{% highlight html %}

Panel

Open Panel with JS

I am on the right

I cover the page

I am a Panel

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

Events

Events will triggered on .panel when open or close.

Event	Target	Description
open	Panel Element<div class="panel">	Event will be triggered when Panel starts its opening animation
opened	Panel Element<div class="panel">	Event will be triggered after Panel completes its opening animation
close	Panel Element<div class="panel">	Event will be triggered when Panel starts its closing animation
closed	Panel Element<div class="panel">	Event will be triggered after Panel completes its closing animation