iptools-jquery-offcanvas 
Simple CSS3 animated offcanvas.
Related
legacy
- 0.0.2 documentation
Features
- Displays content inside an offcanvas from the top, right, bottom or left.
- Multiple instances at once.
- Static, instance is open on page load.
- CSS3 transitions and animations.
Options
All options are optional.
| Name | type | default value | values | description |
|---|---|---|---|---|
baseClass | string | offcanvas | valid css class string | base css class |
type | string | left | top, right, bottom, left | canvas position |
single | boolean | true | single mode, closes all other canvases | |
closeOnClickOutside | boolean | false | close canvas on click outside | |
static | boolean | false | open after initialization | |
staticCloseCondition | function | function() { return true; } | a function returning either true or false | close condition for static canvas |
Methods
| Method | Parameter | Return | Description |
|---|---|---|---|
getSettings | object | retrieve settings | |
isActive | boolean | returns if canvas is active (open) | |
toggle | boolean | not required. open (true), close (false) or toggle (leave empty) | |
destroy | destroy offcanvas |
Events
Event pattern: {eventName}.{elementId}@iptOffCanvas
| Event | Element | Description |
|---|---|---|
initialized.custom@iptOffCanvas | this.$element | Emitted when canvas is ready to use. |
opened.custom@iptOffCanvas | this.$element | Emitted when the canvas opens. |
closed.custom@iptOffCanvas | this.$element | Emitted when the canvas closes. |
Requirements
- jQuery >=1.11.3 <4
Example
<button data-offcanvas-open="custom">open</button> <button data-offcanvas-close="custom">close</button> <button data-offcanvas-toggle="custom">toggle</button> <section id="custom" class="offcanvas" style="padding:50px;background-color:rgba(0,0,0,0.5);"> <p>content</p> <button data-offcanvas-close="custom">X</button> </section> <link rel="stylesheet" href="dist/iptools-jquery-offcanvas.css" type="text/css"> <script src="dist/iptools-jquery-offcanvas.min.js"></script> <script type="text/javascript"> $(document).ready(function() { // bind $('#custom').iptOffCanvas({ baseClass: 'offcanvas', closeOnClickOutside: false, single: true, static: false, staticCloseCondition: function() { return true; }, type: 'right' }); // retrieve settings var settings = $('#custom').data(pluginName).getSettings(); // check if active (open) var isActive = $('#custom').data(pluginName).isActive(); // open, close or toggle $('#custom').data(pluginName).toggle(true); // true for open, false to close, leave empty to toggle // destroy canvas $('#custom').data(pluginName).destroy(); // example event listener $('#custom').on('opened.custom@iptOffCanvas', function() { console.log('canvas opened'); }); }); </script>Licence
Copyright © 2015-2017 Interactive Pioneers GmbH. Licenced under GPL-3.
