Tabs

Right Tabs is the standard tabs engine for the RightJS UI project. It provides an easy way of creating usual tabs, and also carousel and harmonica widgets, joining them under a single unified engine.

Get the latest version right here

All the source code of the project is available under terms of the MIT license

http://github.com/rightjs/rightjs-ui/tree/master/src/tabs/

For some standard usage examples see the demo page

Index

top ↑Features List

Right Tabs are served with the following features:

  • An uniformed three in one (tabs, carousel, harmonica) package
  • Everything is included in a single tiny (~5k gzipped) file
  • Pure CSS design, and no image dependencies
  • Simple and easy usage
  • Remote content loading via ajax
  • An interface to create/move/remote tabs programmatically
  • Restoring the tabs state by an URL anchor and/or cookies
  • Semantically friendly and jQuery Tabs compatible markup

top ↑Usage Basics

The usage is simple as usual. Include one of those files onto your page and then prepare your tabs element as the following structure.

<ul>
<ul>
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
</ul>

<li id="tab-1">Tab 1 Content</li>
<li id="tab-2">Tab 2 Content</li>
</ul>

You also can use the jQuery’s original structure with DIVs

<div>
<ul>
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
</ul>

<div id="tab-1">Tab 1 Content</div>
<div id="tab-2">Tab 2 Content</div>
</div>

After that you’ll need to instantiate the tabs object, with a simple javascript code

<ul id="my-tabs">
//...
new Tabs('my-tabs');

Or as a variant you can assign the rui-tabs css class for your tabs element and our script will automatically find and instantiate it when the page’s loaded

<ul class="rui-tabs">
// ...
</ul>

The HTML5 style options attribute is available too

<ul class="rui-tabs" data-tabs="{select:2}">
// ...
</ul>

top ↑Variants Definition

To create a carousel widget simply add the rui-tabs-carousel css-class to your tabs element and the engine will know that you want a carousel.

<ul id="my-carousel" class="rui-tabs-carousel">
// ...
</ul>

For the harmonica widget use the standard DL/DT/DD tags construction.

<dl>
<dt><a href="#">Tab 1</a></dt>
<dd>Tab 1 Content</dd>
<dt><a href="#">Tab 2</a></dt>
<dd>Tab 2 Content</dd>
</dl>

All the other features like remote tabs loading, options and events are common over all three types of the tabs and can be used with any of them

top ↑Remote Tabs

To make the engine load your tabs content via Xhr requests, just specify the url-addresses instead of the anchor hashes and you’re good to go. And in this case you don’t need to specify any panels, they will be generated on fly.

<ul>
<ul>
<li><a href="content/tab-1.html">Tab 1</a></li>
<li><a href="content/tab-2.html">Tab 2</a></li>
</ul>
</ul>

There is also a mixed approach available. You can use your tabs with hash names and then specify a common url-address with an %{id} placeholder as an option, like this

<ul id="my-tabs">
<ul>
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
</ul>
</ul>
// ...
new Tabs('my-tabs', {url: '/content/%{id}.html'});

In this case the script will use the tab hash names as the ids and hit urls like this

/content/tab-1.html
/content/tab-2.html

top ↑Current Tab Definition

There are several ways how you can specify the tab that the user will see by default.

First of all you can specify the rui-tabs-current css-class on your current tab.

<ul id="my-tabs">
<ul>
<li><a href="#tab-1">Tab 1</a></li>
<li class="rui-tabs-current"><a href="#tab-2">Tab 2</a></li>
</ul>
</ul>

You also can use the selected option with the constructor or the custom data-tabs attribute. Then you can activate the Cookie option and the script will keep the current tab index in cookies

And eventually the engine watches the url-address hash and if there is one it will check it against the available tab hash names. Once a match is found it will automatically activate the tab. This way you can refer a specific tab via an url-address.

The priority of the current tab checks is the following

URL -> Cookie -> CSS Class -> First

top ↑Options List

There is the following list of supported options for the tabs engine

NameDefaultDescription
idPrefixthe tab-panel elements id prefix
tabsElementnullthe tabs list element reference, in case it is somewhere else
resizeFx‘both’‘slide’, ‘fade’, ‘both’ or null for no fx
resizeDuration400the tab panels resize fx duration
scrollTabsfalseuse the tabs list scrolling
scrollDuration400the tabs scrolling fx duration
selectednullan index of a tab to open
disabled[]list of disabled tab indexes
closablefalseset true if you want a close icon on your tabs
loopfalseyou can specify a delay in milliseconds in here to have a slideshow
loopPausetruemakes the slideshow get paused when the user moves the mouse over it
urlfalsea common remote tabs url, should have the %{id} placeholder
cachefalsemarker if the remote tabs should be cached
Xhrnullthe Xhr requests additional options
Cookienullset the Cookie options if you’d like to keep the last selected tab index in cookies

You can send any of those options as the constructor options, like this

new Tabs('my-tabs', {
idPrefix: 'my-',
selected: 2,
Xhr: {spinner: 'spinner'}
});

Or you can use the HTML5 like attribute called data-tabs directly on your tabs element

<ul data-tabs="{idPrefix:'my-', selected:4}">
// ...
</ul>

top ↑Events List

This script provides you an access to the following events

NameDescription
selectwhen a tab was selected
hidewhen a tab gets hidden
loadwhen a remote tab is loaded
disablewhen a tab gets disabled
enablewhen a tab gets enabled
addwhen a new tabs was added
removewhen a tab was removed
movewhen a tab was moved to a new position

Every event listener will receive a tab object instance as an argument.

top ↑API Reference

There is a simple public API for all the Tabs class instances

NameDescription
select(index)shows the tab by an integer index
add(title, content[, options])creates a new tab
remove(index[s])removes the tab(s)
move(index, position)moves the tab to the position
disable(index[s])disables the tab(s)
enable(index[s])enables the tab(s)
startLoop([delay_ms])starts a slideshow loop
stopLoop()stops the slideshow

The add method can receive options with the following keys

  • id - the tab hash-name
  • url - the tab content remote url-address
  • position - the tab position

top ↑Style Alterations

In the most basic case after a tabs module is instantiated it will assign css-classes for your tabs-element, like this

<ul class="rui-tabs">
<ul class="rui-tabs-list">
<li class="rui-tabs-tab rui-tabs-current"><a href="#">Tab 1</a></li>
<li class="rui-tabs-tab"><a href="#">Tab 2</a></li>
</ul>

<li class="rui-tabs-panel rui-tabs-current">Content 1</li>
<li class="rui-tabs-panel">Content 2</li>
</ul>

It will use the rui-tabs-current and rui-tabs-disabled classes at the tab-elements to paint the current and disabled tabs.

For the carousel widget and scrollable tabs the script will transform the structure to create the scrollbar

<ul class="rui-tabs">
<div class="rui-tabs-scroller">
<div class="rui-tabs-scroller-prev">&laquo;</div>
<div class="rui-tabs-scroller-next">&raquo;</div>

<ul class="rui-tabs-list">
..........
</ul>
</div>

............
</ul>

Then, for the remote tabs it will be using a textual spinner with the following structure

<ul class="rui-tabs">
<ul class="rui-tabs-list">
// ...
</ul>

<li class="rui-tabs-panel">
<div class="rui-tabs-panel-locker">
<div class="rui-spinner">
<div class="glow"></div><div></div><div></div><div></div>
</div>
</div>
</li>
</ul>

The harmonica widget will remain the same structure with a similar css-class assignments

<dl class="rui-tabs">
<dt class="rui-tabs-tab">Tab 1</dt>
<dd class="rui-tabs-panel">Tab Content</dd>
// ...
</dl>