选项卡控件

此插件是 Twitter Bootstrap Tab 组件的包装器。它提供以下功能：

• 添加选项卡
• 具有 2 种状态（已修改/未修改）的可选关闭图标。可以通过在选项卡内的任何元素或选项卡本身上触发 modified.oc.tab/unmodified.oc.tab 事件来更改图标状态。
• 使用关闭图标删除选项卡，或从选项卡窗格或选项卡内触发事件。如果 confirm.oc.tab 事件处理程序返回 false，则可以取消删除。
• 如果标签不适合屏幕则滚动标签
• 可折叠标签

#支持的 CSS 修饰符

除了control-tabs 班级：

• tabs-inset：对选项卡应用负边距，使它们能够很好地位于带衬垫的容器内。
• tabs-offset：对标签应用正填充，使它们很好地位于齐平（无填充）容器内。
• tabs-flush: 选项卡与其上方的元素齐平。

#主选项卡

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

#主选项卡

<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: 默认情况下，Winter 后端中的主要选项卡是内嵌的，您应该使用.tabs-no-inset 禁用它。

#二级标签

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

#内容标签

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

#支持的数据属性：

• data-control="tab" - 从元素创建选项卡控件
• data-closable - 启用关闭选项卡功能
• data-pane-classes - 应用新窗格元素的 CSS 类列表

数据属性示例 (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: '关闭此选项卡？未保存的数据将丢失。'})
• $('#mytabs').ocTab('addTab', 'Tab title', 'Tab content', identifier) - 添加标签。可选的标识符参数允许将标识符与选项卡相关联。该标识符可与 goTo() 方法一起使用，以通过其标识符查找和打开选项卡。
• $('#mytabs').ocTab('closeTab', '.nav-tabs > li.active', true) - 关闭标签。第二个参数可以指向选项卡或选项卡窗格。第三个参数确定是否应在没有用户确认的情况下关闭选项卡。默认值为假。
• $('.nav-tabs > li.active').trigger('close.oc.tab') - 另一种关闭选项卡的方法。该事件可以在选项卡、选项卡窗格或选项卡或选项卡窗格内的任何元素上触发。
• $('#mytabs').ocTab('modifyTab', '.nav-tabs > li.active') - 将选项卡标记为已修改。使用“unmodifyTab”将选项卡标记为未修改。
• $('.nav-tabs > li.active').trigger('modified.oc.tab') - 另一种将选项卡标记为已修改的方法。该事件可以在选项卡、选项卡窗格或选项卡或选项卡窗格内的任何元素上触发。使用“unmodified.oc.tab”将选项卡标记为未修改。
• $('#mytabs').ocTab('goTo', 'someidentifier') - 通过标识符查找选项卡并打开它。
• $('#mytabs').ocTab('goToPane', '.tab-content .tab-pane:first') - 在其内容上下文中打开一个选项卡（窗格元素）

#支持的选项：

• closable - 将“关闭”图标添加到选项卡并允许用户关闭选项卡。对应于 data-closable 属性。
• closeConfirmation - 在用户尝试关闭修改后的选项卡时显示的确认信息。对应data-close-confirmation 属性。仅当修改选项卡时才会显示确认。
• 可滑动 - 允许在触摸设备上使用滑动手势切换选项卡。对应data-sliding属性。
• paneClasses - 应用新窗格元素的 CSS 类列表。对应于数据窗格类属性。
• maxTitleSymbols - 选项卡标题中的最大字符数。
• titleAsFileNames - 将选项卡标题视为文件名。在此模式下，选项卡中仅显示文件名部分，目录部分 是隐藏的。

#支持的事件：

• beforeClose.oc.tab - 在用户关闭选项卡之前在选项卡窗格元素上触发。调用事件的 preventDefault() 方法取消操作。
• afterAllClosed.oc.tab - 在关闭所有选项卡后触发