jquery-slideoutpanel v1.0.35

jQuery SlideOutPanel

Simple jQuery Plugin to add a sliding out panel.

Installation

npm install --save-dev jquery-slideoutpanel

Demo

https://webdevnerdstuff.github.io/jquery-SlideOutPanel/demo.html

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

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

$('#slide-out-panel').SlideOutPanel({
    rendered() {
      // Some code...
    },
    beforeOpen() {
      // Some code...
    },
    afterOpen() {
      // Some code...
    },
    beforeClosed() {
      // Some code...
    },
    afterClosed() {
      // Some code...
    },
});

Methods

const slideOutPanel = $('#slide-out-panel').SlideOutPanel();

slideOutPanel.open();

slideOutPanel.close();

slideOutPanel.toggle();

slideOutPanel.destroy();

Sass Variables

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.