@@ -4,23 +4,29 @@ jQuery SlideOutPanel
44
55Simple jQuery Plugin to add a sliding out panel.
66
7- #### Examples
7+
8+ ### Examples
89
910[ Basic] ( https://jsfiddle.net/WebDevNerdStuff/o9pk7tdn/ )
1011
11- #### Package Managers
12+
13+ ### Package Managers
1214
1315```
1416npm install --save-dev jquery-slideoutpanel
1517```
1618
17- ## HTML
19+
20+ ### HTML
21+
1822The html must be set up with the proper id and internal elements.
1923
20- Allowed tags: ` <header> ` ` <section> ` ` <footer> `
21- Optional tags: ` <header> ` ` <footer> `
24+ Allowed tags: ` <header> ` ` <section> ` ` <footer> `
25+
26+ Optional tags: ` <header> ` ` <footer> `
2227
2328Required tag: ` <section> `
29+
2430``` html
2531<div id =" slide-out-panel" class =" slide-out-panel" >
2632 <header >Panel Title</header >
@@ -29,23 +35,25 @@ Required tag: `<section>`
2935</div >
3036```
3137
32- ## Options
38+
39+ ### Options
3340
3441Name | Type | Default | Options | Description
3542:----- | :------ | :----- | :----- | :-----
3643bodyPush | boolean | false | true <br > false| Enables pushing the body when the tab opens (works with slideFrom right and left
3744closeBtn | html | ` ✕ ` <br > ✕ ; | | Add a custom close button instead of the default
38- closeBtnSize | String | ` 12px ` | | Adjust the close button size
45+ closeBtnSize | String | 12px | | Adjust the close button size
3946enableEscapeKey | Boolean | false | true <br > false | Enables the esc key to close all panels
40- offsetTop | String | ` 0 ` | | Offset the top of the panel
47+ offsetTop | String | 0 | | Offset the top of the panel
4148screenClose | Boolean | true | true <br > false | Enables closing of panels by clicking on the background screen.
42- screenOpacity | String | ` 0.5 ` | | Set the background screen's opacity
43- screenZindex | String | ` 9998 ` | | Set the background screen's z-index
49+ screenOpacity | String | 0.5 | | Set the background screen's opacity
50+ screenZindex | String | 9998 | | Set the background screen's z-index
4451showScreen | Boolean | true | true <br > false | Enable/Disable showing the background screen
45- slideFrom | String | ` right ` | top <br > right <br > bottom <br > left | Set to choose where the panel should slide out from
46- transition | String | ` ease ` | | Set the transition-timing-function. Accepts the standard values used with CSS.
47- transitionDuration | String | ` 0.35s ` | | Set the duration of the transitions. Adding "s" is optional.
48- width | String | ` 350px ` | | Set the panels width
52+ slideFrom | String | right | top <br > right <br > bottom <br > left | Set to choose where the panel should slide out from
53+ transition | String | ease | | Set the transition-timing-function. Accepts the standard values used with CSS.
54+ transitionDuration | String | 0.35s | | Set the duration of the transitions. Adding "s" is optional.
55+ width | String | 350px | | Set the panels width
56+
4957
5058``` javascript
5159$ (' #slide-out-panel' ).SlideOutPanel ({
@@ -65,7 +73,8 @@ $('#slide-out-panel').SlideOutPanel({
6573});
6674```
6775
68- ## Events
76+
77+ ### Events
6978
7079Name | Description
7180:----- | :-----
@@ -75,7 +84,6 @@ afterOpen | Fired after panel has opened
7584beforeClosed | Fired before panel is closed
7685afterClosed | Fired after the panel is closed
7786
78- Ex.
7987
8088``` javascript
8189$ (' #slide-out-panel' ).SlideOutPanel ({
@@ -97,7 +105,7 @@ $('#slide-out-panel').SlideOutPanel({
97105});
98106```
99107
100- ## Methods
108+ ### Methods
101109
102110Name | Description
103111:----- | :-----
@@ -106,7 +114,7 @@ close | Closes the panel
106114toggle | Toggles the panel open/close
107115destroy | Removes the panel from the DOM
108116
109- Ex.
117+
110118``` javascript
111119const slideOutPanel = $ (' #slide-out-panel' ).SlideOutPanel ();
112120
@@ -119,7 +127,8 @@ slideOutPanel.toggle();
119127slideOutPanel .destroy ();
120128```
121129
122- ## Sass Variables
130+
131+ ### Sass Variables
123132
124133Variable | Type | Default | Description
125134:----- | :----- | :----- | :-----
@@ -138,7 +147,8 @@ $so-header-border-width | | `1px` | The header border width
138147$so-content-background-color | | ` #fff ` | The ` <section> ` background color
139148$so-footer-background-color | | ` #fff ` | The ` <footer> ` background color
140149
141- ## Examples
150+
151+ ### Examples
142152
143153Initialize plugin:
144154``` javascript
@@ -182,11 +192,13 @@ $('#slide-out-panel').SlideOutPanel({
182192});
183193```
184194
185- ## Dependencies
195+
196+ ### Dependencies
186197
187198jQuery
188199
189- ## License
200+
201+ ### License
190202
191203Copyright (c) 2020 WebDevNerdStuff
192204
0 commit comments