[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>
~~~
