Tabs

Demos

Theme: default

【青春】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。

【彩虹】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。

【歌唱】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。

  <div data-am-widget="tabs"
       class="am-tabs am-tabs-default"
        >
      <ul class="am-tabs-nav am-cf">
          <li class="am-active"><a href="[data-tab-panel-0]">青春</a></li>
          <li class=""><a href="[data-tab-panel-1]">彩虹</a></li>
          <li class=""><a href="[data-tab-panel-2]">歌唱</a></li>
      </ul>
      <div class="am-tabs-bd">
          <div data-tab-panel-0 class="am-tab-panel am-active">
            【青春】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。
          </div>
          <div data-tab-panel-1 class="am-tab-panel ">
            【彩虹】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。
          </div>
          <div data-tab-panel-2 class="am-tab-panel ">
            【歌唱】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。
          </div>
      </div>
  </div>

Theme: d2

  <div data-am-widget="tabs"
       class="am-tabs am-tabs-d2"
        >
      <ul class="am-tabs-nav am-cf">
          <li class="am-active"><a href="[data-tab-panel-0]">青春</a></li>
          <li class=""><a href="[data-tab-panel-1]">彩虹</a></li>
          <li class=""><a href="[data-tab-panel-2]">歌唱</a></li>
      </ul>
      <div class="am-tabs-bd">
          <div data-tab-panel-0 class="am-tab-panel am-active">
            【青春】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。
          </div>
          <div data-tab-panel-1 class="am-tab-panel ">
            【彩虹】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。
          </div>
          <div data-tab-panel-2 class="am-tab-panel ">
            【歌唱】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。
          </div>
      </div>
  </div>

Usage

Copy and Paste

Copy the codes in examples, and paste it to the <body> of the Amaze UI HTML template(Download);
Replace the contents in examples with your own contents.

Using Handlebars

The Handlebars partial of this widget is tabs. See Accordion for more details.

Allmobilize WebIDE

Drag the widget to the edit interface;
Click the Data binding button on the right panel, and bind data using following format.

var data = [
  {
    "title":   "",   // Title of this tab
    "content": "",   // Content of this tab
    "active":  false // Whether activate this tab. true | false. Only allow one tab to be active.
  }
];

return data;

数据接口

{
  "id": "",

  "className": "",

  "theme": "",

  "options": {
    "noSwipe": false; // Whether enable touch events.
  }

  "content": [
    {
      "title": "",
      "content": "",
      "active": ""
    }
  ]
}

FAQ

How to disable touch events?

Add the data-am-tabs-noswipe="1" class.

<div data-am-widget="tabs" class="am-tabs am-tabs-default" data-am-tabs-noswipe="1">

Amaze UI 2.4

Web Components