jquery-slideoutpanel

jQuery SlideOutPanel

Simple jQuery Plugin to add a sliding out panel.

Installation

npm install --save-dev jquery-slideoutpanel

Demo

Basic

Usage

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
breakpoint	String	768px		Sets the breakpoint (matches the breakpoint in SCSS/CSS). This is used when bodyPush is true
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	Opens 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 <section> 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 <section> background color
$so-footer-background-color		#fff	The <footer> background color

Examples

Initialize plugin:

$('#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

Change Log

CHANGELOG

License

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