Skip to content
This repository was archived by the owner on Apr 16, 2023. It is now read-only.

Commit 3210a0b

Browse files
[DEV] Updating docs and little stuff
1 parent b4b716a commit 3210a0b

2 files changed

Lines changed: 47 additions & 25 deletions

File tree

README.md

Lines changed: 34 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,29 @@ jQuery SlideOutPanel
44

55
Simple 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
```
1416
npm install --save-dev jquery-slideoutpanel
1517
```
1618

17-
## HTML
19+
20+
### HTML
21+
1822
The 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

2328
Required 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

3441
Name | Type | Default | Options | Description
3542
:----- | :------ | :----- | :----- | :-----
3643
bodyPush | boolean | false | true <br> false| Enables pushing the body when the tab opens (works with slideFrom right and left
3744
closeBtn | html | `&#10005;` <br> &#10005; | | 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
3946
enableEscapeKey | 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
4148
screenClose | 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
4451
showScreen | 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

7079
Name | Description
7180
:----- | :-----
@@ -75,7 +84,6 @@ afterOpen | Fired after panel has opened
7584
beforeClosed | Fired before panel is closed
7685
afterClosed | 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

102110
Name | Description
103111
:----- | :-----
@@ -106,7 +114,7 @@ close | Closes the panel
106114
toggle | Toggles the panel open/close
107115
destroy | Removes the panel from the DOM
108116

109-
Ex.
117+
110118
```javascript
111119
const slideOutPanel = $('#slide-out-panel').SlideOutPanel();
112120

@@ -119,7 +127,8 @@ slideOutPanel.toggle();
119127
slideOutPanel.destroy();
120128
```
121129

122-
## Sass Variables
130+
131+
### Sass Variables
123132

124133
Variable | 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

143153
Initialize plugin:
144154
```javascript
@@ -182,11 +192,13 @@ $('#slide-out-panel').SlideOutPanel({
182192
});
183193
```
184194

185-
## Dependencies
195+
196+
### Dependencies
186197

187198
jQuery
188199

189-
## License
200+
201+
### License
190202

191203
Copyright (c) 2020 WebDevNerdStuff
192204

package.json

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{
22
"name": "jquery-slideoutpanel",
3-
"version": "1.0.1",
4-
"description": "jQuery SlideOutPanel",
3+
"version": "1.0.3",
4+
"description": "jQuery SlideOutPanel is a jQuery Plugin to add a sliding out panel.",
55
"main": "Gruntfile.js",
66
"scripts": {
77
"test": "echo \"Error: no test specified\" && exit 1"
88
},
9-
"author": "WebDevNerdStuff & Bunnies... lots and lots of bunnies!",
9+
"author": "WebDevNerdStuff & Bunnies... lots and lots of bunnies! (https://webdevnerdstuff.com)",
1010
"licenses": [
1111
{
1212
"type": "MIT",
@@ -21,6 +21,16 @@
2121
"url": "https://github.com/webdevnerdstuff/jquery-SlideOutPanel/issues"
2222
},
2323
"homepage": "https://github.com/webdevnerdstuff/jquery-SlideOutPanel#readme",
24+
"keywords": [
25+
"slideOutPanel",
26+
"slide-out-panel",
27+
"slide out panel",
28+
"slide_out_panel",
29+
"slide",
30+
"out",
31+
"panel",
32+
"jQuery"
33+
],
2434
"devDependencies": {
2535
"@babel/core": "^7.8.6",
2636
"@babel/preset-env": "^7.8.6",

0 commit comments

Comments
 (0)