Tabs 插件

可千层叠加的 Tabs 选项卡

代码演示

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

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

我走过去,问它: “小娜鱼,你为什么喊救命?”

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

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

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

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

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

“啊,真是世上少有的珍琴!”

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

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

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

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

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

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

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

古时,有一个人要筑一座九仞(八尺=一仞)高的山。

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

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

这座山便永远无法完工。

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

使用方法

 <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