[TOC]
### FrozenUI的CSS組件庫,基于騰訊手Q樣式規范
http://frozenui.github.io/
### frozen ui 版本：**1.3.0**
### 歷史版本
查看1.3.0以前的歷史版本修改記錄 https://github.com/frozenui/frozenui/wiki/History
查看1.3.0版本的修改記錄 https://github.com/frozenui/frozenui/wiki/History-1.3.0
查看組件css規范 https://github.com/frozenui/frozenui/wiki/CSS-Guide
查看通用代碼規范 https://github.com/frozenui/frozenui/wiki/CSS-Guide
### 下載安裝
#### 最新引用方式
1.下載完整版 https://github.com/frozenui/frozenui/archive/1.3.0.zip
2.定制化下載 http://frozenui.github.io/customize.html
3.訪問我們的github倉庫 https://github.com/frozenui/frozenui， 自行 clone 到本地。
### 目錄結構
- sass/
+ 存放 .scss 源碼
- css/
+ frozen.css
- font/
+ 存放 字體文件
- img/
+ 存放 圖片文件
- js/
+ frozen.js
- lib/
+ 存放第三方依賴類庫，如 zeptojs
- doc/
+ 代碼規范
- jsdoc/
+ jsdoc生成的api文檔
- demo/
+ 示例, 從 src/ 自動生成
- dist/
+ 發布的文件
- Gruntfile.js
+ grunt 配置文件
### 基礎模板
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>FrozenUI Demo</title>
<link rel="stylesheet" href="../css/frozen.css">
</head>
<body ontouchstart="">
<header class="ui-header ui-header-positive ui-border-b">
<i class="ui-icon-return" onclick="history.back()"></i><h1>選項卡 tab</h1><button class="ui-btn">回首頁</button>
</header>
<footer class="ui-footer ui-footer-btn">
<ul class="ui-tiled ui-border-t">
<li data-href="index.html" class="ui-border-r"><div>基礎樣式</div></li>
<li data-href="ui.html" class="ui-border-r"><div>UI組件</div></li>
<li data-href="js.html"><div>JS插件</div></li>
</ul>
</footer>
<section class="ui-container">
<section id="tab">
<div class="demo-item">
<p class="demo-desc">標簽欄</p>
<div class="demo-block">
<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>內容1</li>
<li>內容2</li>
<li>內容3</li>
</ul>
</div>
</div>
<script class="demo-script">
</script>
</div>
</section>
</section>
<script src="../lib/zepto.min.js"></script>
<script src="../js/frozen.js"></script>
<script>
(function (){
var tab = new fz.Scroll('.ui-tab', {
role: 'tab',
autoplay: true,
interval: 3000
});
/* 滑動開始前 */
tab.on('beforeScrollStart', function(fromIndex, toIndex) {
console.log(fromIndex,toIndex);// from 為當前頁，to 為下一頁
})
})();
</script>
</body>
</html>
~~~
