Package Exports
- jquery-slideoutpanel
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (jquery-slideoutpanel) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
#jQuery SlideOutPanel
Simple jQuery Plugin to add a sliding out panel.
Installation
``` npm install --save-dev jquery-slideoutpanel ```
Demo
HTML
The html must be set up with the proper id and internal elements.
Allowed tags: <header> <section> <footer>
Optional tags: <header> <footer>
Required tag: <section>
<div id="slide-out-panel" class="slide-out-panel">
<header>Panel Title</header>
<section>Panel content section</section>
<footer>Panel footer</footer>
</div>Options
Name | Type | Default | Options | Description :----- | :------ | :----- | :----- | :----- bodyPush | boolean | false | true
false| Enables pushing the body when the tab opens (works with slideFrom right and left closeBtn | html | `✕`
✕ | | Add a custom close button instead of the default closeBtnSize | String | 12px | | Adjust the close button size enableEscapeKey | Boolean | false | true
false | Enables the esc key to close all panels offsetTop | String | 0 | | Offset the top of the panel screenClose | Boolean | true | true
false | Enables closing of panels by clicking on the background screen. screenOpacity | String | 0.5 | | Set the background screen's opacity screenZindex | String | 9998 | | Set the background screen's z-index showScreen | Boolean | true | true
false | Enable/Disable showing the background screen slideFrom | String | right | top
right
bottom
left | Set to choose where the panel should slide out from transition | String | ease | | Set the transition-timing-function. Accepts the standard values used with CSS. transitionDuration | String | 0.35s | | Set the duration of the transitions. Adding "s" is optional. width | String | 350px | | Set the panels width
$('#slide-out-panel').SlideOutPanel({
bodyPush: false,
closeBtn: '<i class="fas fa-times"></i>',
closeBtnSize: '',
enableEscapeKey: true,
offsetTop: '50px',
screenClose: false,
screenOpacity: '1',
screenZindex: '9998',
showScreen: false,
slideFrom: 'right',
transition: 'ease',
transitionDuration: '0.35s',
width: '350px',
});Events
Name | Description :----- | :----- rendered | Fired after the panel is finished building beforeOpen | Fired before panel opens afterOpen | Fired after panel has opened beforeClosed | Fired before panel is closed afterClosed | Fired after the panel is closed
$('#slide-out-panel').SlideOutPanel({
rendered() {
// Some code...
},
beforeOpen() {
// Some code...
},
afterOpen() {
// Some code...
},
beforeClosed() {
// Some code...
},
afterClosed() {
// Some code...
},
});Methods
Name | Description :----- | :----- open | Open's the panel close | Closes the panel toggle | Toggles the panel open/close destroy | Removes the panel from the DOM
const slideOutPanel = $('#slide-out-panel').SlideOutPanel();
slideOutPanel.open();
slideOutPanel.close();
slideOutPanel.toggle();
slideOutPanel.destroy();Sass Variables
Variable | Type | Default | Description :----- | :----- | :----- | :----- $pieces-padding | string | `15px` | Padding for the panel pieces (header, section, footer) $so-screen-sm | | `768px` | Responsive breakpoint $so-close-btn-color | | `#000` | Color of the close button $so-close-font-size | | `12px` | Font size of the close button $so-container-background | | `#fff` | The panel background color $so-container-box-shadow | | `-3px 3px 9px rgba(0, 0, 0, .3)` | The panel box shadow $so-container-transition | | `top ease, right ease, bottom ease, left ease` | $so-container-z-index | | `9999` | The panel z-index $so-content-no-header-padding-top | | `$pieces-padding * 2` | The top padding of the `