AppCan 移动应用开发第一课 AppCan UI 详讲
APPCAN 移动应用开发第一课 AppCan UI 详讲
工欲善其事，必先利其器,要想学习好APPCAN 首先我们就要熟悉里面的规则，从今天开始我们就正式进入APPCAN 移动应用的开发。Let's go go go!
anim 动画
ui-anim.css
样式定义了一些跟甘薯zy_anim——push(),zy_anim_pop()搭配使用实现动画效果的元素所需的样式。
动画效果
定义：utra
说明:utra 定义 -webkit-transition：all 300ms ease-in 100ms， 所有可过渡的css属性，动画持续时间300ms，动画的过渡效果是缓慢型的，动画延迟时间100 ms
元素透明效果
定义：a-op
说明：a-op定义：opacity：0 跟函数zy_anim_push(),zy_anim_pop() 搭配使用实现动画在执行过程中元素由不透明到透明，或由透明到不透明的过渡效果。
动画类型
定义：a-mr，a-ml
说明：
a-mr 定义：-webkit -transform:translateX(100%)指定对象X轴（水平方向）向右移动。
a-ml 定义：-webkit-transform：translateX(100%)指定对象X轴（水平方向）向左平移。
UI.Base
圆角类别
定义：uc-[类型][类型][类别]
说明：
前缀为uc-，代表UI CORNER
类型为t带表TOP，l代表LEFT，b代表BOTTOM，r代表RIGHT，a代表ALL
类别为数字编号，用于定义不同大小的圆角
例子：
uc-t代表上圆角即左上和右上圆角。类别为空，定义的为圆角半径为0.6em的圆角
uc-tl代表左上圆角。类别为空，定义的为圆角半径为0.6em的圆角
uc-t1代表上圆角即左上和右上圆角。类别为空，定义的为圆角半径为0.3em的圆角
场景：
<div class='btn uba b-bla uinn5 c-blu c-m1 uc-a t-wh'>确定</div>
外阴影类别
定义：us[类别]......
定义：
us[类别]
说明：
前缀为us，代表UI SHADOW
类别为数字编号，用于定义不同大小和不同颜色的外阴影
例子：
us代表外阴影。类别为空，定义的外阴影颜色为黑色
us1代表外阴影。类别为1，定义外阴影颜色为灰白色
场景：
<div class='btn uba b-bla uinn5 c-blu2 c-m1 uc-a t-wh us'>确定</div>
图例：
（使用us外阴影效果）
内阴影类别
定义：us-i[类别]......
定义：
us-i[类别]
说明：
前缀为us-i，代表UI SHADOW INSET
类别为数字编号，用于定义不同大小和不同颜色的内阴影
例子：
us-i代表内阴影。类别为空，定义内阴影大小及阴影颜色为黑色
场景：
<div class='btn uba b-bla uinn5 c-blu2 c-m1 uc-a t-wh us-i'>确定</div>
图例：
文字阴影
定义：uts......
定义：uts
说明：
用于定义文字的阴影效果
例子：
uts代表内阴影。定义文字阴影大小及阴影颜色
场景：
<div class='btn uba uc-a b-bla uinn5 c-blu2 c-m1 t-wh uts'>确定</div>
图例：
body样式
定义：um-vp......
定义：
um-vp
说明：
um-vp代表UI MOBILE VIEWPORT
um-vp定义body的内边距padding，外边距margin的大小以及文字大小可以调整，超过body宽度的部分隐藏
场景：
<body class='um-vp'></body>
页面样式
定义：up......
定义：
up
说明：
up，代表UI PAGE
up一般和um-vp搭配使用，用于定义页面大小自适应手机屏幕大小
场景：
<body class='um-vp'><div class='up'></div></body>
<body class='um-vp'><div class='up'></div></body>
跟头部和底部有关的样式
定义：.uh,.uf......
定义：.uh, .uf .up .uh,.up .uf
说明：
uh，代表UI HEADER
uf，代表UI FOOTER
uh和uf定义头部和底部的元素的一些基本属性
场景：
<div id='page_0' class='up ub ub-ver' tabindex='0'>
<!--header开始-->
<div id='header' class='uh c-org c-m1 t-wh'>
<h1 class='ut ulev0 ut-s tx-c' tabindex='0'>AppCan</h1>
</div>
<!--header结束-->
<!--content开始-->
<div id='content' class='ub-f1 tx-l uinn2 t-bla ub-img6 res10'>
</div>
<!--content结束-->
<!--footer开始-->
<div id='footer' class='uf c-m2 c-bla t-wh'>
<h1 class='ut ulev-2 tx-c' tabindex='0'>(c) Copyright 3G2WIN and others 2011.
<br>
All rights reserved.
</h1>
</div>
<!--footer结束-->
</div>
图例：
头部和底部内文本区域的样式
定义：.ut......
定义：
.ut
说明：
ut，代表UI TITLE
定义头部和底部的内边距和外边距的大小
场景：
<div id='header' class='uh c-org c-m1 t-wh'>
<h1 class='ut ulev0 ut-s tx-c' tabindex='0'>AppCan</h1>
</div>
<div id='footer' class='uf c-m2 c-bla t-wh'>
<h1 class='ut ulev-2 tx-c' tabindex='0'>
(c) Copyright 3G2WIN and others 2011.
<br>
All rights reserved.
</h1>
</div>
浮动类别
定义：uf[类型]......
定义：
uf[类型]
说明：
前缀为uf，代表UI FLOAT
类型为l代表LEFT，r代表RIGHT
用于定义元素的浮动方向
例子：
ufl代表元素左浮动
ufr代表元素右浮动
字体大小类别
定义：ulev[类别]......
定义：ulev[类别]
说明：前缀为ulev
类别为数字编号，用于定义不同大小的字体；其中数值越大代表字体大小越大，数值越小代表字体大小越小
例子：
ulev0类别为0，定义的字体大小为1em
ulev1类别为1，定义的字体大小为1.2em
ulev-1类别为-1，定义的字体大小为0.8em
场景：
<div class=' ulev2 uinn c-blu c-m1 uc-a1 tx-c t-wh'>确定</div>
<div class=' ulev-1 uinn c-blu c-m1 uc-a1 tx-c t-wh'>确定</div>
图例：
限制宽度大小
定义：ulim......
定义：
ulim
说明：
ulim定义元素的最大宽度超过部分省略
例子：
ulev0类别为0，定义的字体大小为1em
ulev1类别为1，定义的字体大小为1.2em
ulev-1类别为-1，定义的字体大小为0.8em
场景：
<div class=' ulim ulev-1 uinn5 c-blu c-m1 uc-a1 tx-c t-wh'>确定确定确定确定确定确定</div>
图例：
ui-base.css
单行类别
定义：uinl......
定义：uinl说明：
用于定义元素为行内元素
场景：
<div class='btn uba b-bla uinn2 uinl c-blu c-m1 uc-a t-wh'>确定</div>
图例：
内边距类别
定义：uinn[类别]......
定义：uinn[类别]
说明：前缀为uinn
类别为数字编号，用于定义不同内边距的大小
例子：
uinn类别为空，定义的内边距大小上右下左均为0.5em
uinn1类别为1，定义的内边距大小上下为0，左右为0.5em
场景：
<div class='btn uba b-bla uinn c-blu c-m1 uc-a t-wh'>确定</div>
图例：
（使用uinn）
（使用uinn5）
最小高度类别
定义：umh[类别]......
定义：umh[类别]
说明：前缀为umh
类别为数字编号，用于定义不同大小的最小高度
例子：
umh1类别为1，定义最小高度为1em
umh2类别为2，定义最小高度为1.2em
场景：
<div class=' tx-c umh1 uinn c-bla c-m1 uc-a t-wh'>确定</div>
（使用umh1）
（使用umh3）
最小宽度类别
定义：umw[类别]......
定义：umw[类别]
说明：前缀为umw
类别为数字编号，用于定义不同大小的最小宽度
例子：
umw1类别为1，定义最小宽度为1em
umw2类别为2，定义最小宽度为2em
场景：
<div class=' uinn uinl c-bla umw1 c-m1 uc-a t-wh'>确定</div>
图例：
（使用uww1）
（使用umw3）
文字对齐方向
定义：tx-[类型]......
定义：tx-[类型]
说明：前缀为tx-
类型为l代表LETT,r代表RIGHT,c代表CENTER
用于定义文字的对齐方向
例子：
tx-l代表左对齐
tx-r代表右对齐
tx-c代表居中对齐
场景：
<div class=' uinn c-blu2 c-m1 uc-a1 tx-l t-wh'>确定</div>
图例：
（使用tx-l）
（使用tx-c）
超出指定宽度隐藏并且文字不换行
定义：ut-s......
定义：
ut-s
说明：
用于定义文字超过容器指定宽度时文字隐藏并且文字不换行
场景：
<div class='uinn c-blu2 c-m1 uc-a1 tx-c ut-s t-wh' style='width:5em;'>确定确定确定确定</div>
图例：
边框类别
定义：ub[类型] [类别]......
定义：
ub[类型] [类别]
说明：
前缀为ub
类型为t带表TOP，l代表LEFT，b代表BOTTOM，r代表RIGHT，a代表ALL
类别为数字编号，用于定义不同大小的边框
例子：
ub-t代表上边框。类别为空，定义的边框宽度为1px
ub-l代表左边框。类别为空，定义的为边框宽度为1px
uba代表四个边的边框。类别为空，定义的边框宽度为1px
uba1代表四个边的边框。类别为1，定义的边框宽度为2px
场景：
<div class='uba b-bla uinn c-blu c-m1 uc-a1 tx-c t-wh'>确定</div>
<div class='uba1 b-bla uinn c-blu c-m1 uc-a1 tx-c t-wh'>确定</div>
图例：
隐藏元素
定义：uhide......
定义：
uhide
说明：
代表元素隐藏display属性为none
场景：
<div class='uhide '>确定</div>
外边距类别
定义：umar-[类型]......
定义：
umar-[类型]
说明：
定义外边距的大小
类型为t代表TOP定义上边距大小， b代表BOTTOM定义下边距大小，l代表LEFT定义左边距大小，r代表RIGHT定义右边距大小，a代表ALL定义上、下、左、右四个方向的边距大小
例子：
umar-t代表上边距。定义的上边距的大小为margin-top：0.4em
umar-b代表下边距。定义的下边距的大小margin-bottom:0.4em
umar-l代表左边距。定义的下边距的大小margin-left:0.4em
umar-r代表下边距。定义的右边距的大小margin-right:0.4em
umar-a代表上下左右四个边的边距。定义margin：0.4em
场景：
<div class='btn b-bla uba uinn5 c-blu c-m1 uc-a1 tx-c t-wh'>确定</div>
<div class='btn uba b-bla umar-t uinn5 c-blu c-m1 uc-a1 t-wh'>确定</div>
图例：
内容溢出元素框时，超出的部分隐藏
定义：uof-[类型]......
定义：
uof-[类型]
说明：
uof-x：类型为x时，定义oveflow-x：hidden；超出容器的指定宽度时，横向超出的部分隐藏
uof-y：类型为y时，定义oveflow-y：hidden；超出容器的指定高度时，纵向超出的部分隐藏
uof：类型为空时，定义overflow：hidden；内容溢出元素框时，溢出的部分隐藏
定位元素
定义：uabs......
定义：uabs
说明：定义元素位于页面的左上角，position:absolute;left:0px; top:0px;
UI.box
ui2.0使用弹性盒子对页面进行布局，ui-box.css中就定义了弹性盒子的一些css3样式，弹性盒子模型是在指定大小的父容器里来为子元素分配空间，使用box架构可以更容易更方便的适配不同分别率不同屏幕尺寸的手机
CSS Variables
Box架构
定义：ub......
说明：使用box弹性盒子模式对页面进行布局
例子：
ub定义元素的display属性为box。那么子元素就可以根据我们定义的比例来分配元素的空间，ub一般跟ub-f[1-4]搭配着使用
Box架构元素空间大小分配比例
定义：ub-f......
定义：
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，那么子元素等比例的分配父元素的空间大小
<div class='ub c-gra uba b-bla umh5'>
<div class='ub-f1 c-org'></div>
<div class='ub-f1 c-blu2'></div>
</div>
2、若子元素一个用ub-f1，另外一个用ub-f2.，那么子元素按照1：2的比例分配父元素的空间大小
<div class='ub c-gra uba b-bla umh5'>
<div class='ub-f1 c-org'></div>
<div class='ub-f2 c-blu2'></div>
</div>
3、若子元素分别使用ub-f1，ub-f2，ub-f3，那么子元素会按照1：2：3的比例分配父元素的空间大小
<div class='ub c-gra uba b-bla umh5'>
<div class='ub-f1 c-org'></div>
<div class='ub-f2 c-blu2'></div>
<div class='ub-f3 c-pink'></div>
</div>
4、若子元素中只有一个使用ub-f1，另外一个元素根据内容的多少定义大小，那么使用ub-f1的元素会自动适配元素的剩余空间大小
<div class='ub c-gra uba b-bla umh5'>
<div class='c-org'>内容</div>
<div class='ub-f1 c-blu2'></div>
</div>
ub-f[1-4]和ub搭配着使用
场景：
<div class='uba b-gra c-wh us uc-a '>
<div ontouchstart='zy_touch('btn-act')' class='uc-t ubb ub b-gra t-bla ub-ac lis umh4'>
<div class='ub-f1 ut-s'>设置</div>
<div class='tx-r t-blu ulev-1'>Old Phone</div>
<div class='res8 lis-sw ub-img'></div>
</div>
<div ontouchstart='zy_touch('btn-act')' class=' ub ubb b-gra t-bla ub-ac lis umh4'>
<div class='ub-f1 ut-s'>设置</div>
<div class='tx-r t-blu ulev-1'>Old Phone</div>
<div class='res8 lis-sw ub-img'></div>
</div>
<div ontouchstart='zy_touch('btn-act')' class='uc-b ub t-bla ub-ac lis umh4'>
<div class='ub-f1 ut-s'>设置</div>
<div class='tx-r t-blu ulev-1'>Old Phone</div>
<div class='res8 lis-sw ub-img'></div>
</div>
</div>
图例：
ui-box.css
Box架构元素垂直方向的位置排列
定义：ub-ac，ub-ae......
定义：
ub-ac，ub-ae
说明：
ub-ac：垂直居中
ub-ae：位于底边
只有跟ub搭配着使用ub-ac，ub-ae的作用才生效
例子：
1、未使用ub-ac，ub-ae
<div class='ub uinn umh4 uba b-gra uc-a'>
<div class='ub-f1'>内容</div>
<div class='res8 lis-sw ub-img'></div>
</div>
2、使用ub-ac
<div class='ub uinn umh4 uba b-gra uc-a ub-ac'>
<div class='ub-f1'>内容</div>
<div class='res8 lis-sw ub-img'></div>
</div>
3、使用ub-ae
<div class='ub uinn umh4 uba b-gra uc-a ub-ae'>
<div class='ub-f1'>内容</div>
<div class='res8 lis-sw ub-img'></div>
</div>
场景：
<div class='uba b-gra c-wh us uc-a '>
<div ontouchstart='zy_touch('btn-act')' class='uc-t ubb ub b-gra t-bla ub-ac lis'>
<div class='lis-icon ub-img im'></div>
<div class='ub-f1 ut-s'>设置</div>
<div class='tx-r t-blu ulev-1'>Old Phone</div>
<div class='res8 lis-sw ub-img'>></div>
</div>
<div ontouchstart='zy_touch('btn-act')' class=' ub ubb b-grat-bla ub-ac lis'>
<div class='lis-icon ub-img im'></div>
<div class='ub-f1 ut-s'>设置</div>
<div class='tx-r t-blu ulev-1'>Old Phone</div>
<div class='res8 lis-sw ub-img'></div>
</div>
<div ontouchstart='zy_touch('btn-act')' class='uc-b ub t-bla ub-ac lis'>
<div class='lis-icon ub-img im'></div>
<div class='ub-f1 ut-s'>设置</div>
<div class='tx-r t-blu ulev-1'>Old Phone</div>
<div class='res8 lis-sw ub-img'></div>
</div>
</div>
图例：
Box架构元素水平方向的位置排列
定义：ub-pc，ub-pe，ub-pj......
定义：
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
<div class='uinn2 c-gra ub'> <div class='umh5 umw3 c-org'></div>
<div class='umh5 umw3 c-blu2'></div>
<div class='umh5 umw3 c-pink'></div>
</div>
2、使用ub-pc
<div class='uinn2 c-gra ub-pc ub uba b-bla'>
<div class='umh5 umw3 c-org'></div>
<div class='umh5 umw3 c-blu2'></div>
<div class='umh5 umw3 c-pink'></div>
</div>
3、使用ub-pe
<div class='uinn2 c-gra ub-pe ub uba b-bla'>
<div class='umh5 umw3 c-org'></div>
<div class='umh5 umw3 c-blu2'></div>
<div class='umh5 umw3 c-pink'></div>
</div>
4、使用ub-pj
<div class='uinn2 c-gra ub-pj ub uba b-bla'>
<div class='umh5 umw3 c-org'></div>
<div class='umh5 umw3 c-blu2'></div>
<div class='umh5 umw3 c-pink'></div>
</div>
Box架构元素垂直排列
定义：ub-ver......
定义：
ub-ver
说明：
ub-ver：定义元素垂直排列
只有跟ub搭配着使用ub-ver的作用才生效
例子：
1、未使用ub-ver
<div class='uinn2 c-gra ub uba b-bla'>
<div class='umh5 umw3 c-org'></div>
<div class='umh5 umw3 c-blu2'></div>
<div class='umh5 umw3 c-pink'></div>
</div>
2、使用ub-ver
<div class='uinn2 c-gra ub ub-ver uba b-bla'>
<div class='umh5 umw3 c-org'></div>
<div class='umh5 umw3 c-blu2'></div>
<div class='umh5 umw3 c-pink'></div>
</div>
Box架构元素排列方向
定义：ub-rev......
定义：ub-rev
说明：ub-rev：定义元素排列方向
只有跟ub搭配着使用ub-rev的作用才生效
例子：
1、未使用ub-rev
<div class='uinn2 c-gra ub uba b-bla'>
<div class='umh5 umw3 c-org'></div>
<div class='umh5 umw3 c-blu2'></div>
<div class='umh5 umw3 c-pink'></div>
</div>
2、使用ub-rev
<div class='uinn2 c-gra ub ub-rev uba b-bla'>
<div class='umh5 umw3 c-org'></div>
<div class='umh5 umw3 c-blu2'></div>
<div class='umh5 umw3 c-pink'></div>
</div>
Box架构实现横向滑动效果
定义：ub-fh......
定义：ub-fh
说明：在box架构中ub-fh一般跟函数zyFlip（）搭配着使用实现横向滑动效果
Box架构实现纵向滑动效果
定义：ub-fv......
定义：ub-fv
说明：在box架构中ub-fv一般跟函数iScroll（）搭配着使用实现纵向滑动效果
背景图片类别
定义：ub-img[类别]......
定义： 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，定义背景图像居中显示
场景：
<div class='uba b-gra c-wh us uc-a '>
<div ontouchstart='zy_touch('btn-act')' class='uc-t ubb ub b-gra t-bla ub-ac lis'>
<div class='lis-icon ub-img im'></div>
<div class='ub-f1 ut-s'>设置</div>
<div class='tx-r t-blu ulev-1'>Old Phone</div>
<div class='res8 lis-sw ub-img'></div>
</div>
<div ontouchstart='zy_touch('btn-act')' class=' ub ubb b-gra t-bla ub-ac lis'>
<div class='lis-icon ub-img im'></div>
<div class='ub-f1 ut-s'>设置</div>
<div class='tx-r t-blu ulev-1'>Old Phone</div>
<div class='res8 lis-sw ub-img'></div>
</div>
<div ontouchstart='zy_touch('btn-act')' class='uc-b ub t-bla ub-ac lis'>
<div class='lis-icon ub-img im'></div>
<div class='ub-f1 ut-s'>设置</div>
<div class='tx-r t-blu ulev-1'>Old Phone</div>
<div class='res8 lis-sw ub-img'></div>
</div>
</div>
图例：
UI.btn
按钮位置
定义：btn-[位置]......
定义： btn-[位置]
说明： 前缀为btn
btn-l用于定义按钮居左显示，一般用于头部或底部跟uh，uf搭配着使用，例如.uh .btn-l,.uf.btn-l
btn-r用户定义按钮居右显示，一般用于头部或底部跟uh，uf搭配着使用，例如.uh .btn-r,.uf .btn-r
场景：
<div id='header' class='uh c-org c-m1 t-wh'>
<h1 class='ut ulev0 ut-s tx-c' tabindex='0'>
<div ontouchstart='zy_touch('btn-act')' class='btn uba b-bla uinn btn-l c-bla c-m1 uc-a t-wh'>确定</div>
AppCan
<div ontouchstart='zy_touch('btn-act')' class='btn uba b-bla uinn btn-r c-bla c-m1 uc-a t-wh'>确定</div>
</h1>
</div>
图例：
ui-btn.css
按钮类型
定义：btn-[类型]......
定义： btn-[类型]
说明： 前缀为btn
btn-a用于定义iphone风格的箭头按钮
btn-n用户定义iphone风格的编辑按钮，一般用于头部或底部
场景：
<div id='header' class='uh c-org c-m1 t-wh'>
<h1 class='ut ulev0 ut-s tx-c' tabindex='0'>
<div class='btn btn-l btn-a ub ub-ac '>
<div class='ulim'>按钮</div>
</div>
AppCan
<div class='btn btn-r btn-n ub ub-ac '>
<div class='ulim'>按钮</div>
</div>
</h1>
</div>
图例：
按钮
ui-btn.css
按钮样式
定义：btn......
定义： btn
说明： btn用于定义按钮中的字体大小、文字居中显示
图例：
（使用btn）
（未使用btn）
ui-btn.css
按钮激活状态
定义：btn-act......
定义： btn-act
说明： btn-act用于定义按钮激活时的状态，一般跟zy_touch（）函数搭配着使用实现效果
场景：
<div ontouchstart='zy_touch('btn-act')' class='btn uba b-bla uinn5 c-blu2 c-m1 uc-a t-wh'>确定</div>
图例：
（按钮正常状态）
（按钮激活时的状态）
UI.color
背景遮盖类别
定义：c-m[位置]......
定义： c-m[位置]
说明： 前缀为c-m
类别为数字编号，用于定义不同色彩的透明渐变遮盖层
例子：
c-m1类别为1，定义白色的透明渐变层
c-m2类别为2，定义另外一种白色的透明渐变层
c-m6类别为6，定义黑色的透明渐变层
c-m7类别为7，定义另外一种黑色的透明渐变层
ui2.0框架中一共提供了十二种渐变层其中c-m[1-5]是白色的透明渐变层，c-m[6-10]是黑色的透明渐变层
场景：
<div class='btn uba b-bla uinn5 c-blu c-m1 uc-a t-wh'>确定</div>
<div class='btn uba b-bla uinn5 c-blu c-m6 uc-a t-wh'>确定</div>
图例：
背景底色类别
定义：c-[色值][类别]......
定义： c-[色值][类别]
说明： 前缀为c-
色值为不同颜色
类别为数字编号，用于定义颜色的不同取值范围例如c-blu为深蓝色c-blu1为蓝色c-blu2为浅蓝色
例子：
c-bla，定义黑色底色
c-blu，定义深蓝色底色
c-blu1，定义蓝色底色
c-blu2，定义浅蓝色底色
c-red，定义红色底色
场景：
<div class='btn uba b-bla uinn5 c-bla uc-a t-wh'>确定</div>
<div class='btn uba b-bla uinn5 c-blu2 uc-a t-wh'>确定</div>
图例：
文字色彩类别
定义：t-[色彩][类别]......
定义： t-[色彩][类别]
说明： 前缀为t-
色彩是颜色的分类例如黑色，白色，红色
类别为数字编号，用于定义不同色彩，例如黑色里面也可以划分为不用颜色深度的黑色
例子：
t-bla，定义黑色文字色
t-wh，定义白色文字
t-blu，定义蓝色文字
场景：
<div class='btn uba b-bla uinn5 c-blu2 c-m1 uc-a t-wh'>确定</div>
<div class='btn uba b-bla uinn5 c-blu2 c-m1 uc-a t-bla'>确定</div>
图例：
边框色彩类别
定义：b-[色彩][类别]......
定义： b-[色彩][类别]
说明： 前缀为b-
色彩是颜色的分类例如黑色，白色，红色
类别为数字编号，用于定义不同色彩，例如黑色里面也可以划分为不用颜色深度的黑色
例子：
b-bla，定义黑色边框
b-wh，定义白色边框
b-blu，定义蓝色边框
场景：
<div class='btn uba1 b-bla uinn5 c-gra c-m1 uc-a t-bla'>确定</div>
<div class='btn uba1 b-blu uinn5 c-gra c-m1 uc-a t-bla'>确定</div>
图例：
UI.fold
折叠列表图片
定义：col-icon......
定义： col-icon
说明： 定义折叠列表展开或者关闭时列表上图标的变换
例子：
input[type=checkbox]+div >div.col-icon定义列表未展开时的图标
input[type=checkbox]:checked+div >div.col-icon定义列表展开后使用的图标
场景：
<div class='uba b-bla uc-a1 umar-b'>
<input type='checkbox' class='uhide'>
<div ontouchstart='zy_touch('btn-act')' onclick='zy_for(event,zy_fold);' class='uc-a1 t-wh ub uinn ub-ac c-m2 c-blu col ulev-1 umh4'>
<div class='ub-f1 ut-s'>确定</div>
<div class='umh1 umw1 ub-img col-icon c-bla uc-a'></div>
</div>
<div class='uinn umh6 t-bla us-i c-wh uc-b1 col-c'>
Insert Your Component at here;
</div>
</div>
列表展开时圆角的变化
定义：col......
定义： col
说明： col跟复选框选中状态搭配着使用，定义列表展开时的圆角变化
input[type=checkbox]:checked+div.col
场景：
<div class='uba b-bla uc-a1 umar-b'>
<input type='checkbox' class='uhide'>
<div ontouchstart='zy_touch('btn-act')' onclick='zy_for(event,zy_fold);' class='uc-a1 t-wh ub uinn ub-ac c-m2 c-blu col ulev-1 umh4'>
<div class='ub-f1 ut-s'>确定</div>
<div class='umh1 umw1 ub-img col-icon c-bla uc-a'></div>
</div>
<div class='uinn umh6 t-bla us-i c-wh uc-b1 col-c'>
Insert Your Component at here;
</div>
</div>
折叠列表的内容区域
定义：col-c......
定义： col-c
说明：
默认情况下：col-c定义折叠列表的内容区域是隐藏的即display:none，col-c跟zy_fold函数搭配着使用当列表展开时通过zy_fold函数将列表的col-c类名去掉，列表的内容区域显示
例子：
<div class='uba b-bla uc-a1 umar-b'>
<input type='checkbox' class='uhide'>
<div ontouchstart='zy_touch('btn-act')' onclick='zy_for(event,zy_fold);' class='uc-a1 t-wh ub uinn ub-ac c-m2 c-blu col ulev-1 umh4'>
<div class='ub-f1 ut-s'>确定</div>
<div class='umh1 umw1 ub-img col-icon c-bla uc-a'></div>
</div>
<div class='uinn umh6 t-bla us-i c-wh uc-b1 col-c'>
Insert Your Component at here;
</div>
</div>
UI.img
图片类别
定义：im[类别]......
定义： im[类别]
说明：类别用数字表示，代表不同图片
例子：
1、im类别为空，定义了列表中默认使用的图片
<div ontouchstart='zy_touch('btn-act')' class='uc-a uba ub b-gra t-bla ub-ac lis'>
<div class='lis-icon ub-img im'></div>
<div class='ub-f1 ut-s'>设置</div>
<div class='tx-r t-blu ulev-1'>Old Phone</div>
<div class='res8 lis-sw ub-img'></div>
</div>
2、im1、im2定义了带缩略图的列表中使用的资源图片
<div ontouchstart='zy_touch('btn-act')' class='uc-a uba ub b-gra t-bla ub-ac lis'>
<div class='lis-th ub-img im'></div>
<div class='ub-f1 ub ub-ver'>
<div class='ulev1'>标题名 </div>
<div class='ulev-1 umh4 t-gra'>文本说明 </div>
<div class='ub ub-ac t-gra ulev-2'>
<div class='umh2 umw2 ub-img im1' ></div>
<div class='ub-f1'>收藏数</div>
<div class='umh2 umw2 ub-img im2' ></div>
<div class='ub-f1'>评论数</div>
</div>
</div>
</div>
UI.input
输入框和文本区域的样式
定义： uinput
说明： 定义文本框和文本区域的基本样式，内边距，外边距，边框，背景颜色，宽度和高度
uinput一般跟input和textarea搭配着使用实现输入框或文本区域的样式
例如.uinput input，.uinput textarea
例子：
<div class=' uba uc-a1 b-col1 us-i uinput uinn4'>
<input placeholder='hello' type='text' class='uc-a1'>
</div>
带标签时输入框和文本区域的样式
定义：ulab......
定义：ulab
说明： ulab一般跟uinput搭配着使用.ulab .uinput{margin-left:3px}，用于定义标签和输入框之间的距离
例子：
<div class='ub t-bla ulab'>
<div class='uinn ulim'>标签标签</div>
<div class='ub-f1 uba uc-a1 b-bla us-i uinput uinn4'>
<input placeholder='hello' type='text' class='uc-a1'>
</div>
</div>
单选按钮（垂直排列）
定义：rdi-icon......
定义:rdi-icon
说明：
用于定义单选按钮使用的图标
根据单选按钮的状态定义选中或着未选中的图标
例子：
input[type='radio']:checked + div > div.rdi-icon定义垂直排列的单选按钮选中后使用的图片的图片
input[type=radio]+div>div.rdi-icon定义垂直排列的单选按钮未选中时使用的图片
场景：
<input type='radio' name='rdi1' class='uhide' checked='checked' id='radio-1-1' value=''>
<div onclick='zy_for(event)' ontouchstart='zy_touch('btn-act')' class=' ub uc-a1 uba c-bla c-m2 b-bla t-wh ui-rdi uinn5'>
<div class='ub-f1 ut-s tx-l' style=''>item</div>
<div class='rdi-icon ub-img umw1' ></div>
</div>
单选按钮（水平排列）
定义：rdi......
定义：rdi
说明： 用于定义水平排列的单选按钮选中后的样式
例子：
input[type='radio']:checked + div.rdi
场景：
<div class='ub uc-a1 t-wh c-bla c-m2 uba b-bla tx-c'>
<input type='radio' name='rdi1' class='uhide' value=''><div onclick='zy_for(event)' class='uinn5 ubr b-bla uc-l1 ub-f1 che'>item </div>
<input type='radio' name='rdi1' class='uhide' value=''>
<div onclick='zy_for(event)' class='uinn5 ubr b-bla ub-f1 che'>item</div>
<input type='radio' name='rdi1' class='uhide' value=''>
<div onclick='zy_for(event)' class='uinn5 b-bla uc-r1 ub-f1 che'>item</div>
</div>
复选框（垂直排列）
定义：che-icon......
定义： che-icon
说明：
用于定义复选框选中或未选中时使用的图标
根据复选框的状态定义选中或着未选中的图标
例子：
input[type=checkbox]+div>div.che-icon定义垂直排列的复选框未选中时使用的图片
input[type=checkbox]:checked+div>div.che-icon定义垂直排列的复选框选中后使用的图片
场景：
<div class='btn uba b-bla uinn5 c-blu2 c-m1 uc-a t-wh'>确定</div>
<div class='btn uba b-bla uinn5 c-blu2 c-m1 uc-a t-bla'>确定</div>
复选框（水平排列）
定义：che......
定义:che
说明:用于定义复选框水平排列时选中后的样式
例子： input[type=checkbox]:checked+div.che
场景：
<div class='btn uba1 b-bla uinn5 c-gra c-m1 uc-a t-bla'>确定</div>
<div class='btn uba1 b-blu uinn5 c-gra c-m1 uc-a t-bla'>确定</div>
下拉列表
定义：sel select......
说明： 用于定义下拉列表的样式
例子：
场景：
<div class='btn uba1 b-bla uinn5 c-gra c-m1 uc-a t-bla'>确定</div>
<div class='btn uba1 b-blu uinn5 c-gra c-m1 uc-a t-bla'>确定</div>
UI.list
列表样式
定义：lis......
说明：
lis用于定义列表的padding距离
例子：
<div ontouchstart='zy_touch('btn-act')' class='uc-a uba ub b-gra t-bla ub-ac umh4 lis'>
<div class='ub-f1 ut-s'>设置</div>
<div class='tx-r t-blu ulev-1'>Old Phone</div>
<div class='res8 lis-sw ub-img'></div>
</div>
图例：
列表图片定义：lis-[图片类型]......
定义： lis-[图片类型]
说明：
前缀为lis-
lis-icon用于定义列表中的图片为图标时使用的样式
lis-th用于定义列表中的图片为缩略图时使用的样式
lis-sw用于定义列表中具有标识作用的图标的样式例如箭头
例子：
1、使用lis-icon，定义列表图标
<div ontouchstart='zy_touch('btn-act')' class='uc-a uba ub b-gra t-bla ub-ac lis'>
<div class='lis-icon ub-img im'></div>
<div class='ub-f1 ut-s'>设置</div>
<div class='tx-r t-blu ulev-1'>Old Phone</div>
<div class='res8 lis-sw ub-img'></div>
</div>
2、使用lis-sw，定义列表中使用具有标识作用的图标的的宽度样式
<div ontouchstart='zy_touch('btn-act')' class='uc-a uba ub b-gra t-bla ub-ac lis umh4'>
<div class='ub-f1 ut-s'>设置</div>
<div class='tx-r t-blu ulev-1'>Old Phone</div>
<div class='res8 lis-sw ub-img'></div>
</div>
3、使用lis-th，定义列表中的缩略图
<div ontouchstart='zy_touch('btn-act')' class='uc-a uba ub b-gra t-bla ub-ac lis'>
<div class='lis-th ub-img im'></div>
<div class='ub-f1 ub ub-ver'>
<div class='ulev1'>标题名 </div>
<div class='ulev-1 umh4 t-gra'>文本说明 </div>
<div class='ub ub-ac t-gra ulev-2'>
<div class='umh2 umw2 ub-img im1' ></div>
<div class='ub-f1'>收藏数</div>
<div class='umh2 umw2 ub-img im2' ></div>
<div class='ub-f1'>评论数</div>
</div>
</div>
</div>
UI.on
开关按钮
定义：swi-[类型]......
定义： swi-[类型]
说明： 前缀为swi
用于定义开关按钮使用的背景图片以及开关按钮的样式
例子：
swi定义的开关按钮的宽度、高度以及开关按钮使用的背景图片
swi-btn用户定义按钮上面的滑块的样式
input + div>div.swi-btn定义开关按钮处于关闭状态时的样式
input:checked + div>div.swi-btn定义开关按钮处于打开状态时的样式
场景：
<input class='uhide' type='checkbox'>
<div class='swi uc-a1 uba b-gra' ontouchstart='zy_touch('',zy_for)'>
<div class='uabs swi-btn us uc-a1' ></div>
</div>
UI.res
控件图标类别
定义：res[类别]......
定义： res[类别]
说明：
用于定义一些控件使用的图标例如下拉列表中使用的图标
类别用数字表示，代表不同控件使用的不同图片
例子：
1、res3类别为3定义了下拉列表使用的图片
<div class='ub uba1 uc-a1 c-wh b-bla us-i sel'>
<div class='ub-f1 ut-s uinn ulev-1 tx-l'>下拉列表</div>
<div class='ubl b-bla c-bla c-m2 umw2 ub ub-pc uc-r2 ub-ac'>
<div class='ub-img umw1 umh1 res3'></div>
</div>
<select name='sel0' selectedindex='0' id='sel0' onchange='zy_slectmenu(this.id)'>
<option>item1</option>
<option>item2</option>
<option>item3</option>
<option>item4</option>
</select>
</div>
2、res8定义了列表使用的图标
<div ontouchstart='zy_touch('btn-act')' class='uc-a uba ub b-gra t-bla ub-ac lis'>
<div class='lis-icon ub-img im'></div>
<div class='ub-f1 ut-s'>设置</div>
<div class='tx-r t-blu ulev-1'>Old Phone</div>
<div class='res8 lis-sw ub-img'></div>
</div>
UI.tab
Tab栏
定义：tab......
定义:tab
说明：用于定义tab栏的高度以及内边距
例子：
ui-tab.css中定义了一些tab栏默认的使用的小图标
input[type='radio'] + div>div.tp-info定义tab中有信息选项卡时使用的图标
input[type='radio']:checked + div>div.tp-info定义tab中信息选项卡激活选中后使用的图标
ui-tab.css中一共提供了五种图标的组合