app can ui框架实例讲解.ppt

AppCan UI介绍及UI控件
培训师:王天访
目录
UI 介绍
UI 开发框架
UI 控件
2
UI 介绍
AppCan内置了基于JQMobile方案的CSS UI框架。这个框架可以帮助开发者遵循一套规则下生成多变的效果。在实际商用应用开发过程中,它起到了帮助我们加快开发进度的作用。
3
框架布局
主干可以认为是整个页面的整体框架布局。通过下图我们看到,应用的页面都遵循标题+内容+底部栏的布局方式:
4
框架布局
基于上面的“标题+内容+底部栏”的布局方式。 AppCan UI也提供了简单的布局架构模板来适配这种布局。
header和footer部分是一个定高的区域(通过内容撑开)。content是一个弹性区域,它会占满page_0中除了header和footer外的区域。如果header和footer的高度变化,content的高度也会随之变化。
5
UI 文件
在项目的*.html文件代码中,对*.css的文件进行了引用:
6
UI文件
在AppCan UI架构中,我们进行了CSS类封装:常用的UI-:
类型
含义说明
font-
字体图库样式控制
ui-
弹性盒子,控制页面布局
ui-
对页面中元素的大小位置形状控制
ui-
对页面中元素的色彩进行控制

对Icon 进行设置

控制页面中表单元素的样式(输入框,文本区域,下拉列表,单选按钮,复选框)
7
Box架构
ub......
Box架构元素空间大小分配比例
ub-f......
Box架构元素垂直方向的位置排列
ub-ac,ub-ae......
Box架构元素水平方向的位置排列
ub-pc,ub-pe,ub-pj......
Box架构元素垂直排列
ub-ver
Box架构元素排列方向
ub-rev......
Box架构实现横向滑动效果
ub-fh......
Box架构实现纵向滑动效果
ub-fv......
背景图片类别
ub-img[类别]......
盒子模型
8
UI 基础框架Base
圆角类别
uc-[类型][类型][类别]......
uc uc-t uc-b uc-l uc-r uc-tr uc-tl uc-bl …
外阴影类别
us[类别]
us us1
内阴影类别
us-i[类别]
us-i
文字阴影
uts
uts
字体大小类别
ulev[类别]......
ulev2 ulev1 ulev0 … ulev-4
边框类别
ub[类型] [类别
uba uba1 ubt ubb ubr….
外边距类别
umar-[类型]......
umar-t umar-l umar-r umar-b umar-a
内边距类别
uinn[类别]......
uinn uinn1 uinn2 ….
文字对齐方向
tx-[类型]......
tx-l tx-r tx-c
9
UI开发框架
UI开发框架包括:UI框架的设计来源、分辨率适配、布局与定位、页面美化等相关内容。
10