jQuery Pane

jQuery plugin to manage sliding and overlaid content panels. Panels take main part of window and the full size in mobile.

Usage

HTML

Default HTML structure of pane:

<div class="pane">
  <div class="pane-header">
    <button type="button" data-dismiss="pane">X</button>
    <h2 class="pane-header__title">My pane title</h2>
  </div>

  ...
</div>

Warning:

div.pane is automatically created by library.

JavaScript

Default usage:

// Init without options
PaneManager()

// Init with options
PaneManager({container: '#myContainer'})

Triggers

Links, buttons or others HTML elements can open panes, with data-toggle="pane".

Link example:

<a href="/my-page.html" data-toggle="pane">My link</a>

Button example:

<button type="button" data-toggle="pane" data-href="/my-page.html">My button</button>

Options

• container: container where .pane-wrapper will be create (default: body)
• loader: loader content for .pane-loader element whose created during ajax loading

Events

• show.pane: This event fires immediately when the pane is create
• shown.pane: This event is fired when the pane is completely visible to the user (animations included)
• hide.pane: This event fires immediately when close action is detected
• hidden.pane: This event is fired when the pane is completely hidden to the user (animations included)
• loading.content.pane: This event fires immediately when AJAX content start to loading
• loaded.content.pane: This event is fired when AJAX content is loaded
• printed.content.pane: This event is fired when text content of AJAX result is printed
• error.content.pane: This event fires immediately when AJAX error occurred

API

jQuery

A jQuery method is available to interact with pane, and only panes.

// Reload pane content
$('.pane').pane('reload');

// Load content
$('.pane').pane('load', '/path/page.html');

// Close pane
$('.pane').pane('close');

PaneManager object

Methods are available from the PaneManager object.

let paneManager = PaneManager()

// Refresh (show wrapper if at least one pane exists)
paneManager.refresh()

// Get a config value
paneManager.config(key)

// Create a new empty pane with given CSS class
paneManager.new(paneClass)

Pane object

When you create or get a pane, you can access to some methods.

let paneManager = PaneManager()
let pane = paneManager.new()

// Reload pane content
pane.reload()

// Load content
pane.load('/path/page.html')

// Close pane
pane.close()