## Tab
選項卡組件。
### 調用方式
HTML 示意：
~~~
<div class="ui-tab">
<ul class="ui-tab-nav ui-border-b">
<li class="current">熱門推薦</li>
<li>全部表情</li>
<li>表情</li>
</ul>
<ul class="ui-tab-content" style="width:300%">
<li class="current">選項1內容</li>
<li>選項2內容</li>
<li>選項3內容</li>
</ul>
</div>
~~~
這里定義兩個概念：wrapper 和 scroller。wrapper 即外層的包含 DOM，如 div.ui-tab；scroller 即內部滾動的元素，如 ul.ui-tab-content。組件初始化的時候需要傳入 wrapper ('.ui-tab')。實際滾動的是內部的 scroller ('.ui-tab-content')。
組件會自動為 ui-tab-nav 和 ui-tab-content 內的 li 元素添加 current 類。
JS 代碼示意：
~~~
window.addEventListener('load', function(){
var tab = new fz.Scroll('.ui-tab', {
role: 'tab',
autoplay: true,
interval: 3000
});
/* 滑動開始前 */
tab.on('beforeScrollStart', function(from, to) {
// from 為當前頁，to 為下一頁
})
/* 滑動結束 */
tab.on('scrollEnd', function(curPage) {
// curPage 當前頁
});
})
</script>
~~~
### 配置說明
<table width="100%">
<tbody><tr>
<th>name</th>
<th>type</th>
<th>default</th>
<th>description</th>
</tr>
<tr>
<td>autopaly</td>
<td>boolean</td>
<td>false</td>
<td>自動播放</td>
</tr>
<tr>
<td>interval</td>
<td>int</td>
<td>2000ms</td>
<td>自動播放間隔時間</td>
</tr>
<tr>
<td>duration</td>
<td>int</td>
<td>300ms</td>
<td>切換動畫過渡時間</td>
</tr>
<tr>
<td>bounce</td>
<td>boolean</td>
<td>true</td>
<td>反彈動畫</td>
</tr>
<tr>
<td>beforeScrollStart</td>
<td>function</td>
<td>function(){}</td>
<td>滑動開始前調用（參數：來源頁from、切換頁to）</td>
</tr>
<tr>
<td>scrollEnd</td>
<td>function</td>
<td>function(){}</td>
<td>滑動結束時調用（參數：當前頁 curPage）</td>
</tr>
<tr>
<td>enable()</td>
<td>function</td>
<td>-</td>
<td>全局開關，開啟滾動</td>
</tr>
<tr>
<td>disable()</td>
<td>function</td>
<td>-</td>
<td>全局開關，禁止滾動</td>
</tr>
<tr>
<td>refresh()</td>
<td>function</td>
<td>-</td>
<td>刷新當前位置</td>
</tr>
<tr>
<td>destroy()</td>
<td>function</td>
<td>-</td>
<td>銷毀對象</td>
</tr>
</tbody></table>
### DEMO演示
~~~
<!-- html -->
<div class="ui-tab">
<ul class="ui-tab-nav ui-border-b">
<li class="current">熱門推薦</li>
<li>全部表情</li>
<li>表情</li>
</ul>
<ul class="ui-tab-content" style="width:300%">
<li class="current"><p>內容</p><p>內容</p><p>內容</p><p>內容</p></li>
<li><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p></li>
<li><p>內容</p><p>內容</p></li>
</ul>
</div>
<!-- js -->
<script>
(function() {
var tab = new fz.Scroll('.ui-tab', {
role: 'tab',
autoplay: true,
interval: 3000
});
tab.on('beforeScrollStart', function(from, to) {
console.log(from, to);
});
tab.on('scrollEnd', function(curPage) {
console.log(curPage);
});
})();
</script>
~~~
