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.