Tab control

This plugin is a wrapper for the Twitter Bootstrap Tab component. It provides the following features:

• Adding tabs
• Optional close icons with 2 states (modified / unmodified). The icon state can be changed by triggering the modified.oc.tab/unmodified.oc.tab events on any element within tab, or on the tab itself.
• Removing tabs with the Close icon, or with triggering an event from inside a tab pane or tab. The removing can be canceled if the `confirm.oc.tab` event handler returns `false`.
• Scrolling tabs if they do not fit the screen
• Collapsible tabs

Supported CSS modifiers

These modifiers can be added in addition to the control-tabs class:

• `tabs-inset` - Applies a negative margin to the tabs allowing them to sit well inside a padded container.
• `tabs-offset` - Applies a positive padding to tabs so they sit well inside a flush (non padded) container.
• `tabs-flush` - Tabs to sit flush to the element above it.

Master tabs

<div class="control-tabs master-tabs" data-control="tab">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#primaryTabOne">One</a></li>
        <li><a href="#primaryTabTwo">Two</a></li>
        <li><a href="#primaryTabThree">Three</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active">
            Tab one content
        </div>
        <div class="tab-pane">
            Tab two content
        </div>
        <div class="tab-pane">
            Tab three content
        </div>
    </div>
</div>

Primary tabs

<div class="control-tabs primary-tabs" data-control="tab">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#primaryTabOne">One</a></li>
        <li><a href="#primaryTabTwo">Two</a></li>
        <li><a href="#primaryTabThree">Three</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active">
            Tab one content
        </div>
        <div class="tab-pane">
            Tab two content
        </div>
        <div class="tab-pane">
            Tab three content
        </div>
    </div>
</div>

> Note: Primary tabs in the Winter back-end are inset by default and you should use .tabs-no-inset to disable this.

Secondary tabs

<div class="control-tabs secondary-tabs" data-control="tab">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#secondaryTabOne">One</a></li>
        <li><a href="#secondaryTabTwo">Two</a></li>
        <li><a href="#secondaryTabThree">Three</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active">
            Tab one content
        </div>
        <div class="tab-pane">
            Tab two content
        </div>
        <div class="tab-pane">
            Tab three content
        </div>
    </div>
</div>

Content tabs

<div class="control-tabs content-tabs" data-control="tab">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#contentTabOne">One</a></li>
        <li><a href="#contentTabTwo">Two</a></li>
        <li><a href="#contentTabThree">Three</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active">
            Tab one content
        </div>
        <div class="tab-pane">
            Tab two content
        </div>
        <div class="tab-pane">
            Tab three content
        </div>
    </div>
</div>

Supported data attributes:

• `data-control="tab"` - creates the tab control from an element
• `data-closable` - enables the Close Tab feature
• `data-pane-classes` - a list of CSS classes to apply new pane elements

Example with data attributes:

<div class="control-tabs master" data-control="tab" data-closable>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#home">Home</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active">Home</div>
    </div>
</div>

JavaScript API

• `$('#mytabs').ocTab({closable: true, closeConfirmation: 'Close this tab? Unsaved data will be lost.'})`
• `$('#mytabs').ocTab('addTab', 'Tab title', 'Tab content', identifier)` - adds tab. The optional identifier parameter allows to associate a identifier with a tab. The identifier can be used with the `goTo()` method to find and open a tab by it's identifier.
• `$('#mytabs').ocTab('closeTab', '.nav-tabs > li.active', true)` - closes a tab. The second argument can point to a tab or tab pane. The thrid argument determines whether the tab should be closed without the user confirmation. The default value is `false`.
• `$('.nav-tabs > li.active').trigger('close.oc.tab')` - another way to close a tab. The event can be triggered on a tab, tab pane or any element inside a tab or tab pane.
• `$('#mytabs').ocTab('modifyTab', '.nav-tabs > li.active')` - marks a tab as modified. Use the `unmodifyTab` to mark a tab as unmodified.
• `$('.nav-tabs > li.active').trigger('modified.oc.tab')` - another way to mark a tab as modified. The event can be triggered on a tab, tab pane or any element inside a tab or tab pane. Use the `unmodified.oc.tab` to mark a tab as unmodified.
• `$('#mytabs').ocTab('goTo', 'someidentifier')` - Finds a tab by it's identifier and opens it.
• `$('#mytabs').ocTab('goToPane', '.tab-content .tab-pane:first')` - Opens a tab in context of it's content (pane element)

Supported options:

• `closable` - adds the "close" icon to the tab and lets users to close tabs. Corresponds the `data-closable` attribute.
• `closeConfirmation` - a confirmation to show when a user tries to close a modified tab. Corresponds the `data-close-confirmation` attribute. The confirmation is displayed only if the tab was modified.
• `slidable` - allows the tabs to be switched with the swipe gesture on touch devices. Corresponds the `data-slidable` attribute.
• `paneClasses` - a list of CSS classes to apply new pane elements. Corresponds to the `data-pane-classes` attribute.
• `maxTitleSymbols` - the maximum number of characters in tab titles.
• `titleAsFileNames` - treat tab titles as file names. In this mode only the file name part is displayed in the tab, and the directory part is hidden.

Supported events:

• `beforeClose.oc.tab` - triggered on a tab pane element before tab is closed by the user. Call the event's `preventDefault()` method to cancel the action.
• `afterAllClosed.oc.tab` - triggered after all tabs have been closed