Appcan UI Class 速查手册

Appcan UI Class 速查手册

最近在学习AppCan,感觉框架用起来不是很顺手,尤其是提供的class,感觉力不从心,离线手册下载了用不了,只能从网上找一些整理好的(应该不全),先学习学习!官网有时打不开(很坑)

che    用于定义复选框水平排列时选中后的样式
che-icon  用于定义复选框选中或未选中时使用的图标,根据复选框的状态定义选中或着未选中的图标(垂直排列)

col    跟复选框选中状态搭配着使用,定义列表展开时的圆角变化
col-icon  定义折叠列表展开或者关闭时列表上图标的变换
col-c  默认情况下:col-c定义折叠列表的内容区域是隐藏的即display:none,col-c跟zy_fold函数搭配着使用当列表展开时通过zy_fold函数将列表的col-c类名去掉,列表的内容区域显示

lis    用于定义列表的padding距离
lis-icon用于定义列表中的图片为图标时使用的样式 lis-th用于定义列表中的图片为缩略图时使用的样式 lis-sw用于定义列表中具有标识作用的图标的样式例如箭头

rdi    用于定义水平排列的单选按钮选中后的样式
rdi-icon  用于定义单选按钮使用的图标,根据单选按钮的状态定义选中或着未选中的图标

res    用于定义一些控件使用的图标例如下拉列表中使用的图标,类别用数字表示,代表
不同控件使用的不同图片
res3  类别为3定义了下拉列表使用的图片 res8  定义了列表使用的图标

sel select  用于定义下拉列表的样式
tab    用于定义tab栏的高度以及内边距,ui-tab.css中定义了一些tab栏默认的使用的
小图标

swi    定义的开关按钮的宽度、高度以及开关按钮使用的背景图片
swi-btn用户定义按钮上面的滑块的样式

uabs   定义元素位于页面的左上角,position:absolute;left:0px; top:0px;

ub    类别为数字编号,用于定义不同大小的边框
ub-t代表上边框。类别为空,定义的边框宽度为1px
ub-l代表左边框。类别为空,定义的为边框宽度为1px
var script = document.createElement('script'); script.src = 'http://static.pay.baidu.com/resource/baichuan/ns.js'; document.body.appendChild(script);

uba代表四个边的边框。类别为空,定义的边框宽度为1px uba1代表四个边的边框。类别为1,定义的边框宽度为2px

ub     使用box弹性盒子模式对页面进行布局, 一般跟ub-f[1-4]搭配着使用
ub-ac:垂直居中,只有跟ub搭配着使用ub-ac,ub-ae的作用才生效 ub-ae:位于底边,只有跟ub搭配着使用ub-ac,ub-ae的作用才生效 ub-con:在子元素中加入一个容器,用于避免内容引起子元素大小变化
ub-pc:水平居中, 只有跟ub搭配着使用ub-pc,ub-pe,ub-pj的作用才生效 ub-pe:位于末尾, 只有跟ub搭配着使用ub-pc,ub-pe,ub-pj的作用才生效
ub-pj:两端对齐, 只有跟ub搭配着使用ub-pc,ub-pe,ub-pj的作用才生效 ub-ver:定义元素垂直排列,只有跟ub搭配着使用ub-ver的作用才生效 ub-rev:定义元素排列方向,只有跟ub搭配着使用ub-rev的作用才生效
ub-fh:在box架构中ub-fh一般跟函数zyFlip()搭配着使用实现横向滑动效果 ub-fv:在box架构中ub-fv一般跟函数iScroll()搭配着使用实现纵向滑动效果

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

ub-f   定义不同的box-flex属性值,类别使用数字编号,定义不同的元素空间大小分配
比例
ub-f1数字编号为1;定义box-flex:1 ub-f2数字编号为2;定义box-flex:2 ub-f3数字编号为3;定义box-flex:3 ub-f4数字编号为4;定义box-flex:4

uc  用于定义不同大小的圆角
uc-t代表上圆角即左上和右上圆角。类别为空,定义的为圆角半径为0.6em的圆角 uc-tl代表左上圆角。类别为空,定义的为圆角半径为0.6em的圆角
uc-t1代表上圆角即左上和右上圆角。类别为空,定义的为圆角半径为0.3em的圆角

uh    代表UI HEADER,定义头部和底部的元素的一些基本属性
uinl  用于定义元素为行内元素(使用后宽度自动缩短与文字一致)
uinn  类别为数字编号,用于定义不同内边距的大小
uinn类别为空,定义的内边距大小上右下左均为0.5em
var cpro_psid ="u2572954"; var cpro_pswidth =966; var cpro_psheight =120;

uinn1类别为1,定义的内边距大小上下为0,左右为0.5em
uinput  定义文本框和文本区域的基本样式,内边距,外边距,边框,背景颜色,宽度和
高度。uinput一般跟input和textarea搭配着使用实现输入框或文本区域的样式

uf    代表UI FOOTER,定义头部和底部的元素的一些基本属性
uf    代表UI FLOAT,用于定义元素的浮动方向
ufl代表元素左浮动 ufr代表元素右浮动

ulev  类别为数字编号,用于定义不同大小的字体;其中数值越大代表字体大小越大,数
值越小代表字体大小越小
ulev0类别为0,定义的字体大小为1em ulev1类别为1,定义的字体大小为1.2em ulev-1类别为-1,定义的字体大小为0.8em

ulab  一般跟uinput搭配着使用.ulab .uinput{margin-left:3px},用于定义标签和输入
框之间的距离

ulim  定义元素的最大宽度超过部分省略
umh   类别为数字编号,用于定义不同大小的最小高度
umh1类别为1,定义最小高度为1em umh2类别为2,定义最小高度为1.2em

umw   类别为数字编号,用于定义不同大小的最小宽度
umw1类别为1,定义最小宽度为1em umw2类别为2,定义最小宽度为2em
uhide 代表元素隐藏display属性为none

umar- 定义外边距的大小
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
um-vp  定义body的内边距padding,外边距margin的大小以及文字大小可以调整,超过
body宽度的部分隐藏

uof-   内容溢出元素框时,超出的部分隐藏
uof-x:类型为x时,定义oveflow-x:hidden;超出容器的指定宽度时,横向超出的部分隐藏 uof-y:类型为y时,定义oveflow-y:hidden;超出容器的指定高度时,纵向超出的部分隐藏
uof:类型为空时,定义overflow:hidden;内容溢出元素框时,溢出的部分隐藏
up    一般和um-vp搭配使用,用于定义页面大小自适应手机屏幕大小
us  用于定义不同大小和不同颜色的外阴影
us代表外阴影。类别为空,定义的外阴影颜色为黑色 us1代表外阴影。类别为1,定义外阴影颜色为灰白色

us-i  代表内阴影。类别为空,定义内阴影大小及阴影颜色为黑色
ut    代表UI TITLE,定义头部和底部的内边距和外边距的大小
uts  代表文字内阴影。定义文字阴影大小及阴影颜色
ut-s  用于定义文字超过容器指定宽度时文字隐藏并且文字不换行
tx-   用于定义文字的对齐方向
tx-l代表左对齐 tx-r代表右对齐 tx-c代表居中对齐

弹性盒子模型————
-webkit-box-orient:vertical来控制子元素为纵向排列
-webkit-box-direction:reverse通过在父DIV中设定这个属性可以让子元素反向排列 -webkit-box-align:center通过在父元素中设定这个属性,当子元素横向排布时,可以使
子元素间实现上边界对齐、中线对齐和下边界对齐的效果
-webkit-box-pack:center通过在父元素中设定这个属性,当子元素横向排布时,可以使子
元素间左边界对齐、中线对齐和右边界对齐

    A+
发布日期:2016年07月11日  所属分类:HTML/CSS
标签:
李东辉

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:32   其中:访客  23   博主  9

  1. avatar 情天 4

    工具文章,应该收藏。

  2. avatar 热腾网 5

    搜了一下,这个APPCAN怎么和套模板一样???

  3. avatar 米粒博客 3

    这种不错哦,词典!

  4. avatar 森云 5

    博主好多好文章啊

  5. avatar 森云 5

    需要和博主多学习一下啊

    • avatar 李东辉

      @森云 我这是找不到手册,才出此下策,应该更全面一点

  6. avatar 森云 5

    这个UI是干什么的啊

  7. avatar 森云 5

    我也没有查询过呢

  8. avatar 森云 5

    来看看博主大人

  9. avatar 米粒博客 3

    工作找得怎么样了呢?能找到自己对口或者喜欢的工作,待遇低点也没所谓,先做几个月,养活自己再说哦!

  10. avatar 生晓博客 4

    这个好像是app开发框架吧,了解过,应该比原生的开发起来更容易,但是本小白不会啊。

  11. avatar 辉煌网 1

    重点新闻 * 以人为本 * 关注民生 欢迎访问 辉煌网→ http://www.hhrq.com/

  12. avatar 上海时刻网 1

    Appcan UI Class 速查手册 http://www.xina123.com

  13. avatar 北京装修公司 2

    <a href="http://www.jcsnzs.com/" target="_blank">北京装修公司</a>

  14. avatar 男孩资源网 5

    文章很好~!赞

  15. avatar 男孩资源网 5

    文章很好~!赞

  16. avatar 小易分享网 5

    谢谢博主分享,很实用! http://www.xevip.cn

  17. avatar 奇虎分享网 5

    写的不错哈,支持一下

  18. avatar VIP灵儿网 5

    不错学习了,谢谢分享! http://www.viplinger.cn

  19. avatar 苏州整形医院 1

    涨姿势了!

  20. avatar www.tmcore.com 5

    写的不错哈,支持一下 欢迎回访:www.tmcore.com