opichon/autotabs

JQuery plugin to generate tabs from page markup

Tuesday, October 20, 2015
by opichon
Repository
1 Watchers
3 Stars
49 Installations

JavaScript
1 Dependents
0 Suggesters
1 Forks
0 Open issues
21 Versions
0 % Grown

The README.md

jquery.autotabs.js - A jquery plugin that automatically generates navigable tabs based on the markup in the page.

jquery.autotabs.js automatically generates tabs based on the markup in your DOM element to which it is applied., _(*1)

A tab is created for each child element in the designated element. Which children are used to generate tabs can be customized., _(*2)

A set of navigable tabs is added to the page. The location of the tabs is cusotmizable., _(*3)

Each tab can contain either static or dynamic content., _(*4)

See demo/docs in docs/index.html., _(*5)

Requirements

jQuery >= 1.9.1

If you want autotabs to remember the state of you tabs, you also need the jquery.cookie plugin:, _(*6)

jquery.cookie.js: >= 1.4

Installation

Installation via bower

Add the following lines to your bower.json configuration:, _(*7)

```` json "dependencies": { "autotabs": "~2.0", }, _(*8)


### Download

Or download from:

* http://plugins.jquery.com/autotabs/
* https://github.com/opichon/autotabs

Setup
-----

### javascripts

````html
    <script src="../dist/js/jquery.js"></script>
    <script src="../dist/js/jquery.cookie.js"></script>    <!-- optional -->
    <script src="../dist/js/jquery.autotabs.min.js"></script>

stylesheets

    <link rel="stylesheet" type="text/css" href="../dist/css/jquery.autotabs.min.css" />

For vertical tabs, include the custom stylesheet provided:, _(*9)

    <link rel="stylesheet" type="text/css" href="../dist/css/jquery.autotabs.vertical.min.css" />

Add the following logic to your page or to a plugin included to your page:, _(*10)

$( "#mytabs" ).autotabs(/* { options } */));

Markup options

The tabs settings can be configured directly inside the markup. The following attributes are supported:, _(*11)

data-autotabs-label

The tab label., _(*12)

data-autotabs-url

The remote url for the tab content., _(*13)

title

The tab label., _(*14)

This attribute is deprecated in favour of the data-autotabs-label attribute and may be removed in future releases., _(*15)

rel (deprecated)

The remote url for the tab content., _(*16)

This attribute is deprecated in favour of the data-autotabs-url attribute and may be removed in future releases., _(*17)

How-to

Load a tab pane's content dynamically via ajax

Simply set the data-autotabs-url attribute of the tab pane to the url of the page holding the content., _(*18)

Style tabs via bootstrap

To style the tabs with the bootstrap stylesheet, use the following options:, _(*19)

tabs_class: "nav nav-tabs",
tab_class: null,
active_class: "active"

To style the tabs as pills:, _(*20)

tabs_class: "nav nav-pills",
tab_class: null,
active_class: "active"

Plugin options

tab_pane_selector

Defines the selector for identifying tab panes., _(*21)

Default value: div, section, .tab-pane, _(*22)

tab_label_selector

Defines the selector for identifying the label/title of the tab from an element of the tab pane., _(*23)

Default value: h1, h2, h3, h4, _(*24)

tabs_class

The CSS class to set on the generated tabs element., _(*25)

Default value: autotabs, _(*26)

tab_class

The CSS class ot set on each generated tab element, _(*27)

Default value: autotab, _(*28)

tabs_selector

The selector for identifying the element in which the generated tabs should be appended., _(*29)

Default value: none, _(*30)

active_class

The CSS class to add to the tab currently selected., _(*31)

Default value: current, _(*32)

active_tab

The index of the tab to set as active when the plugin loads., _(*33)

Default value: null, _(*34)

cookie_name

The name of the cookie in which to store the state of the tabs. This option requires the jquery.cookie.js plugin., _(*35)

Default value: active_tab, _(*36)

cookie_path

The path to set on the cookie. This option requires the jquery.cookie.js plugin., _(*37)

Default value: /, _(*38)

force_refresh

Forces each tab to be refreshed when clicked., _(*39)

Default value: false, _(*40)

tab_orphans:

Whether to treat an single (orphan) tab-pane as a tab or not., _(*41)

Default value: false, _(*42)

loading_icon

The selector for the element containing the loading icon., _(*43)

Default value: #loading, _(*44)

tab_id

A function responsible for generating a tab id if not suplied in the markup., _(*45)

Default value:, _(*46)

function( id ) { return "__" + id; }

tab_label

A function responsible for generating each tab's label ifnot supplied in the markup., _(*47)

Default value:, _(*48)

function( index ) { return "Tab " + ( index + 1 ); },

tab_pane_id

A function responsible for generating the id of each tab pane if not supplied in the markup., _(*49)

Default value:, _(*50)

function( index ) { return "___" + ( index + 1 ); },

vertical

Whether the tabs are vertically aligned., _(*51)

Default value: false, _(*52)

success

Defines the callbacks to apply when a tab is clicked. This option can be, _(*53)

a function, in which case it is applied to all tabs
an object, where the property is the id of a tab, and the value the function to act as callback for that tab.

All functions are applied to the tab pane element. this therefore refers to the tab pane element., _(*54)

jquery tabs autotabs

02/11 2012

2.0.1

2.0.1.0 https://github.com/opichon/autotabs

jQuery plugin to generate tabs from page markup

Sources Download

by Olivier Pichon

jquery tabs autotabs

jquery-plugin autotabs

JQuery plugin to generate tabs from page markup

opichon/autotabs

The README.md

jquery.autotabs.js - A jquery plugin that automatically generates navigable tabs based on the markup in the page.

Requirements

Installation

Installation via bower

stylesheets

Markup options

data-autotabs-label

data-autotabs-url

title

rel (deprecated)

How-to

Load a tab pane's content dynamically via ajax

Style tabs via bootstrap

Plugin options

tab_pane_selector

tab_label_selector

tabs_class

tab_class

tabs_selector

active_class

active_tab

cookie_name

cookie_path

force_refresh

tab_orphans:

loading_icon

tab_id

tab_label

tab_pane_id

vertical

success

The Versions

dev-master

by Olivier Pichon

2.1.3

by Olivier Pichon

2.1.2

by Olivier Pichon

2.1.1

by Olivier Pichon

2.1.0

by Olivier Pichon

2.0.x-dev

by Olivier Pichon

2.0.14

by Olivier Pichon

2.0.13

by Olivier Pichon

2.0.12

by Olivier Pichon

2.0.11

by Olivier Pichon

2.0.10

by Olivier Pichon

2.0.9

by Olivier Pichon

2.0.8

by Olivier Pichon

2.0.7

by Olivier Pichon

2.0.6

by Olivier Pichon

2.0.5

by Olivier Pichon

dev-develop

by Olivier Pichon

2.0.4

by Olivier Pichon

2.0.3

by Olivier Pichon

2.0.2

by Olivier Pichon

2.0.1

by Olivier Pichon