jquery-slideoutpanel

#jQuery SlideOutPanel

Simple jQuery Plugin to add a sliding out panel.

Installation

``` npm install --save-dev jquery-slideoutpanel ```

Demo

Basic

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 `

` when there is no header $so-header-background-color | | `#fff` | The header background color $so-header-border-color | | `#e5e5e5` | The header bottom border color $so-header-border-width | | `1px` | The header border width $so-content-background-color | | `#fff` | The `

` background color $so-footer-background-color | | `#fff` | The `` background color

Examples

Initialize plugin: ```javascript $('#slide-out-panel').SlideOutPanel(); ```

Changing the direction the panel slides out from:

$('#slide-out-panel').SlideOutPanel({
    slideFrom: 'top',
});

$('#slide-out-panel').SlideOutPanel({
    slideFrom: 'right',
});

$('#slide-out-panel').SlideOutPanel({
    slideFrom: 'bottom',
});

$('#slide-out-panel').SlideOutPanel({
    slideFrom: 'left',
});

Close button customization:

$('#slide-out-panel').SlideOutPanel({
    closeBtn: '<i class="fas fa-times"></i>',
    closeBtnSize: '18px',
});

Background screen customization:

$('#slide-out-panel').SlideOutPanel({
    screenClose: true,
    screenOpacity: '0.5',
    screenZindex: '9998',
    showScreen: true,
});

Dependencies

jQuery

License

Copyright (c) 2020 WebDevNerdStuff
Licensed under the MIT license.