README

TabbedContent 是一个轻量级的标签插件，使用HTML5历史API将您的标签导航添加到浏览器的历史记录中。

* 最小化后3KB，gzip/deflate压缩后1.25KB

它与jQuery和Zepto.js库都兼容。

它还提供了一个API，允许您在外部切换标签。

在线演示

• 基本演示
• Bootstrap演示
• 具有多个标签内容的Bootstrap演示
• Bootstrap + Zepto.js演示

安装

使用bower

bower install --save tabbedcontent

使用npm

npm install tabbedcontent

使用方法

基本布局

<ul>
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
    <li><a href="#tab-n">Tab N</a></li>
</ul>
<div class="tabscontent">
    <div id="tab-1">
        <!-- your first tab content -->
    </div>
    <div id="tab-2">
        <!-- your second tab content -->
    </div>
    <div id="tab-3">
        <!-- your third tab content -->
    </div>
    <div id="tab-n">
        <!-- your n tab content -->
    </div>
</div>

标签的链接应指向每个标签的id。

基本javascript初始化

$('.tabscontent').tabbedContent();

默认情况下，插件会获取之前包装器内的链接，这些链接与标签层相关联；但您可以指定自己的链接选择器，因此您可以将链接放在任何地方

<ul class="tabs">
    [...]

$('.tabscontent').tabbedContent({
    links: 'ul.tabs li a' // you can also pass a jquery/zepto object containing the links
})

与Zepto.js一起使用

如果您想使用tabbedcontent API，则需要data插件。

错误检测器

如果您正在处理表单并且希望标签在包含错误的第一个上打开，这个选项非常实用。

只需指定errorSelector选择器

$('.tabscontent').tabbedContent({
    errorSelector : '.error-message'
});

当插件初始化时，它将在标签内容中搜索errorSelector，打开包含它的第一个标签。

注意，这仅在url中没有hash时有效。如果存在hash，则打开其标签。

重写默认标签

如果您强制父链接的类与options.currentClass中设置的类相同，则将强制打开该标签。

<ul>
    <li class="active"><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
    <li><a href="#tab-n">Tab N</a></li>
</ul>

这比.errorSelector具有更高的优先级。

回调函数与事件

TabbedContent有两个回调函数可能对您有用：onInit和onSwitch。

$('.tabscontent').tabbedContent({
    onInit: function(api) {
        console.log('tabs initialized');
        console.log('Current tab is ' + api.getCurrent());
    },
    onSwitch: function(tab, api) {
        // Init a WYSIWYG editor on the tab (for example..)
        if (!$(tab + ' textarea').data('wysiwyg-initialized')) {
            initWysiwyg(tab + ' textarea');
        }
    }
})

此外，这些事件也会在元素上发出，因此您可以使用事件监听器。

$('.tabscontent').tabbedContent();
$('.tabscontent').on('tabcontent.init', function(api) {
    console.log('tabs initialized');
    console.log('Current tab is ' + api.getCurrent());
});
$('.tabscontent').on('tabcontent.switch', function(tab, api) {
    // Init a WYSIWYG editor on the tab (for example..)
    if (!$(tab + ' textarea').data('wysiwyg-initialized')) {
        initWysiwyg(tab + ' textarea');
    }
});

完整配置

$('.tabscontent').tabbedContent({
    links         : '.tabs a', // the tab links
    errorSelector : '.error-message', // false to disable
    speed         : false, // speed of the show effect. Set to null or false to disable
    onSwitch      : false, // onSwitch callback
    onInit        : false, // onInit callback
    currentClass  : 'current', // current selected tab class (is set to link's parent)
    tabErrorClass : 'has-error', // a class to be added to the tab where errorSelector is detected
    history       : true, // set to false to disable HTML5 history
    historyOnInit : true, // allows to deactivate the history for the intial autmatic tab switch on load
    loop          : false // if set to true will loop between tabs when using the next() and prev() api methods
});

API

TabbedContent有一个简单的API，允许您在标签之间切换。要使用它，只需调用data('api')。

var mytabs = $('.tabscontent').tabbedContent().data('api');

// now you can use the switch method:
mytabs.switch('#tab-1');

// or using it's index...
mytabs.switch(0); // note that first tab begins at 0

// you can also switch using id (whout #) and jQuery/Zepto objects
mytabs.switch('tab-1');
mytabs.switch($('.tabscontent div#tab-1'));

// you can also switch to next and previous tabs
mytabs.next();
mytabs.prev();

// the previous example won't loop the tabs; to do so you can set loop to true when configuring tabbedContent:
var mytabs = $('.tabscontent').tabbedContent({loop: true}).data('api');
// and / or you can pass it directly to the method:
mytabs.next(true);
mytabs.prev(true);

// check if current tab is first or last
if (mytabs.isFirst()) { /* do stuff */ }
if (mytabs.isLast()) { /* do stuff */ }

完整API

{
    // Switch to tab
    'switch'       : function apiSwitch(tab) {},
    // Switch to tab for old browsers
    'switchTab'    : function apiSwitch(tab) {},
    // Get current tab index
    'getCurrent'   : function getCurrent() {},
    // Get jQuery/Zepto object for specified tab
    'getTab'       : function getTab(tab) {},
    // Go to next tab in the tabs set
    'next'         : function next(loop) {},
    // Go to previous tab in the tabs set
    'prev'         : function prev(loop) {},
    // Returns true if current tab is first tab
    'isFirst'      : function isFirst() {},
    // Returns true if current tab is last tab
    'isLast'       : function isLast() {}
};

许可证

The MIT License (MIT)

Copyright (c) 2015-2017 Òscar Casajuana <elboletaire at underave dot net>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.