改改名

日期: 2015年4月3日

  • flex弹性盒子

    概述

    UI3.0使用弹性盒子对页面进行布局，ui-box.css中就定义了弹性盒子的一些css3样式，弹性盒子模型是在指定大小的父容器里来为子元素分配空间，使用box架构可以更容易更方便的适配不同分辨率不同屏幕尺寸的手机

    CSS Variables

    Box架构

    定义：
    ub……
    说明：
    使用box弹性盒子模式对页面进行布局
    例子：
    ub定义元素的display属性为box。那么子元素就可以根据我们定义的比例来分配元素的空间，ub一般跟ub-f[1-4]搭配着使用

    Box架构元素空间大小分配比例

    定义：
    ub-f……
    说明：
    定义不同的box-flex属性值
    类别使用数字编号，定义不同的元素空间大小分配比例
    例子：

    ub-f1数字编号为1；定义box-flex：1
    ub-f1数字编号为2；定义box-flex：2
    ub-f1数字编号为3；定义box-flex：3
    ub-f1数字编号为4；定义box-flex：4
    ub-f[1-4]和ub搭配着使用

    解析：
    1、若子元素都使用ub-f1，那么子元素等比例的分配父元素的空间大小

    1. <div class='ub c-gra uba b-bla umh5'>
    2. <div class='ub-f1 sc-bg-alert'></div>
    3. <div class='ub-f1 bc-head'></div>
    4. </div>

    2、若子元素一个用ub-f1，另外一个用ub-f2.，那么子元素按照1：2的比例分配父元素的空间大小

    1. <div class='ub c-gra uba b-bla umh5'>
    2. <div class='ub-f1 sc-bg-alert'></div>
    3. <div class='ub-f2 bc-head'></div>
    4. </div>


    3、若子元素分别使用ub-f1，ub-f2，ub-f3，那么子元素会按照1：2：3的比例分配父元素的空间大小

    1. <div class='ub c-gra uba b-bla umh5'>
    2. <div class='ub-f1 sc-bg-alert'></div>
    3. <div class='ub-f2 bc-head'></div>
    4. <div class='ub-f3 sc-bg-active'></div>
    5. </div>


    4、若子元素中只有一个使用ub-f1，另外一个元素根据内容的多少定义大小，那么使用ub-f1的元素会自动适配元素的剩余空间大小

    1. <div class='ub c-gra uba b-bla umh5'>
    2. <div class='sc-bg-alert'>内容</div>
    3. <div class='ub-f1 bc-head'></div>
    4. </div>

    ub-f[1-4]和ub搭配着使用
    场景：

    1. <div class='uba b-gra c-wh us uc-a '>
    2. <div ontouchstart='zy_touch('btn-act')' class='uc-t ubb ub b-gra t-bla ub-ac lis umh4'>
    3. <div class='ub-f1 ut-s'>设置</div>
    4. <div class='tx-r t-blu ulev-1'>Old Phone</div>
    5. <div class='res8 lis-sw ub-img'></div>
    6. </div>
    7. <div ontouchstart='zy_touch('btn-act')' class=' ub ubb b-gra t-bla ub-ac lis umh4'>
    8. <div class='ub-f1 ut-s'>设置</div>
    9. <div class='tx-r t-blu ulev-1'>Old Phone</div>
    10. <div class='res8 lis-sw ub-img'></div>
    11. </div>
    12. <div ontouchstart='zy_touch('btn-act')' class='uc-b ub t-bla ub-ac lis umh4'>
    13. <div class='ub-f1 ut-s'>设置</div>
    14. <div class='tx-r t-blu ulev-1'>Old Phone</div>
    15. <div class='res8 lis-sw ub-img'></div>
    16. </div>
    17. </div>

    图例：

    Box架构元素垂直方向的位置排列

    定义：
    ub-ac，ub-ae……
    说明：

    ub-ac：垂直居中
    ub-ae：位于底边
    只有跟ub搭配着使用ub-ac，ub-ae的作用才生效

    例子：
    1、未使用ub-ac，ub-ae

    1. <div class='ub uinn umh4 uba b-gra uc-a'>
    2. <div class='ub-f1'>内容</div>
    3. <div class='res8 lis-sw ub-img'></div>
    4. </div>


    2、使用ub-ac

    1. <div class='ub uinn umh4 uba b-gra uc-a ub-ac'>
    2. <div class='ub-f1'>内容</div>
    3. <div class='res8 lis-sw ub-img'></div>
    4. </div>


    3、使用ub-ae

    1. <div class='ub uinn umh4 uba b-gra uc-a ub-ae'>
    2. <div class='ub-f1'>内容</div>
    3. <div class='res8 lis-sw ub-img'></div>
    4. </div>


    场景：

    1. <div class='uba b-gra c-wh us uc-a '>
    2. <div ontouchstart='zy_touch('btn-act')' class='uc-t ubb ub b-gra t-bla ub-ac lis'>
    3. <div class='lis-icon ub-img im'></div>
    4. <div class='ub-f1 ut-s'>设置</div>
    5. <div class='tx-r t-blu ulev-1'>Old Phone</div>
    6. <div class='res8 lis-sw ub-img'>></div>
    7. </div>
    8. <div ontouchstart='zy_touch('btn-act')' class=' ub ubb b-grat-bla ub-ac lis'>
    9. <div class='lis-icon ub-img im'></div>
    10. <div class='ub-f1 ut-s'>设置</div>
    11. <div class='tx-r t-blu ulev-1'>Old Phone</div>
    12. <div class='res8 lis-sw ub-img'></div>
    13. </div>
    14. <div ontouchstart='zy_touch('btn-act')' class='uc-b ub t-bla ub-ac lis'>
    15. <div class='lis-icon ub-img im'></div>
    16. <div class='ub-f1 ut-s'>设置</div>
    17. <div class='tx-r t-blu ulev-1'>Old Phone</div>
    18. <div class='res8 lis-sw ub-img'></div>
    19. </div>
    20. </div>

    图例：

    Box架构元素水平方向的位置排列

    定义：
    ub-pc，ub-pe，ub-pj……
    说明：

    ub-pc：水平居中
    ub-pe：位于末尾
    ub-pj：两端对齐
    只有跟ub搭配着使用ub-pc，ub-pe，ub-pj的作用才生效

    例子：
    1、未使用ub-pc，ub-pe，ub-pj

    1. <div class='uinn2 c-gra ub'> <div class='umh5 umw3 sc-bg-alert'></div>
    2. <div class='umh5 umw3 bc-head'></div>
    3. <div class='umh5 umw3 sc-bg-active'></div>
    4. </div>

    2、使用ub-pc

    1. <div class='uinn2 c-gra ub-pc ub uba b-bla'>
    2. <div class='umh5 umw3 sc-bg-alert'></div>
    3. <div class='umh5 umw3 bc-head'></div>
    4. <div class='umh5 umw3 sc-bg-active'></div>
    5. </div>


    3、使用ub-pe

    1. <div class='uinn2 c-gra ub-pe ub uba b-bla'>
    2. <div class='umh5 umw3 sc-bg-alert'></div>
    3. <div class='umh5 umw3 bc-head'></div>
    4. <div class='umh5 umw3 sc-bg-active'></div>
    5. </div>


    4、使用ub-pj

    1. <div class='uinn2 c-gra ub-pj ub uba b-bla'>
    2. <div class='umh5 umw3 sc-bg-alert'></div>
    3. <div class='umh5 umw3 bc-head'></div>
    4. <div class='umh5 umw3 sc-bg-active'></div>
    5. </div>

    Box架构元素垂直排列

    定义：
    ub-ver….
    说明：
    ub-ver：定义元素垂直排列
    只有跟ub搭配着使用ub-ver的作用才生效
    例子：
    1、未使用ub-ver

    1. <div class='uinn2 c-gra ub uba b-bla'>
    2. <div class='umh5 umw3 sc-bg-alert'></div>
    3. <div class='umh5 umw3 bc-head'></div>
    4. <div class='umh5 umw3 sc-bg-active'></div>
    5. </div>


    2、使用ub-ver

    1. <div class='uinn2 c-gra ub ub-ver uba b-bla'>
    2. <div class='umh5 umw3 sc-bg-alert'></div>
    3. <div class='umh5 umw3 bc-head'></div>
    4. <div class='umh5 umw3 sc-bg-active'></div>
    5. </div>

    Box架构元素排列方向

    定义：
    ub-rev……
    说明：
    ub-rev：定义元素排列方向
    只有跟ub搭配着使用ub-rev的作用才生效
    例子：
    1、未使用ub-rev

    1. <div class='uinn2 c-gra ub uba b-bla'>
    2. <div class='umh5 umw3 sc-bg-alert'></div>
    3. <div class='umh5 umw3 bc-head'></div>
    4. <div class='umh5 umw3 sc-bg-active'></div>
    5. </div>

    2、使用ub-rev

    1. <div class='uinn2 c-gra ub ub-rev uba b-bla'>
    2. <div class='umh5 umw3 sc-bg-alert'></div>
    3. <div class='umh5 umw3 bc-head'></div>
    4. <div class='umh5 umw3 sc-bg-active'></div>
    5. </div>

    Box架构实现横向滑动效果

    定义：
    ub-fh……
    说明：
    在box架构中ub-fh一般跟函数zyFlip（）搭配着使用实现横向滑动效果

    Box架构实现纵向滑动效果

    定义：
    ub-fv……
    说明：
    在box架构中ub-fv一般跟函数iScroll（）搭配着使用实现纵向滑动效果

    背景图片类别

    定义：
    ub-img[类别]……
    说明：
    前缀为ub-img
    类别为数字编号，用于定义不同的背景排列方式
    例子：

    ub-img类别为空，定义将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终包含在容器内
    ub-img1类别为1，定义将背景图片等比例缩放到完全覆盖容器，背景图像有可能超过容器
    ub-img2类别为2，定义背景图像横向平铺
    ub-img3类别为3，定义背景图像纵向平铺
    ub-img4类别为4，定义背景图像横向100%，纵向自适应;
    ub-img5类别为5，定义背景图像横向自适应，纵向为100%
    ub-img6类别为6，定义背景图像居中显示

    场景：

    1. <div class='uba b-gra c-wh us uc-a '>
    2. <div ontouchstart='zy_touch('btn-act')' class='uc-t ubb ub b-gra t-bla ub-ac lis'>
    3. <div class='lis-icon ub-img im'></div>
    4. <div class='ub-f1 ut-s'>设置</div>
    5. <div class='tx-r t-blu ulev-1'>Old Phone</div>
    6. <div class='res8 lis-sw ub-img'></div>
    7. </div>
    8. <div ontouchstart='zy_touch('btn-act')' class=' ub ubb b-gra t-bla ub-ac lis'>
    9. <div class='lis-icon ub-img im'></div>
    10. <div class='ub-f1 ut-s'>设置</div>
    11. <div class='tx-r t-blu ulev-1'>Old Phone</div>
    12. <div class='res8 lis-sw ub-img'></div>
    13. </div>
    14. <div ontouchstart='zy_touch('btn-act')' class='uc-b ub t-bla ub-ac lis'>
    15. <div class='lis-icon ub-img im'></div>
    16. <div class='ub-f1 ut-s'>设置</div>
    17. <div class='tx-r t-blu ulev-1'>Old Phone</div>
    18. <div class='res8 lis-sw ub-img'></div>
    19. </div>
    20. </div>

    图例：

    根本的就是

    <div style="width:300px; display:-webkit-box; display:box;">
<div style="-webkit-box-flex:1.0; border:1px solid #f00;">12</div>
<div style="-webkit-box-flex:2.0; border:1px solid #000;">12</div>
</div>

<div style="width:600px; display:-webkit-box;display:box;">
<div style="-webkit-box-flex:1; border:1px solid #f00"></div>
<div style="-webkit-box-flex:2; background:#ff0"></div>
</div>