网站开发之FrozenUI篇

作者: 平安喜乐698 | 来源:发表于2018-04-13 21:46 被阅读4745次

目录
    1. 简介
    2. 使用

demo

1. 简介

FrozenUI对html元素进行封装（腾讯QQ风格）
    简单易用，轻量快捷，为移动端服务的前端框架
    基于sass（css封装）

2. 使用

引入

<link rel="stylesheet" href="http://i.gtimg.cn/vipstyle/frozenui/2.0.0/css/frozen.css">

2.1 按钮

普通按钮

<div class="demo">
    <button class="ui-btn">普通按钮</button>
    <button class="ui-btn ui-btn-primary">主要按钮</button>
    <button class="ui-btn ui-btn-danger">警示按钮</button>
    <button class="ui-btn disabled">不可点击</button>
</div>

普通按钮

块状按钮

<div class="demo">
    <button class="ui-btn-lg">普通按钮</button>
    <button class="ui-btn-lg ui-btn-primary">主要按钮</button>
    <button class="ui-btn-lg ui-btn-danger">警示按钮</button>
    <button class="ui-btn-lg disabled">不可点击</button>
</div>

块状按钮

大按钮

<div class="demo">
    <button class="ui-btn-lg-nowhole">普通按钮</button>
    <button class="ui-btn-lg-nowhole ui-btn-primary">主要按钮</button>
    <button class="ui-btn-lg-nowhole ui-btn-danger">警示按钮</button>
    <button class="ui-btn-lg-nowhole ui-btn-danger disabled">不可点击</button>
</div>

大按钮

2.2 弹窗

通知

<section class="ui-notice">
    <i></I>
    <p>请检查网络</p>
    <div class="ui-notice-btn">
        <button class="ui-btn-primary ui-btn-lg">按钮</button>
    </div>
</section>

通知

类似iOS的UIActionSheet

<div class="ui-actionsheet show">
    <div class="ui-actionsheet-cnt am-actionsheet-down">
        <h4>同时会将我从对方的列表中删除</h4>
        <button>分享</button>
        <button class="ui-actionsheet-del">删除</button>
        <div class="ui-actionsheet-split-line"></div>
        <button id="cancel">取消</button>
    </div>
</div>

类似iOS的UIActionSheet

类似iOS的UIAlert

文字提示(带标题)
<div class="ui-dialog show">
    <div class="ui-dialog-cnt">
        <div class="ui-dialog-bd">
            <h3>下线通知</h3>
            <p>你的账号于17:00在一台Android手机登录。如非本人操作，密码可能已泄露，建议立即冻结账号。</p>
        </div>
        <div class="ui-dialog-ft">
            <button type="button" data-role="button">退出</button>
            <button type="button" data-role="button" class="btn-recommand">重新登录</button>
        </div>
    </div>
</div>

文字提示(不带标题)
<div class="ui-dialog show">
    <div class="ui-dialog-cnt">
        <div class="ui-dialog-bd">
            <p>将终止文件发送，确定返回？</p>
        </div>
        <div class="ui-dialog-ft">
            <button type="button" data-role="button">取消</button>
            <button type="button" data-role="button">确定</button>
        </div>
    </div>
</div>

复杂结构1
<div class="ui-dialog ui-dialog-function show">
    <div class="ui-dialog-cnt">
        <div class="ui-dialog-bd">
            <h3>发送到 seame芝麻</h3>
            <div class="ui-dialog-item">
                <div class="ui-img">
                    <span style="background-image:url(http://placeholder.qiniudn.com/140x140)"></span>
                </div>
                <div class="ui-dialog-info">
                    <h5 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h5>
                    <p class="ui-nowrap">这是内容，加ui-nowrap可以超出长度截断</p>
                    <span class="ui-nowrap">应用 开眼</span>
                </div>
            </div>
        </div>
        <div class="ui-dialog-ft">
            <button type="button" data-role="button">取消</button>
            <button type="button" data-role="button">确定</button>
        </div>
    </div>
</div>

复杂结构2
<div class="ui-dialog ui-dialog-operate show">
  <div class="ui-dialog-cnt">
    <div class="ui-dialog-hd">
        <div class="ui-img">
            <span style="background-image:url(http://placeholder.qiniudn.com/640x300)"></span>
        </div>
    </div>
    <div class="ui-dialog-bd">
        <h3>使用QQ钱包优惠购</h3>
        <p>参加天猫运动会，使用QQ钱包购买智能穿戴！分期0首付0手续费，放肆去浪！</p>
    </div>
    <div class="ui-dialog-ft">
            <button class="ui-btn-lg">立即查看</button>
        </div>
        <i class="ui-dialog-close" data-role="button"></I>
  </div>
</div>

复杂结构3
<div class="ui-dialog ui-dialog-operate show">
  <div class="ui-dialog-cnt">
    <div class="ui-dialog-hd">
        <div class="ui-img">
            <span style="background-image:url(http://placeholder.qiniudn.com/640x300)"></span>
        </div>
    </div>
    <div class="ui-dialog-bd">
        <p>按钮颜色根据运营氛围需要自行重置！</p>
    </div>
    <div class="ui-dialog-ft">
            <button type="button" data-role="button" class="ui-btn">查看详情</button>
            <button type="button" data-role="button" class="ui-btn">下个任务</button>
        </div>
        <i class="ui-dialog-close" data-role="button"></I>
  </div>
</div>

复杂结构4
<div class="ui-dialog ui-dialog-operate ui-dialog-operate-icon show">
  <div class="ui-dialog-cnt">
    <div class="ui-dialog-hd">
        <div class="ui-img">
            <span style="background-image:url(http://placeholder.qiniudn.com/420x220)"></span>
        </div>
    </div>
    <div class="ui-dialog-bd">
        <h3>恭喜你获得10个专属福袋！</h3>
    </div>
    <div class="ui-dialog-ft">
            <button class="ui-btn-lg">发福袋</button>
        </div>
        <i class="ui-dialog-close" data-role="button"></I>
  </div>
</div>

文字提示(带标题)

复杂结构1

复杂结构2

复杂结构3

复杂结构4

2.3 提示

普通提示

<div class="ui-tooltips">
    <div class="ui-tooltips-cnt ui-tooltips-cnt-link ui-border-b">
        无法连接服务器，请检查你的网络设置。
    </div>
</div>
<div class="ui-tooltips">
    <div class="ui-tooltips-cnt ui-border-b">
        无法连接服务器，请检查你的网络设置。<a class="ui-icon-close"></a>
    </div>
</div>

普通提示

警告提示

<div class="ui-tooltips ui-tooltips-warn">
    <div class="ui-tooltips-cnt ui-tooltips-cnt-link ui-border-b">
        <i></i>无法连接服务器，请检查你的网络设置。
    </div>
</div>
<div class="ui-tooltips ui-tooltips-warn">
    <div class="ui-tooltips-cnt ui-border-b">
        <i></i>无法连接服务器，请检查你的网络设置。<a class="ui-icon-close"></a>
    </div>
</div>

警告提示

引导提示

<div class="ui-tooltips ui-tooltips-guide">
    <div class="ui-tooltips-cnt ui-tooltips-cnt-link ui-border-b">
        <i class="ui-icon-talk"></i>进行时状态相关进行时状态相关进行时状态相关进行时状态相关
    </div>
</div>
<div class="ui-tooltips ui-tooltips-guide">
    <div class="ui-tooltips-cnt ui-border-b">
        <i></i>新手引导、新功能推荐、广告推广等。新手引导、新功能推荐、广告推广等。<a class="ui-icon-close"></a>
    </div>
</div>
<div class="ui-tooltips ui-tooltips-guide ui-tooltips-function">
    <div class="ui-tooltips-cnt ui-border-b">
        <i></i>新手引导、新功能推荐、广告推广等。新手引导、新功能推荐、广告推广等。<button class="ui-btn-s">开通</button>
    </div>
</div>

引导提示

底部提示

<div class="ui-tooltips ui-tooltips-guide ui-tooltips-action">
    <div class="ui-tooltips-cnt ui-border-b">
        <i></i>底部引导条<button class="ui-btn-s">开通</button><a class="ui-icon-close"></a>
    </div>
</div>

底部提示

2.4 图片

<div class="ui-feeds">
        <ul>
            <li>
                <img src="http://" alt="">
            </li>
        </ul>
</div>

多张显示（2-9）

<div class="ui-feeds">
    <ul>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
    </ul>
</div>

2张

3张

4张

5张

6张

7张

8张

9张

2.5 布局

float网格（适合多行）

每100为一行

<ul class="ui-row">
    <li class="ui-col ui-col-50">50</li>
    <li class="ui-col ui-col-50">50</li>
    <li class="ui-col ui-col-25">25</li>
    <li class="ui-col ui-col-75">75</li>
</ul>

float网格

flex网格

<div class="ui-row-flex ui-whitespace">
    <div class="ui-col ui-col">平均分</div>
    <div class="ui-col ui-col">平均分</div>
    <div class="ui-col ui-col">平均分</div>
    <div class="ui-col ui-col">平均分</div>
</div>
<div class="ui-row-flex ui-whitespace">
    <div class="ui-col ui-col-2">2/3</div>
    <div class="ui-col">1/3</div>
</div>

flex网格

竖排flex

<div class="ui-row-flex ui-whitespace ui-row-flex-ver">
    <div class="ui-col">1/2</div>
    <div class="ui-col">1/2</div>
</div>

竖列flex

三列(无交界线)

<div class="ui-grid ui-grid-trisect">
    <ul class="ui-border-b">
        <li>
            <div class="ui-img-vertical">
                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
            </div>
            <div class="ui-grid-info">
              <h4>高尔夫<span>2.3M</span></h4>
              <p>辅助信息</p>
            </div>
        </li>
        <li>
            <div class="ui-img-vertical">
                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
            </div>
            <div class="ui-grid-info">
              <h4>高尔夫<span>2.3M</span></h4>
              <p>辅助信息</p>
            </div>
        </li>
        <li>
            <div class="ui-img-vertical">
                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
            </div>
            <div class="ui-grid-info">
              <h4>高尔夫<span>2.3M</span></h4>
              <p>辅助信息</p>
            </div>
        </li>
        <li>
            <div class="ui-img-vertical">
                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
            </div>
            <div class="ui-grid-info">
              <h4>高尔夫<span>2.3M</span></h4>
              <p>辅助信息</p>
            </div>
        </li>
    </ul>
</div>

三列(无交界线)

三列

<div class="ui-grid ui-grid-trisect">
    <ul class="ui-border-b">
        <li>
            <div class="ui-img-vertical">
                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
            </div>
            <div class="ui-grid-info ui-border-r">
              <h4>高尔夫<span>2.3M</span></h4>
              <p>辅助信息</p>
            </div>
        </li>
        <li>
            <div class="ui-img-vertical">
                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
            </div>
            <div class="ui-grid-info ui-border-r">
              <h4>高尔夫<span>2.3M</span></h4>
              <p>辅助信息</p>
            </div>
        </li>
        <li>
            <div class="ui-img-vertical">
                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
            </div>
            <div class="ui-grid-info ui-border-r">
              <h4>高尔夫<span>2.3M</span></h4>
              <p>辅助信息</p>
            </div>
        </li>
        <li>
            <div class="ui-img-vertical">
                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
            </div>
            <div class="ui-grid-info ui-border-r">
              <h4>高尔夫<span>2.3M</span></h4>
              <p>辅助信息</p>
            </div>
        </li>
    </ul>
</div>

三列

两列

<div class="ui-grid ui-grid-bisect">
    <ul>
        <li>
            <div class="ui-img-horizontal">
                <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
            </div>
        </li>
        <li>
            <div class="ui-img-horizontal">
                <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
            </div>
        </li>
        <li>
            <div class="ui-img-horizontal">
                <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
            </div>
        </li>
        <li>
            <div class="ui-img-horizontal">
                <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
            </div>
        </li>
    </ul>
</div>

2列

2列（带文字）

<div class="ui-grid ui-grid-bisect">
    <ul>
        <li>
            <div class="ui-img-horizontal">
                <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
            </div>
            <div class="ui-grid-info ui-border-r">
              <h4>主要信息</h4>
              <p>辅助信息</p>
            </div>
        </li>
        <li>
            <div class="ui-img-horizontal">
                <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
            </div>
            <div class="ui-grid-info ui-border-r">
              <h4>主要信息</h4>
              <p>辅助信息</p>
            </div>
        </li>
        <li>
            <div class="ui-img">
                <span style="background-image:url(http://placeholder.qiniudn.com/290x290)"></span>
            </div>
            <div class="ui-grid-info ui-border-r">
              <h4>主要信息</h4>
              <p>辅助信息</p>
            </div>
        </li>
        <li>
            <div class="ui-img">
                <span style="background-image:url(http://placeholder.qiniudn.com/290x290)"></span>
            </div>
            <div class="ui-grid-info">
              <h4>主要信息</h4>
              <p>辅助信息</p>
            </div>
        </li>
    </ul>
</div>

2列（带文字）

图文排列(左右)

<div class="ui-grid-icon ui-grid-icon-horizontal">
    <ul>
      <li>
        <div class="ui-img-icon">
          <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span>
        </div>
          <h4>标题</h4>
      </li>
      <li>
        <div class="ui-img-icon">
          <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span>
        </div>
       <h4>标题</h4>
      </li>
    </ul>
</div>

图文排列(左右)

图文排列(上下)

<div class="ui-grid-icon ">
    <ul>
        <li>
          <div class="ui-img-icon">
            <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
          </div>
          <h5>标题</h5>
          <p>副标题</p>
        </li>
        <li>
          <div class="ui-img-icon">
            <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
          </div>
          <h5>标题</h5>
          <p>副标题</p>
        </li>
        <li>
          <div class="ui-img-icon">
            <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
          </div>
          <h5>标题</h5>
          <p>副标题</p>
        </li>
    </ul>
</div>

图文排列(上下)

2.6 列表

单行列表（纯文字）

<ul class="ui-list ui-list-single ui-list-link ui-border-tb">
    <li class="ui-border-t">
        <div class="ui-list-info">
            <h4 class="ui-nowrap">性别</h4>
            <div class="ui-txt-info">男</div>
        </div>
    </li>
    <li class="ui-border-t">
        <div class="ui-list-info">
            <h4 class="ui-nowrap">生日</h4>
            <div class="ui-reddot ui-reddot-static"></div>
        </div>
    </li>
</ul>

屏幕快照 2018-04-13 上午10.18.40.png

单行头像

<ul class="ui-list ui-list-link ui-list-single ui-border-tb">
    <li>
        <div class="ui-avatar-s">
            <span style="background-image:url(http://placeholder.qiniudn.com/68x68)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">ui-avatar-s单行头像</h4>
        </div>
    </li>
    <li>
        <div class="ui-avatar-s">
            <span style="background-image:url(http://placeholder.qiniudn.com/68x68)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">ui-avatar-s单行头像</h4>
        </div>
    </li>
    <li>
        <div class="ui-avatar-s">
            <span style="background-image:url(http://placeholder.qiniudn.com/68x68)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">ui-avatar-s单行头像</h4>
        </div>
    </li>
</ul>

单行头像

单行小缩略图

<ul class="ui-list ui-list-single ui-list-link ui-border-tb">
    <li>
        <div class="ui-list-thumb-s ui-border-t">
            <span style="background-image:url(http://placeholder.qiniudn.com/68x68)"></span>
        </div>
        <div class="ui-list-info">
            <h4 class="ui-nowrap">性别</h4>
            <div class="ui-txt-info">男</div>
        </div>
    </li>
    <li>
        <div class="ui-list-thumb-s">
            <span style="background-image:url(http://placeholder.qiniudn.com/68x68)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">生日</h4>
            <div class="ui-reddot ui-reddot-static"></div>
        </div>
    </li>
</ul>

单行小缩略图

单行缩略图

<ul class="ui-list ui-list-link ui-border-tb">
    <li>
        <div class="ui-list-thumb">
            <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">ui-list-thumb缩略图</h4>
        </div>
    </li>
    <li>
        <div class="ui-list-thumb">
            <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">ui-list-thumb缩略图</h4>
        </div>
    </li>
    <li>
        <div class="ui-list-thumb">
            <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">ui-list-thumb缩略图</h4>
        </div>
    </li>
</ul>

单行缩略图

双行文字头像+按钮

<ul class="ui-list ui-list-function ui-border-tb">
    <li>
        <div class="ui-avatar">
            <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">ui-avatar</h4>
            <p>双行头像</p>
        </div>
        <div class="ui-btn">PK</div>
    </li>
    <li>
        <div class="ui-avatar">
            <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">ui-avatar</h4>
            <p>双行头像</p>
        </div>
        <div class="ui-btn-s">PK</div>
    </li>
    <li>
        <div class="ui-avatar">
            <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">ui-avatar</h4>
            <p>双行头像</p>
        </div>
        <div class="ui-btn">PK</div>
    </li>
</ul>

双行文字头像+按钮

图片在右列表

<ul class="ui-list ui-list-nospace ui-border-tb">
    <li class="ui-border-t ui-arrowlink">
        <div class="ui-list-info">
            <h4 class="ui-nowrap">ui-list-icon</h4>
            <p class="ui-nowrap">两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行</p>
        </div>
    </li>
    <li class="ui-border-t">
        <div class="ui-list-info">
            <h4 class="ui-nowrap">ui-list-icon</h4>
            <p class="ui-nowrap">两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两</p>
        </div>
        <div class="ui-list-img-square">
            <span style="background-image:url(http://placeholder.qiniudn.com/188x188)"></span>
        </div>
    </li>
    <li class="ui-border-t">
        <div class="ui-list-info">
            <h4 class="ui-nowrap">ui-list-icon</h4>
            <p>两行</p>
        </div>
        <div class="ui-list-img-square">
            <span style="background-image:url(http://placeholder.qiniudn.com/188x188)"></span>
        </div>
    </li>
</ul>

图片在右列表

图文列表正方形固定大小

<ul class="ui-list ui-border-tb ">
    <li>
        <div class="ui-list-img-square">
            <span style="background-image:url(http://placeholder.qiniudn.com/188x188)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
            <p class="ui-nowrap">这是内容，加ui-nowrap可以超出长度截断</p>
        </div>
    </li>
    <li>
        <div class="ui-list-img-square">
            <span style="background-image:url(http://placeholder.qiniudn.com/188x188)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
            <p class="ui-nowrap">这是内容，加ui-nowrap可以超出长度截断</p>
        </div>
    </li>
</ul>

图文列表正方形固定大小

图文列表（垂直）

<ul class="ui-list ui-border-tb">
    <li>
        <div class=" ui-list-img-vertical">
            <span style="background-image:url(http://placeholder.qiniudn.com/216x308)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
            <p class="ui-nowrap">这是内容，加ui-nowrap可以超出长度截断</p>
        </div>
    </li>
    <li>
        <div class="ui-list-img-vertical">
            <span style="background-image:url(http://placeholder.qiniudn.com/216x308)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4>标题标题标题标题标题标题标题标题标题标题标题</h4>
        </div>
    </li>
</ul>

图文列表（垂直）

图文列表（水平）

<ul class="ui-list  ui-border-tb">
    <li class="active">
        <div class=" ui-list-img-horizontal">
            <span style="background-image:url(http://placeholder.qiniudn.com/268x188)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
            <p>这是内容</p>
            <p></p>
            <p></p>
        </div>
    </li>
    <li>
        <div class="ui-list-img-horizontal">
            <span style="background-image:url(http://placeholder.qiniudn.com/268x188)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4>标题标题标题标题</h4>
             <p>这是内容</p>
            <p></p>
            <p></p>
        </div>
    </li>
</ul>

图文列表（水平）

图文列表图片不固定大小

<ul class="ui-list ui-list-nospace ui-border-tb ">
    <li>
        <div class="ui-list-img">
            <div class="ui-img-vertical">
                <span style="background-image:url(http://placeholder.qiniudn.com/248x352)"></span>
            </div>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
            <p class="ui-nowrap">这是内容，加ui-nowrap可以超出长度截断</p>
        </div>
    </li>
    <li>
        <div class="ui-list-img">
            <div class="ui-img-vertical">
                <span style="background-image:url(http://placeholder.qiniudn.com/248x352)"></span>
            </div>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
            <p class="ui-nowrap">这是内容，加ui-nowrap可以超出长度截断</p>
        </div>
    </li>
</ul>

图文列表图片不固定大小

2.7 加载

局部加载中

<div class="ui-loading-wrap">
    <p>正在加载中...</p>
    <i class="ui-loading"></I>
</div>

局部加载中

页面加载中

<div class="ui-loading-block show">
    <div class="ui-loading-cnt">
        <i class="ui-loading-bright"></I>
        <p>正在加载中...</p>
    </div>
</div>

页面加载中

2.8 表单

通用

<div class="ui-form ui-border-t">
    <form action="">
        <div class="ui-form-item ui-border-b">
            <label>
                列表标题
            </label>
            <input type="text" placeholder="18位身份证号码">
            <a href="#" class="ui-icon-close">
            </a>
        </div>
        <div class="ui-form-item ui-form-item-link ui-border-b">
            <label>
                列表标题
            </label>
        </div>
        <div class="ui-form-item ui-form-item-link ui-border-b">
            <label>
                标题
            </label>
        </div>
        <div class="ui-btn-wrap">
            <button class="ui-btn-lg ui-btn-primary">
                确定
            </button>
        </div>
    </form>
</div>

通用

<div class="ui-form ui-border-t">
    <form action="">
        <div class="ui-form-item ui-form-item-pure ui-border-b">
            <input type="text" placeholder="列表标题">
            <a href="#" class="ui-icon-close"></a>
        </div>
        <p class="ui-form-tips">4/20</p>
    </form>
</div>

强引导类输入框

<section class="ui-input-wrap ui-border-t">
    <div class="ui-input ui-border-radius">
        <input type="text" name="" value="" placeholder="我也说一句...">
    </div>
    <button class="ui-btn">评论</button>
</section>
<section class="ui-input-wrap ui-border-t">
    <div class="ui-input ui-border-radius ui-input-text">
        <input type="text" name="" value="" placeholder="我也说一句...">
    </div>
</section>

强引导类输入框

表单开关项

<form action="">
      <div class="ui-form-item ui-form-item-switch ui-border-b">
          <p>
              对附近的人可见
          </p>
          <label class="ui-switch">
              <input type="checkbox">
          </label>
      </div>
      <div class="ui-form-item ui-form-item-switch ui-border-b">
          <p>
              对附近的人可见
          </p>
          <label class="ui-switch">
              <input type="checkbox" checked="">
          </label>
      </div>
  </form>

表单开关项

下拉框

<form action="">
    <div class="ui-form-item ui-border-b">
        <label>日期</label>
        <div class="ui-select-group">
            <div class="ui-select">
                <select>
                    <option>2014</option>
                    <option selected="">2015</option>
                    <option>2016</option>
                </select>
            </div>
            <div class="ui-select">
                <select>
                    <option>03</option>
                    <option selected="">04</option>
                    <option>05</option>
                </select>
            </div>
            <div class="ui-select">
                <select>
                    <option>21</option>
                    <option selected="">22</option>
                    <option>23</option>
                </select>
            </div>
        </div>
    </div>
    <div class="ui-form-item ui-border-b">
        <label>日期</label>
        <div class="ui-select">
            <select>
                <option>2014</option>
                <option selected="">2015</option>
                <option>2016</option>
            </select>
        </div>
    </div>
</form>

表单下拉框

单选框radio

<form action="">
    <div class="ui-form-item ui-form-item-radio ui-border-b">
        <label class="ui-radio" for="radio">
            <input type="radio" name="radio">
        </label>
        <p>表单中用于单选操作</p>
    </div>
    <div class="ui-form-item ui-form-item-radio ui-border-b">

        <label class="ui-radio" for="radio">
            <input type="radio" checked="" name="radio">
        </label>
        <p>表单中用于单选操作</p>
    </div>
</form>

表单单选项

多选框

<form action="">
    <div class="ui-form-item ui-form-item-checkbox ui-border-b">
        <label class="ui-checkbox">
            <input type="checkbox">
        </label>
        <p>表单中用于多选操作</p>
    </div>
    <div class="ui-form-item ui-form-item-checkbox ui-border-b">
        <label class="ui-checkbox">
            <input type="checkbox" checked="">
        </label>
        <p>表单中用于多选操作</p>
    </div>
</form>

表单多选项

普通列表中单选框

<ul class="ui-list ui-list-text ui-list-radio ui-border-tb">
    <li class="ui-border-t">
        <label class="ui-radio" for="radio">
            <input type="radio" name="radio">
        </label>
        <p>普通列表中用于单选操作</p>
    </li>
    <li class="ui-border-t">
        <label class="ui-radio" for="radio">
            <input type="radio" checked="" name="radio">
        </label>
        <p>普通列表中用于单选操作</p>
    </li>
</ul>

普通列表中单选项

普通列表中多选框

<ul class="ui-list ui-list-text ui-list-checkbox ui-border-b">
    <li class="ui-border-t">
        <label class="ui-checkbox">
            <input type="checkbox">
        </label>
        <p>普通列表中用于多选操作</p>
    </li>
    <li class="ui-border-t">
        <label class="ui-checkbox">
            <input type="checkbox" checked="">
        </label>
        <p>普通列表中用于多选操作</p>
    </li>
</ul>

普通列表中多选项

2.8 面板

默认面板

<section class="ui-panel ui-grid ui-grid-trisect">
    <h2 class="ui-arrowlink">猜你喜欢<span class="ui-panel-subtitle">1328条</span></h2>
    <ul>
        <li>
            <div class="ui-img-vertical">
                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
            </div>
            <div class="ui-grid-info ui-border-r">
                <h4 class="ui-nowrap-multi">我是主标题</h4>
                <p class="ui-nowrap">这里是副标题</p>
            </div>
        </li>
        <li>
            <div class="ui-img-vertical">
                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
            </div>
            <div class="ui-grid-info ui-border-r">
                <h4 class="ui-nowrap-multi">我是主标题</h4>
                <p class="ui-nowrap">这里是副标题</p>
            </div>
        </li>
        <li>
            <div class="ui-img-vertical">
                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
            </div>
            <div class="ui-grid-info ui-border-r">
                <h4 class="ui-nowrap-multi">我是主标题</h4>
                <p class="ui-nowrap">这里是副标题</p>
            </div>
        </li>
    </ul>
    <div class="ui-panel-more ui-border-tb">
        <span class="ui-arrowlink">查看全部</span>
    </div>
</section>

默认面板

居中面板

ui-panel-center 居中

<section class="ui-panel ui-panel-center ui-border-tb">
    <h2 class="ui-arrowlink"><span>标题文字</span><span class="ui-panel-title-tips">分类更多</span></h2>
</section>

居中面板

多行居中面板

<section class="ui-panel ui-panel-center-multi ui-border-tb">
    <h2 class="ui-arrowlink"><span>标题文字</span><span class="ui-panel-subtitle">副标题文字</span><span class="ui-panel-title-tips">分类更多</span></h2>
</section>

多行居中面板

2.9 进度条

<div class="ui-progress">
    <span style="width:50%"></span>
</div>

进度条

图片上进度条

<ul class="ui-grid-halve">
    <li>
        <div class="ui-grid-halve-img">
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
            <div class="ui-progress">
                <span style="width:50%"></span>
            </div>
        </div>
    </li>
</ul>

图片上进度条

2.10 搜索栏

<div  class="ui-searchbar-wrap ui-border-b">
    <div class="ui-searchbar ui-border-radius">
        <i class="ui-icon-search"></I>
        <div class="ui-searchbar-text">搜索号码（2-10位）</div>
        <div class="ui-searchbar-input"><input value="" type="tel" placeholder="搜索号码（2-10位）" autocapitalize="off"></div>
        <i class="ui-icon-close"></I>
    </div>
    <button class="ui-searchbar-cancel">取消</button>
</div>

搜索栏

2.11 角标

红色：
    ui-subscript-red
橙色：
    ui-subscript-orange
绿色：
    ui-subscript-green
蓝色：
    ui-subscript-blue
3个字：
    ui-subscript-trisection

<ul class="ui-grid-halve">
    <li>
        <div class="ui-grid-halve-img" style="overflow:hidden;">
            <i class="ui-subscript ui-subscript-red">最新</I>
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
        </div>
    </li>
</ul>

角标

2.12 选项卡

2项：
    3项则：li为3条，width:300%
    以此类推
<div class="ui-tab ">
    <ul class="ui-tab-nav ui-border-b ">
        <li class="current"><span>热门</span></li>
        <li><span>热门</span></li>
    </ul>
    <ul class="ui-tab-content" style="width:200%">
        <li>内容1</li>
        <li>内容2</li>
    </ul>
</div>

2项

网站开发之FrozenUI篇

1. 简介

2. 使用

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

网站开发之HTML基础快速恢复