历史版本

查看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>