Tabs组件

Intro

支持多级嵌套及ajax加载的Tabs选项卡

Author

name:janking
concat:[email protected]

Example

http://codepen.io/janking/pen/GqrVVb

Options

@param {[String]}         [event]                        事件名称
@param {[String]}         [animateBefore]                前动画
@param {[String]}         [animateAfter]                 后动画
@param {[Boolean]}        [isCache]                      是否缓存，ajax请求内容时使用，默认缓存
@param {[Object]}         [ajaxSetup]                    ajax 请求配置

Events

//此处的selector 必须是需要 ajax 的 tab-item
 $('selctor').on('tabsAjaxBefore',function(event,config){
     //config --> 组件配置
 });
 $('selctor').on('tabsAjaxSuccess',function(event,response){
   //response --> ajax response
 });

Usage

$('#J-tabs').IUI('tabs');

$('#ajax-nested,#ajax').on({
  tabsAjaxBefore: function(event, config) {
    // 修改 ajax 配置，请注释下面这段做测试
    /**
      config.ajaxSetup = {
        url:'wwww.baidu.com',
        type:'POST',
        dataType:'JSON'
      }
    */
  },
  tabsAjaxSuccess: function(event, res) {
    $(this).html(res);
  }
});

Attention

• 2016-6-27 重新开发tabs，完全不兼容以前的版本。

• 由于transition动画需要两个class支持，因此区分animateBefore和animateAfter,具体参考 bootstrap tab的动画效果 fade & in

• /* 这两个class必须强制依赖 */
  .tabs-content {
    display: none;
  }
  
  .tabs-content.active {
    display: block;
  }
  

• .tabs-content之间必须是兄弟关系