Tabs 插件

可千层叠加的 Tabs 选项卡

代码演示

Home
Profile
Ajax Page

庄周家境贫穷。一次，他去监河侯那里借粮食，监河侯说：“好吧！等到年底，我收到了老百姓的税金时，就借给你三百金，行吗？”

庄周一听，气得脸色都变了，但是他却对监河侯讲了这样一件事情：我昨天来时，半路上听到‘救命’的呼喊声。我回过头来，看见干涸的车沟里有条小螂鱼。

我走过去，问它： “小娜鱼，你为什么喊救命？”

小鲤鱼回答说：“我是东海龙王的臣子，不幸落到这里。您能够给我一些水来救我活命吗？”

Home-nested
Profile-nested
Ajax Page-nested

工之侨得到一块优质的桐木料，用它制作了一把琴，安上琴弦，一弹，发出金玉一般的声音，和谐悦耳。

工之侨自以为这是世界上最好的一把琴了。于是，他就拿去献给太常寺卿。太常让皇家的乐工检验，乐工却不屑一顾，说:“不古。”把琴还给了他。

工之侨只好把琴拿回家，让漆工仿古，在琴上漆出许多裂纹，又让雕匠在琴上刻了古人的题字，然后装进匣子，埋在地下。

一年之后，工之侨把琴从地下取出来，赶到集市上去卖。有位显贵之人正好路过，出百金买下了这把琴，并把它献给了朝廷。乐工们捧着这把琴，争相传看，竟然齐声称赞：

“啊，真是世上少有的珍琴！”

从前，有个楚国人准备到郑国卖珍珠.

他先用名贵的木兰做了一只精巧的小匣子，又用幽香的牡桂和花椒把匣子熏了一下，并且在匣子上面镶了碧绿的翡翠，还嵌上引人注目的玫瑰石，整个匣子装演得十分考究。

有个郑国人看到这只精美的匣子，非常喜欢，就用重金买了下来。但是，他却把匣子里的珍珠退还给了那个楚国人。

后来，人们都嘲笑这个楚国人，说他很善于卖匣子，却不善于卖珍珠。

过分追求形式，反而会喧宾夺主，效果适得其反。

我说：“好吧！我正好要去南方游说吴国和越国的国王，那我就请他们激起西江的大水来迎接您，可以吗？”

卿鱼听了，气得不得了，说：“我失去了常跟我在一起的水，就无法生存下去了。现在，我只要得到一些水，就能够生存下去；你却说出这样的话。好吧，你不如趁早到咸鱼店里去找我吧！”

古时，有一个人要筑一座九仞（八尺=一仞）高的山。

他十分努力的建造这座山，并且花了很多时间挖土、搬运泥土。

终于当山快要建成的时候，几乎只差最后一篮子的泥土就行了的时候，他放弃了。

这座山便永远无法完工。

这个典故用以形容“离成功只有一步之遥，但最终失败告终”的意思。

使用方法

 <div id="J-tabs">
      <ul class="tabs-header clearfix">
        <li class="active"><a class="tabs-item" href="#home">Home</a></li>
        <li><a class="tabs-item" href="#profile">Profile</a></li>
        <li><a class="tabs-item" href="#ajax" data-ajax="/data/ajaxPage.html">Ajax Page</a></li>
      </ul>
      <div class="tabs-content active" id="home">
        <!-- balabalabala -->
        <div style="padding:0 30px;border:2px dashed #F3DB9A;">
          <ul class="tabs-header-nested clearfix">
            <li class="active"><a class="tabs-item" href="#home-nested">Home-nested</a></li>
            <li><a class="tabs-item" href="#profile-nested">Profile-nested</a></li>
            <li><a class="tabs-item" href="#ajax-nested" data-ajax="/data/ajaxPage.html">Ajax Page-nested</a></li>
          </ul>
          <div class="tabs-content active" id="home-nested">
            <!-- balabalabala -->
          </div>
          <div class="tabs-content" id="profile-nested">
            <!-- balabalabala -->
          </div>
          <div class="tabs-content" id="ajax-nested"></div>
        </div>
      </div>
      <div class="tabs-content" id="profile">
        <!-- balabalabala -->
      </div>
      <div class="tabs-content" id="ajax"></div>
    </div>

// #J-tabs 元素是当前调用tabs插件的作用域，作为观察者侦听区域内的元素

$('#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);
  }
});

特别声明

由于 transition 动画需要两个 class 支持，因此区分 animateBefore 和 animateAfter ,具体参考 bootstrap tab 的动画效果 fade & in
.tabs-content之间必须是兄弟关系
这两个class必须强制依赖 ```css .tabs-content { display: none; }

.tabs-content.active { display: block; } ```

API

属性	说明	类型	默认值
event	ajaxSetup	String	click
animateBefore	前动画	String	fade
animateAfter	后动画	String	in
isCache	ajax 请求缓存，若 false , 则每次都从服务端请求	Number	true
ajaxSetup	ajax 参数配置	Object	null

如果您发现本页有什么问题，欢迎来提单 Issue : https://github.com/Janking/infinite-ui/issues