Git Product home page Git Product logo

jquery.tabslideout.js's Introduction

jquery.tabSlideOut.js

jQuery plugin to create tabs that slide out from the window edges to show a feedback form, contact form, notepad etc.

Includes methods to programmatically interact with tabs, and events and handlers fire on open, close and bounce (bounce is used to attract attention to a tab).

Demo

Usage

To use this you need an element for the tab panel content ('panel'), and inside it an element for the tab which will stick out from the window edge and be clickable ('handle'). By default the selector for handles is '.handle'. The plugin will take care of positioning them for you.

example HTML:

<div id="my-tab"><span class="handle">Click me</span>Hello World</div>

example JavaScript (puts the tab on the right, and opens it on hover rather than click):

$('#my-tab').tabSlideOut( {'tabLocation':'right','action':'hover'} );

There are many more options which can be put inside the { } - they are described below.

Style the tab panel and handle using CSS (or inline styles if you must). Add the class ui-slideouttab-handle-rounded to handles to give them rounded outer corners. These features are shown on the demo page.

Scrollbars

To achieve a tabSlideOut with vertical scrollbars for long content, you will need to:

  1. Put the scrolling content in a div inside your tabSlideOut panel, and give your div height: 100%. (If you don't do this, the scrolling will apply to the whole panel, causing the tab handle inside it to disappear).
  2. Limit the height of your tabSlideOut using height, top, bottom, left or right CSS properties, or the otherOffset option to the plugin.

Methods

You can use some methods to programmatically interact with tabs. Methods except 'isOpen' are chainable.

$('#my-tab').tabSlideOut('isOpen'); // return true or false
$('#my-tab').tabSlideOut('open'); // opens it
$('#my-tab').tabSlideOut('close'); // closes it
$('#my-tab').tabSlideOut('toggle'); // toggles it
$('#my-tab').tabSlideOut('bounce'); // bounces the tab

You can also send JQuery events to initiate actions:

$('#my-tab').trigger('open'); // opens it
$('#my-tab').trigger('close'); // closes it
$('#my-tab').trigger('toggle'); // toggles it
$('#my-tab').trigger('bounce'); // bounces the tab

Events

Three events are defined and can be caught when tabs open and close:

$(document).on('slideouttabopen slideouttabclose slideouttabbounce',function(event){
    var $panel = $(event.target);
    var eventType = event.type;
    // your code here
});

Handlers

onOpen, onClose and onSlide handlers can be set as options, to take some action when the slide out tab opens or closes.

There are also onBeforeOpen, onBeforeClose and onBeforeSlide handlers which can cancel the sliding by returning false.

Options

You can leave out any options, and the following defaults are used:

tabLocation: 'left', // left, right, top or bottom
tabHandle: '.handle', // JQuery selector for the tab, can use any JQuery selector
action: 'click',  // action which will open the panel, e.g. 'hover'
hoverTimeout: 5000, // ms to keep tab open after no longer hovered - only if action = 'hover'
offset: '200px', // panel dist from top or left (bottom or right if offsetReverse is true)
offsetReverse: false, // if true, panel is offset from  right or bottom of window instead of left or top
otherOffset: null, // if set, panel size is also set to maintain this dist from bottom or right of view port (top or left if offsetReverse)
handleOffset: null, // e.g. '10px'. If null, detects panel border to align handle nicely on edge
handleOffsetReverse: false, // if true, handle is offset from right or bottom of panel instead of left or top
bounceDistance: '50px', // how far bounce event will move everything
bounceTimes: 4, // how many bounces when 'bounce' is called
bounceSpeed: 300, // time to animate bounces
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 somewhere outside the tab is clicked
clickScreenToCloseFilters: ['.ui-slideouttab-panel'], // if click target or parents match any of these, click won't close this tab
onOpen: function(){}, // handler called after opening
onClose: function(){}, // handler called after closing
onSlide: function(){}, // handler called after opening or closing
onBeforeOpen: function(){return true;}, // handler called before opening, return false to cancel
onBeforeClose: function(){return true;}, // handler called before closing, return false to cancel
onBeforeSlide: function(){return true;} // handler called before opening or closing, return false to cancel

Add the class ui-slideouttab-handle-rounded to a handle to give it rounded outer corners.

Classes

The following may help you locate and interact with your panels, especially if you have more than one of them.

  • All slide out panels will be given the class ui-slideouttab-panel and ui-slideouttab-EDGE, where EDGE is one of left, right, top or bottom.
  • The tab will be given the class ui-slideouttab-handle.

Licence

GPL v3.0

History

This was originally written by wpauli and hosted on Google Code.

jquery.tabslideout.js's People

Contributors

melloware avatar microneer avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

jquery.tabslideout.js's Issues

Scrollbars for Height Overflow

Has anyone figured out a way to display scrollbars on the panel div when the content overflows the height? I have been trying for hours to figure out a way to make this happen and I am out of ideas of what to try.

Thanks,
Jason

Issue with textIndent

Hey great job on this component it fit our needs exactly. However we did find 1 issue. We are NOT using an image for our tab but instead text. Your current code will not display text in the tab. See this JSFiddle below.

http://jsfiddle.net/grqxq591/4/

I have this line commented out and everything works:
//'textIndent' : '-99999px',

If you uncomment that line and re-execute it you will see the word "Feedback" no longer appears on the tab. Other than that the component works like a charm.

Push option

Really like plugin and I have looked at almost 20 trying to find a good one.

Please add a "push" option. Basically, the tab "pushes" the page contents instead of sliding over the content. Thanks.

new events

New events onBeforeOpen and onBeforeClose would be nice in case we want to cancel or do something else.

multiple usage per tabLocation

hello,

is it possible to use the tabLocation more than once in order to get serveral tabs in a row/side by side?

thanks for reply

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.