1.0.0-beta.1 • Published 3 years ago
jquery-pane v1.0.0-beta.1
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 createshown.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 detectedhidden.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 loadingloaded.content.pane
: This event is fired when AJAX content is loadedprinted.content.pane
: This event is fired when text content of AJAX result is printederror.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()
1.0.0-beta.1
3 years ago
1.0.0-alpha.3
5 years ago
1.0.0-alpha.2
5 years ago
1.0.0-alpha.1
5 years ago
1.0.0
5 years ago