jQuery & CSS3 Powered Slide-in Panel Plugin - slidePanel
File Size: | 339 KB |
---|---|
Views Total: | 19436 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

slidePanel is a jQuery plugin to create simple slide-in panels which allows you to quickly show side content like off-canvas menu, sliding sidebar, etc. Licensed under the GPL v2.
Features:
- CSS3 & RequestAnimationFrame powered animations.
- Mouse drag and drag handle support.
- Touch swipe support.
- Custom postions: top, right, bottom and left.
- Supports both static and dynamic content (AJAX).
- Content loading spinner.
- Built-in easing effects.
- Programatic API.
- Skinnable.
Basic Usage:
1. Load the required stylesheet file in the head section of the document.
<link rel="stylesheet" href="css/slidePanel.css">
2. Load jQuery library and the jQuery slidePanel plugin at the bottom of the document.
<script src="jquery.js"></script> <script src="dist/jquery-slidePanel.js"></script>
3. Create a link to display a sliding panel that loads panel content from an external file. You can pass the options to the sliding panel using data-OPTION
attributes.
<a href="ajax.html" class="demo" data-direction="top">top</a> <a href="ajax.html" class="demo" data-direction="left">left</a> <a href="ajax.html" class="demo" data-direction="right">right</a> <a href="ajax.html" class="demo" data-direction="bottom">bottom</a>
4. Initialize the plugin and done.
$('.demo').slidePanel();
5. Full plugin options.
// skin1, skin2, null skin: null, // CSS classes classes: { base: 'slidePanel', show: 'slidePanel-show', loading: 'slidePanel-loading', content: 'slidePanel-content', dragging: 'slidePanel-dragging', willClose: 'slidePanel-will-close' }, // CSS selector for close link closeSelector: null, // Custom template template: function(options) { return '<div class="' + options.classes.base + ' ' + options.classes.base + '-' + options.direction + '">' + '<div class="' + options.classes.content + '"></div>' + '</div>'; }, // Custom loading spinner loading: { appendTo: 'panel', // body, panel template: function(options) { return '<div class="' + options.classes.loading + '"></div>'; }, showCallback: function(options) { this.$el.addClass(options.classes.loading + '-show'); }, hideCallback: function(options) { this.$el.removeClass(options.classes.loading + '-show'); } }, // Content filter contentFilter: function(content) { return content; }, // Animations useCssTransforms3d: true, useCssTransforms: true, useCssTransitions: true, // Drag options dragTolerance: 90, mouseDragHandler: null, mouseDrag: true, touchDrag: true, pointerDrag: true, // top, bottom, left, right direction: 'right', // Animation speed duration: '500', // linear, ease-in, ease-out, ease-in-out easing: 'ease', // callbacks beforeLoad: $.noop, // Before loading afterLoad: $.noop, // After loading beforeShow: $.noop, // Before opening afterShow: $.noop, // After opening onChange: $.noop, // On changing beforeChange: $.noop, // Before changing beforeHide: $.noop, // Before closing afterHide: $.noop, // After closing beforeDrag: $.noop, // Before drag afterDrag: $.noop // After drag
Change log:
2017-09-11
- v0.3.5
2016-10-17
- v0.3.3
2016-09-02
- fixed
2016-08-31
- ES5 --> ES6
2015-09-22
- add object argument to contentFilter option
2015-08-10
- fix fix selectdrag issue
2015-07-13
- fix fix selectdrag issue
This awesome jQuery plugin is developed by amazingSurge. For more Advanced Usages, please check the demo page or visit the official website.