Plugins
Home

The plugins site is currently in development.

We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.

tab


Tab Override

Submitted by wjbryant on June 24, 2010 - 5:31pm

About

Tab Override is a lightweight jQuery plugin that allows tabs to be entered in textarea elements. It also allows multi-line selections to be indented with the tab key or unindented with the shift+tab key combination.

Usage

Simply call the tabOverride method on a textarea element to enable it and tabOverride(false) to disable it.

Example:

// enable Tab Override
$(textarea).tabOverride(); // no arguments or undefined
$(textarea).tabOverride(true); // any truthy value

// disable Tab Override
$(textarea).tabOverride(false); // any falsy value (except undefined)


Both spaces and tabs are supported and the desired tab size can be set using the tabOverride.setTabSize function. The getTabSize function returns the current tab size (0 represents the tab character).

Example:

// set the tab size to 4 spaces for all textareas
$.fn.tabOverride.setTabSize(4);

// get the current tab size

The Quotator

Submitted by jruddell on May 12, 2010 - 2:57pm

Background

Originally the quotator was a quote, rotator. It would rotate html elements on a timer displaying different quotes.

Over time the quotator developed into a multi featured jquery tab animation plugin.

The quotator works with targets (handles/tabs) and their related data.

What is special about the quotator is that it does not require a special HTML structure to work. The targets and content are selected by css selectors within the master container. The targets and content are paired sequentially by the order found in the HTML.

jQuery UI Scrollable Tabs

Submitted by aamir on May 4, 2010 - 9:30am

Problem:

Using jQuery-ui tabs we should know the number of tabs so that we can adjust the width of the tabs wrapper so all the tabs can adjust itself.
But what if we want to add the tabs dynamically with javascript? To solve this problem I google for some sort of plugins but I found no
proper jQuery plugin so that we can have two arrows (next and previous) to navigate through tabs.

Solution:

The solution is jQuery scrollableTabs with many features you might need.

Tabs - jQuery Accessible RIA

Submitted by fnagel on October 11, 2009 - 1:33pm

jQuery Accessible RIA, a collection of strictly WAI WCAG 2.0 and WAI ARIA conform web applications based on the popular Java-Script framework jQuery (using the UI Widget Factory).
This one extends a standard HTML table. You could add a sorting functionality, add a pager functionality, hide cols and rows — pretty cool when a user has to handle huge tables

Functionality features

* sort data by number, date, text alphabetically
* high performance: handle even large tables
* hide columns and rows
* pager functionality
* Standard jQuery widget methods: disable, enable, destroy

File size of the minified version is less than 9 KB.

Accessibility features

* keyboard support (arrow keys or native tabular index, Home, End, Space)
* ARIA Live-Regions
* ARIA and HTML table relations

Tabbed slide out content panel

Submitted by wpaoli on September 2, 2009 - 2:34pm

Create a side tab that expands content for a feedback form or contact info. Make your own image to use as a tab and apply this plugin to any div to hide the content off the right, left, top or bottom of the screen, It animates to show the content, when the handle/tab is clicked.

Create any size div.
Create any size tab graphic.

Can be fixed or absolute positioned.
Action can be on click or on hover.

Tab can be attached to the left, right, top or bottom of viewport.

Example: http://www.building58.com/examples/tabSlideOut.html

Tested on FF3, Safari 4, IE6, IE7, IE8

Tabbify

Submitted by markgandolfo on June 9, 2009 - 4:42am

Tabbify is a simple tabs plugin, it extended simpletabs, it added the memory of the last tab. So if a user refreshes the window, moves away from the page, etc. it'll remember the last chosen tab.

simple enough to use, view github page to see how it works http://github.com/markgandolfo/jquery.tabbify/tree/master

jericho tabpanel

Submitted by jericho on April 20, 2009 - 2:17am

*Wow...just wow!!!*

This plugin is really amazing!

it's light-weight but powerful and perfect

It's easy to use, all the API was opened, you can get them from the remarks that in the head of js file.

JeirchoTab has supported four types of data:

*formtag
*html
*iframe
*ajax

You wanna known 'How to use it'?

See the demo by yourself!

live demo

click here to download

(mb)Tabset, choose your content and sort your tabs

Submitted by pupunzi on April 1, 2009 - 6:47pm

organize your tabs!

A usefull component that let you build a tabbed interface really easily; ad you can sort your tab as you want!

DEPENDENCIES:

ui.core.js
ui.sortable.js

optional:
jquery.metadata.js

HOW DOES IT WORK:

here is the js call:

$("#tabset1").buildMbTabset({
sortable:true,
position:"left",
start:function(){},
stop:function(){}
});

here is the code for each tabset:

<div class="tabset" id="tabset1">
<a id="a" class="tab {container:'cont_1'}">tab 1</a>
<a id="b" class="tab {container:'cont_2'}"  >tab 2 con testo lungo</a>
<a id="c" class="tab disabled {container:'cont_3'}">tab 3</a>
<a id="d" class="tab {container:'cont_4'}" >tab 4</a>
</div>

here is the code for each tabContent:

container 1

container 2

SkiyoTabs

Submitted by Skiyo on March 15, 2009 - 5:59am

SkiyoTabs is a easy way to build some tabs likes jQuery UI tabs.
It's just 1kb..

imAnimTabber

Submitted by lesgreen on March 12, 2009 - 7:05pm

This plugin was based upon the imUpSideDownTabber that I created a few months ago. The imUpSideDownTabber is a tabbed interface that displays tabs underneath the content. Much of the functionality this new plugin is the same as the imUpSideDownTabber, but I decided to rename it because it does more than just up-side-down tabbing. This tabbing plugin can be used to display content with the following animated options:

slide (imUpsideDownTabber)
height
width
fade
carousel

As with the imUpSideDownTabber, the tabs can be created dynamically, but I added a ‘manual’ mode so that the plugin can function when the tabbing interface is already created. Unlike the imUpSideDownTabber, the tabs can be individually styled. Also, unlike imUpSideDownTabber, I created a true demo page.