jQuery Plugin For Slide Out Tab Contact - tabSlideOut

jQuery Plugin For Slide Out Tab Contact - tabSlideOut

tabSlideOut is a lightweight jQuery plugin that slides out a sliding panel when clicking the tab on the web page. Good for creating a feedback widget on your web page that slides out a contact form as clicking it.

See also:

How to use it:

1. Include jQuery library and jQuery tabSlideOut on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.tabSlideOut.v1.3.js"></script>

2. Markup html structure

<div class="demo">
<a class="handle" href="http://link-for-non-js-users">Content</a>
...
</div>

3. The CSS

<style type="text/css" media="screen">
.demo {
padding: 20px;
width: 250px;
background: #f2f2f2;
border: #29216d 2px solid;
}
</style>

4. Call the plugin with options.

$('.slide-out-div').tabSlideOut({
  tabLocation: 'left', // left, right, top or bottom
  tabHandle: '.handle', // JQuery selector for the tab, can use any JQuery selector
  speed: 300, // time to animate
  action: 'click',  // action which will open the panel, e.g. 'hover'
  offset: '200px', // panel dist from top or left (bottom or right if offsetReverse is true)
  offsetReverse: false, // if true, panel is aligned with right or bottom of window
  otherOffset: null, // if set, panel size is set to maintain this dist from bottom or right (top or left if offsetReverse)
  handleOffset: null, // e.g. '10px'. If null, detects panel border to align handle nicely
  handleOffsetReverse: false, // if true, handle aligned with right or bottom of panel 
  bounceDistance: '50px', // how far bounce event will move everything
  bounceTimes: 4, // how many bounces when 'bounce' is called
  tabImage: null, // optional image to show in the tab
  tabImageHeight: null, // optional IE8 and lower only, else autodetected size
  tabImageWidth: null, // optional IE8 and lower only, else autodetected size
  onLoadSlideOut: false, // slide out after DOM load
  clickScreenToClose: true, // close tab when rest of screen clicked
  toggleButton: '.tab-opener', // not often used
  onOpen: function(){}, // handler called after opening
  onClose: function(){} // handler called after closing
});

Change log:

2018-01-02


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

  • Publication date: 02.01.2018
  • Source