Tab 0.1.6

Minimalistic but extensible tab swapper. It can be used to create a tab swapper as well as a galerie slideshow. you can have effects like Moostack, the barack slideshow or jQuery nivoslider or whatever you want by providing an animation plugin. Demo

More demos



Details

Author
Thierry Bela
Current version
0.1.6
GitHub
tbela99/tab
Downloads
24504
Category
Interface
Tags
Report
GitHub Issues

Releases


Dependencies

  • core/1.3:
    • Class.Extras
    • Element.Event
    • Element.Style
    • Element.Dimensions
    • Fx.Morph
    • Array

How to use

It is quite simple to use. what you need first is

HTML:

<div id="slide">
<div class="ctab"><img src="images/slide1.jpg" width="400" height="300" /></div>
    <div class="ctab hidden"><img src="images/slide2.jpg" width="400" height="300" /></div>
    <div class="ctab hidden"><img src="images/slide3.jpg" width="400" height="300" /></div>
    <div class="ctab hidden"><img src="images/slide4.jpg" width="400" height="300" /></div>
  </div>

//the tabs
 <div class="tabs"><a href="#0">1</a><a href="#1">2</a><a href="#2">3</a><a href="#3">4</a></div>

Javascript:

var swapper = new Tab({

    container: 'slide',
    tabs: 'div.tabs a',
    onChange: function () {

        //do something
    }
});

Options:

  • container - (mixed) the element that contains the panels.
  • selector - (string, optional) only container children that match the selector will be grabbed.
  • animation - (string, optional) the transition plugin to use for swapping. default to None
  • params - (object, optional) parameters specific to the transition plugin.
  • fx - (object, optional) parameters for the animation. this can be any of the Fx parameters.
  • current - (int, optional) index of the panel that is displayed first. default to 0
  • tabs - (mixed, optional) when a tab is clicked, the corresponding panel is shown. anything you can pass to $$ is accepted.
  • activeClass - (string, optional) style applied to the selected tab.
  • inactiveClass - (string, optional) style applied to every unselected tab.
  • link - (string) control the way concurrent changes are handled. accepted values are chain (default), ignore, cancel

Events:

create

Fired right after the tabs has been setup.

Signature:
onCreate(newPanel, index)
Arguments:
  1. newPanel - (element) the active panel.
  2. index - (int) the index of the active panel.

change

Fired when the active panel is changed.

Signature:
onChange(newPanel, curPanel, index, current)
Arguments:
  1. newPanel - (element) the active panel.
  2. oldPanel - (element) the previously selected panel.
  3. index - (int) the index of the active panel.
  4. current - (int) index of the previously selected panel.

Method Next

display the next panel.

Returns:

  • (object) - This Tab instance.

Method Previous

display the previous panel.

Returns:

  • (object) - This Tab instance.

Tab Method Add

add a new panel to the tab.

Arguments:

  • panel - (mixed) the new panel.
  • tab - (mixed, optional) tab associated to the new panel
  • index - (int, optional) position where the new panel is injected, if not specified, the new panel will be inserted at the end

Returns:

  • (object) - This Tab instance.

Tab Method Remove

remove the panel at the given index.

Arguments:

  • index - (int)

Returns:

  • (object) - an object {panel: panel, tab: tab} containing the panel and the associated tab.

Tab Method Resize

resize the container to fit the panel offset. this is useful if you change the panel content.

Arguments:

  • index - (int, optional) index of the panel. if not specified, the current panel is used.

Returns:

  • (object) - an object {panel: panel, tab: tab} containing the panel and the associated tab.

Method Getselectedindex

Returns:

  • (int) - the index of the displayed panel

Method Setselectedindex

set the displayed panel.

Syntax:

swapper.setSelectedIndex(0);

Arguments:

  • index - (int) index of the panel to display.
  • direction - (int) indicate in which direction panels should be rotated. accepted values are -1 (right to left) and 1 (left to right).

Returns:

  • (object) - This Tab instance.

Method Issupported

return true if the given transition is supported by the browser.

Syntax:

swapper.isSupported('Flip');

Arguments:

  • transition - (string) transition name.

Returns:

  • (boolean)

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus