ORIENT/modules/system/assets/ui/docs/tab.md

# 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 October 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 (data-control="tab"):

    <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