Simple jQuery Plugin For Floating Dock Panels - smarti.dock.js

Simple jQuery Plugin For Floating Dock Panels - smarti.dock.js
File Size: 2.92 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

<div data-name="dock" 
     data-smarti="dock" 
     data-dock-position="left"
     data-dock-offset="20">
  <div data-dock="true">
    Dock panel
  </div>
  <div data-handle="true">&laquo;</div>
  <div data-handle="hidden">&raquo;</div>
  <div data-content="true">
    Main content goes here
  </div>
</div>

2. Load the jQuery smarti.dock.js plugin after jQuery library and done.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="src/smarti.dock.js"></script>

3. All HTML5 data attributes.

  • data-name: Name of js instance
  • data-smarti="dock": Type of js instance
  • data-dock-position: top | right | bottom | left
  • data-docked: true or false. Defines if dock panel is docked on first load
  • data-dock-offset: visible part of dock panel in pixels when hidden
  • data-fixed-content: If set true then content will not be resized and dock panel become a slide panel
  • data-use-storage=: session or local. Defines where to store docked state: sessionStorage or localStorage

Change log:

2017-11-06

2016-09-15

  • JS update

This awesome jQuery plugin is developed by onitecsoft. For more Advanced Usages, please check the demo page or visit the official website.