This time I will share jQuery Plugin and tutorial about Simple jQuery Plugin For Floating Dock Panels – smarti.dock.js, hope it will help you in programming stack.
smarti.dock.js is a simple jQuery plugin to creating floating dock panels that slide in / out to quickly show or hide side content when toggled. Ideal for off-canvas navigation, slide-in contact form or floating social share panel.
Features:
- Dead simple to use.
- Configs can be passed via HTML5 data attributes.
- Allows to store docked state in localStorage or sessionStorage.
How to use it:
1. Add a dock panel together with toggle handles to your webpage like this:
03 |
data-dock-position="left" |
04 |
data-dock-offset="20"> |
05 |
<div data-dock="true"> |
08 |
<div data-handle="true">«</div> |
09 |
<div data-handle="hidden">»</div> |
10 |
<div data-content="true"> |
11 |
Main content goes here |
2. Load the jQuery smarti.dock.js plugin after jQuery library and done.
1 |
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> |
2 |
<script src="src/smarti.dock.js"></script> |
3. All HTML5 data attributes.
data-name: Name of js instancedata-smarti="dock": Type of js instancedata-dock-position: top | right | bottom | leftdata-docked: true or false. Defines if dock panel is docked on first loaddata-dock-offset: visible part of dock panel in pixels when hiddendata-fixed-content: If set true then content will not be resized and dock panel become a slide paneldata-use-storage=: session or local. Defines where to store docked state: sessionStorage or localStorage
Change log:
2017-11-06
2016-09-15
This awesome jQuery plugin is developed by onitecsoft. For more Advanced Usages, please check the demo page or visit the official website.
