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 (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

Keep informed

Sign up to our newsletter to receive updates on Winter CMS releases, new features in the works, and much more.
We'll never spam or give this address away.

Latest blog post

The Winter CMS Web Installer is now available!

Published June 17, 2021
We are super excited to announce that our new Web-based Installer is finally available for download, to make it super easy to get your next Winter CMS project started!

View this post Read all posts

Latest Winter CMS release

v1.1.3

Released April 26, 2021
3 UX/UI Improvements, 19 API Changes, 23 Bug Fixes, 3 Security Improvements, 4 Translation Improvements, 1 Community Improvement, 2 Dependencies

View details View all releases