演示地址404
http://frozenui.github.io/frozenui

css代码修改

• 背景颜色用#f8f8f8，searchbar背景色也不对
• ui-list 纯文字的都是30px 带图片的如果是这种表单类的就是30px 其他的都是20px，增加ui-list-card
• 增加卡片或者面板类
• 增加ui-header和ui-footer
• ui-border改为背景方式，另增加针对圆角使用scale方式
• 新消息提示条样式修改
• select样式
• 增加栅格
• ui-badge-num
• 红点颜色
• 头像大小
• ui-form修改，不重写原生的样式，增加ui-input，datetime-local 样式bug
• 大面积的:active像list，slider，grid都改成.active
• ui-btn-group的样式需要修改
• searchbar修改，参考 http://xiaoqu.qq.com/mobile/#&page=entrance&loca=search
• 增加actionsheet
• 增加左边菜单
• 布局样式http://jsbin.com/zirohunuxo/1/edit

抽象variable和mixin

业务vip部分

• 修改tag
• 修改selector
• ui-btn-vip的大小要修改

图片部分

• 重新拼图
• iconfont

与js结合

• tab
• tips
• progress
• loading
• dialog
• swipe-down-refresh
• carousel整合

模仿QQ左侧的那个菜单.

http://frozenui.github.io/demo/

使用演示页面的 http://i.gtimg.cn/vipstyle/frozenjs/1.0.1/frozen.js 正常, 但是使用 frozenui-1.3.0/dist/js/frozen.js 却无法正常弹出 dialog.

把效果相关的代码贴出来方便使用，并增加注释。
还有一些常用的简单效果，不适合复用，不需要到处去找代码。
比如回到顶部啊，展开收缩，sticky固定，百分比动画等等。

frozenui中的iconfont

最新版本的frozenui使用iconfont替代图片来展示图标，使图标的使用更轻量，更灵活。

提供两个版本的iconfont文件，iconfont.ttf和iconfont-full.ttf。

iconfont.ttf：

iconfont-full.ttf：

其中iconfont.ttf只包含了其他组件需要使用的icon文件，iconfont-full.ttf是包含目前frozenui所有图标的文件。
使用参考demo：http://frozenui.github.io/frozenui/demo/icon.html

项目中使用iconfont

1. 不需要这么多icon的情况

   对性能要求较高，不需要所有icon时，可以在http://iconfont.cn/search?q=frozenui 选择自己需要的icon放到自己的项目中。

2. 需要新增icon

   按照网站的帮助制作svg文件，上传到http://iconfont.cn/icons/uploadShow ，选择需要的icon放入自己的项目中。

如果页面加载后，页面的宽度又发生了变化，例如变大或变小，会导致选项卡无法正确切换。

把-webkit-tap-highlight-color重置为transparent就可以
http://jsbin.com/ficexuzasi
原因待研究

新增下载中的按钮样式

站点内容

1. 每个页面多余的内容删掉，增加一些有趣味性的说明文字
2. js页面链接到实际组件
3. 每个js组件的页面传到gh-pages分支，生成站点，例如http://frozenui.github.io/frozenjs-frozen/
4. 首页需要设计下

组件

1. css分类修改
2. css命名修改
3. 压缩发布版本管理 已改为spm build 合并代码
4. 组件文档再详细

组件修改情况

1. atom已改完，文档还没写完

不管桌面版的还是移动版的firefox，打开demo的页面，有很多地方都会有一些错位，不知道浏览器兼容性这一块怎么考虑的？
还是说你们的定位只是调用webkit内核的webapp。而不管移动端的其它浏览器？

就像这种

有考虑支持page load，我觉的如果支持这个就很完美了

http://frozenui.github.io/frozenui/history.html

引用地址:

http://i.gtimg.cn/vipstyle/frozenui/1.2.0/css/frozen.css?_bid=306

http://i.gtimg.cn/vipstyle/frozenui/1.2.0/css/vip.css?_bid=306

1. 修改ui-list和ui-form的箭头图标
2. dom修改 去掉ui-select-user, 增加ui-selector
3. 增加ui-icon-qq
4. selec标签重写
5. 修改ui-avatar有些android2.3的机器不支持 border-radius %单位的问题
6. 修改ui-btn的行高不一致的问题
7. 1px左右边框改用与上下边框同样的方法实现
8. dom修改 ui-searchbox改成ui-searchbar ,增加focus时控制内部元素隐藏和显示的代码，减少js需要的操作
9. dom修改 ui-tab内部增加ui-tab-nav，高度的bug修改
10. 修改ui-form关闭图标位置不对，另外箭头缺一个像素
11. 修改ui-reddot带白边的红点半径不对
12. dom修改 增加平铺按钮组ui-btn-group-tiled,ui-btn-bottom改成ui-btn-group-bottom
13. 增加ui-badge-corner，以及ui-list ui-badge样式
14. 图片使用相对路径，单个组件css发布时去掉basic和vip文件夹，与frozen.css同一目录
15. 按钮颜色跟规范对齐
16. tips的图标位置细调
17. 图片使用相对路径，单个组件css发布时去掉basic和vip文件夹，与frozen.css同一目录
18. bid修改为306

在 Demo 中点击红色按钮会发现点击态颜色不对。

1. form没有支持select
2. textarea功能略简单粗暴了点
3. list标题和内容不支持换行

1. 首先，fork到自己的项目

2. 下到本地

git clone https://github.com/fayching/frozenui.git fay-frozenui

3. 下载所有需要的grunt插件

npm install

（腾讯内部网络需要特殊配置以及设置代理），推荐使用外网用淘宝的代理 registry = http://registry.npm.taobao.org

4. package.json文件修改版本号信息

5. 修改代码

修改sass目录中文件

img目录新增图片：

6.修改文档

修改docs目录，使用md编写

7. 编译代码以及测试

grunt docs ，访问http://127.0.0.1:8000/调试页面

这一步会生成_site目录，如何将生成的_site目录提交到gh-pages参见#7

仅修改文档可以使用nico server来测试，不涉及grunt

8. 提交git，提交pr

git add -A
git pull origin master
git commit -m 'log'
git psuh origin master

_site 同样

提交pr时注意主干有变更时先更新过来，过程可以理解为主干向分支提pr

9. 合并代码，以及后续压缩部署发布（faycheng）

10. 同步信息到所有前端

sass/reset.scss 里面 body {-webkit-text-size-adjust: none;} 改成 -webkit-text-size-adjust: 100%;是不是更好？

这样有个问题就是历史版本估计看不到了

项目不错，不过使用文档中，没有具体的dome，demo的效果也只是一个图片，示例代码引用文件找不到“ http://frozenui.github.io/frozenjs/effect/parallax/index.html ” “parallax-animation.css”
在他人项目中找到“ https://github.com/xmkey/we/tree/63a06dd29454b0ba575095cd42a85ec746d77f86/Public/css ”

轮播组件 slider 图片的高度无法自适应？

使用时发现与jquery冲突，在使用dialog时，我加入jquery就导致dialog方法未定义，但我又需要使用jquery的ajax方法，是否有解决方法

修改内容

1. ui-tab的样式（是否去掉fixed）
2. ui-slider的样式（点的样式还要再改）
3. ui-tooltips增加ui-tooltips-vip
4. ui-btn按钮使用ui-btn-vip
5. ui-list中增加普通图片链接列表
6. atom增加ui-arrowlink

引用地址:

http://i.gtimg.cn/vipstyle/frozenui/1.2.1/css/frozen.css?_bid=306

http://i.gtimg.cn/vipstyle/frozenui/1.2.1/css/global.css?_bid=306

修改内容

1. 修改ui-tab的样式，修复了两条线没贴在一起的问题

2. 修改ui-slider的样式，主要是圆点的样式，提供padding-top解决图片未加载时高度不定的解决方案

3. 修改ui-list中active时线在中间的问题，并_去掉文字截断_，增加普通图片链接列表

4. 增加ui-nowrap和ui-nowrap-multi辅助类控制文字截断

5. 修改ui-badge红点的大小

6. 增加ui-badge-num和ui-badge-cornernum数字提醒

7. 增加ui-arrowlink带箭头的链接辅助类

8. 增加ui-grid-halve两列和ui-grid-trisect三列图片布局，提供padding-top解决图片未加载时高度不定的解决方案

9. 增加ui-btn-s小按钮和ui-btn-progress百分比按钮

10. ui-avatar独立成单独css

11. 增加进度条ui-progress

12. 独立ui-tooltips-vip会员栏，放在vip目录

13. dom修改，增加ui-btn-vip，会员栏中的按钮，放在vip目录，会员栏的结构相应需要修改：

    <div class="ui-tooltips ui-tooltips-vip">
        <div class="ui-tooltips-cnt">
            <i class="ui-icon-yearsvip"></i>
            <span>超级会员专享酷炫个性名片！</span>
            <button class="ui-btn ui-btn-primary">续费</button>
        </div>
    </div>
    

    改为

    <div class="ui-tooltips-vip">
        <div class="ui-tooltips-cnt">
            <i class="ui-icon-yearsvip"></i>
            <span>超级会员专享酷炫个性名片！</span>
            <button class="ui-btn-vip">续费</button>
        </div>
    </div>
    

14. dom修改，修改铭牌ui-tag的选中态ui-tag-selected的位置，修改铭牌的结构使铭牌位置从文字右边改到图片右下角，例：

    <li class="ui-tag-svip">
        <div class="ui-grid-halve-img">
           <span style="background-image:url(http://placehold.sinaapp.com//?190*284)"></span>
        </div>
        <h4>高尔夫 <span>2.3M</span></h4>
    </li>
    

    改为

    <li>
        <div class="ui-grid-halve-img ui-tag-vip">
           <span style="background-image:url(http://placehold.sinaapp.com//?190*284)"></span>
        </div>
        <h4>高尔夫 <span>2.3M</span></h4>
    </li>
    

注意只换css不修改dom结构铭牌会有_错位_的问题

另增加星影ui-tag-xy,活动ui-tag-act,限免ui-tag-limit，限量ui-tag-last等铭牌。

PS：有按需打包到页面的需求可以使用combo：

<link media="all" href="http://i.gtimg.cn/c/=/vipstyle/frozenui/1.2.1/css/reset.css,/vipstyle/frozenui/1.2.1/css/ui-notice.css" rel="stylesheet">

网页只引用了 1.2.1版的global.css样式，使用代码（不知道怎样显示代码，直接截图了）：

显示的错误效果：

错误描述：
每个列表前的图标背景底部出现了灰色的图标，样式不正确了

我引用了1.2.0版本的 global.css后，可以正确显示：

依照演示将 footer 加上 .ui-footer-btn 后. 想要对某一区域高亮, 尝试使用如

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #30EF22), to(#2BE021))

这样的代码覆盖. 在桌面端 Chrome 正常.

但是在移动端, iOS 8 和 Android 5 中均异常, 状况为:
图片还是 .ui-footer-btn 的颜色, 只有该区块右侧颜色改变. 好像只有 border 的颜色变了.

1. 背景颜色用#f8f8f8，searchbar背景色也不对
2. ui-list 纯文字的都是30px 带图片的如果是这种表单类的就是30px 其他的都是20px
3. 增加卡片或者面板类？
4. 增加ui-header和ui-footer
5. ui-border使用scale的方式有些机型上看起来不是完全1px
6. 新消息提示条样式修改
7. select样式

有关于兼容性的说明吗？

添加多个tab会失效

代码（直接上图吧）：

同样的代码，在android4.1.2系统上出现样式错误：

在android4.3系统上，没有问题：

帮帮忙，看有什么解决方法吗？

若ui-list有多个，超过一个页面时，设置成scrollY: true，但是还是无法滑动到ui-btn部分，难道我用的姿势不对？
code:

这项操作可以使别人通过github地址访问你的站点，如http://frozenui.github.io/frozenui/

首先进入目录cd _site
初始化和增加仓库
git init
git remote add origin https://github.com/frozenui/frozenui.git（注意替换成你的git地址）
git checkout -b gh-pages ，此处参考https://help.github.com/articles/creating-pages-with-the-automatic-generator
下载ok了，之后修改的步骤与master相同。
使用git pull origin gh-pages拉到最新代码
提交使用
git add -A
git ci -m 'log'
git push origin gh-pages

感觉挺好的。。。以后会用~~ 希望持续更新~~

RT，
我测试了，使用节点ID去实例化，也不好用，
var slider_{$rand} = new fz.Scroll('#slider_{$rand}', {
role: 'slider',
indicator: true,
autoplay: true,
interval: 3000
});
这里可以保证rand是一个不同的值，有什么解决办法么？

如题 类似http://vycool.com/Jingle/demo/index.html#menu_section
或者是手机qq点击左上的头像的效果

再者是否有封装好的下拉刷新？

在Sony Z3机器上看到开通条的按钮文字偏上
链接地址是：http://www.isux.us/vas/demo/mobile/index/v3/dist/html/index.html
截图如下：

1. 使用grunt-markdown模板，去掉nico
2. 用手机做背景展示效果
3. 每个组件再增加介绍，包括组件使用范围，使用的解决方案，如何针对个性化重写
4. demo页面增加模板，现在公用部分都要手动改

下个版本会加上

.ui-select {
  position: relative; }
.ui-form-item .ui-select {
  margin-left: 95px;
}
.ui-select select {
  -webkit-appearance: none;
  border: 0;
  background: none;
  width: 100%; }

.ui-select:after {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -3px;
  width: 0;
  height: 0;
  border-top: 5px solid;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  color: #999;
  content: "";
  pointer-events: none; }

使用方式

<div class="ui-form ui-border-t">
    <form action="#" >
        <div class="ui-form-item ui-border-b">
            <label for="#">账号</label>
            <div class="ui-select">
                <select>
                    <option>Blue</option>
                    <option selected="">Green</option>
                    <option>Red</option>
                </select>
            </div>
        </div>
    </form>
</div>

当使用slider ，有js动画的时候，avatar ，PC下Chrome的圆角效果无效，手机端每当slider动一下，圆角头像就变方一下。应该是border-radius和translate 属性发生冲突。

图片上传失败了，你们自己试试吧。

引用地址:

http://i.gtimg.cn/vipstyle/frozenui/1.2.1/css/frozen.css?_bid=306

http://i.gtimg.cn/vipstyle/frozenui/1.2.1/css/global.css?_bid=306

修改内容

1. 修改ui-tab的样式，修复了两条线没贴在一起的问题

2. 修改ui-slider的样式，主要是圆点的样式，提供padding-top解决图片未加载时高度不定的解决方案

3. 修改ui-list中active时线在中间的问题，并_去掉文字截断_，增加普通图片链接列表

4. 增加ui-nowrap和ui-nowrap-multi辅助类控制文字截断

5. 修改ui-badge红点的大小

6. 增加ui-badge-num和ui-badge-cornernum数字提醒

7. 增加ui-arrowlink带箭头的链接辅助类

8. 增加ui-grid-halve两列和ui-grid-trisect三列图片布局，提供padding-top解决图片未加载时高度不定的解决方案

9. 增加ui-btn-s小按钮和ui-btn-progress百分比按钮

10. ui-avatar独立成单独css

11. 增加进度条ui-progress

12. 独立ui-tooltips-vip会员栏，放在vip目录

13. dom修改，增加ui-btn-vip，会员栏中的按钮，放在vip目录，会员栏的结构相应需要修改：

    <div class="ui-tooltips ui-tooltips-vip">
        <div class="ui-tooltips-cnt">
            <i class="ui-icon-yearsvip"></i>
            <span>超级会员专享酷炫个性名片！</span>
            <button class="ui-btn ui-btn-primary">续费</button>
        </div>
    </div>
    

    改为

    <div class="ui-tooltips-vip">
        <div class="ui-tooltips-cnt">
            <i class="ui-icon-yearsvip"></i>
            <span>超级会员专享酷炫个性名片！</span>
            <button class="ui-btn-vip">续费</button>
        </div>
    </div>
    

14. dom修改，修改铭牌ui-tag的选中态ui-tag-selected的位置，修改铭牌的结构使铭牌位置从文字右边改到图片右下角，例：

    <li class="ui-tag-svip">
        <div class="ui-grid-halve-img">
           <span style="background-image:url(http://placehold.sinaapp.com//?190*284)"></span>
        </div>
        <h4>高尔夫 <span>2.3M</span></h4>
    </li>
    

    改为

    <li>
        <div class="ui-grid-halve-img ui-tag-vip">
           <span style="background-image:url(http://placehold.sinaapp.com//?190*284)"></span>
        </div>
        <h4>高尔夫 <span>2.3M</span></h4>
    </li>
    

注意只换css不修改dom结构铭牌会有_错位_的问题

另增加星影ui-tag-xy,活动ui-tag-act,限免ui-tag-limit，限量ui-tag-last等铭牌。

PS：有按需打包到页面的需求可以使用combo：

<link media="all" href="http://i.gtimg.cn/c/=/vipstyle/frozenui/1.2.1/css/reset.css,/vipstyle/frozenui/1.2.1/css/ui-notice.css" rel="stylesheet">