App Can UI框架实例讲解课件

1、AppCan UI介绍及介绍及UI控件控件培训师：王天访2目 录UI 介绍UI 开发框架 UI 控件3 UI 介绍AppCan内置了基于JQMobile方案的CSS UI框架。这个框架可以帮助开发者遵循一套规则下生成多变的效果。在实际商用应用开发过程中，它在实际商用应用开发过程中，它起到了帮助我们加快开发进度的作用。起到了帮助我们加快开发进度的作用。4框架布局框架布局主干可以认为是整个页面的整体框架布局。通过下图我们看到，应用的页面都遵循标题+内容+底部栏的布局方式：5框架布局框架布局基于上面的“标题+内容+底部栏”的布局方式。 AppCan UI也提供了简单的布局架构模板来适配这种布局。he

2、ader和footer部分是一个定高的区域(通过内容撑开)。content是一个弹性区域，它会占满page_0中除了header和footer外的区域。如果header和footer的高度变化，content的高度也会随之变化。 6 UI 文件在项目的*.html文件代码中，对*.css的文件进行了引用：7UI文件在AppCan UI架构中，我们进行了CSS类封装：常用的UI-XX.css文件介绍如下：8盒子模型9 UI 基础框架Base10UI开发框架开发框架UI开发框架包括：UI框架的设计来源、分辨率适配、布局与定位、页面美化等相关内容。11弹性盒子弹性盒子模型弹性盒子模型弹性盒子模型是C

3、SS3推出的一种布局机制。这种机制与常见的流式布局有很大区别。简单的理解为，流式布局是通过内容决定父容器大小，而弹性盒子模型是在指定大小的父容器里来为子元素分配空间。使用弹性盒子对页面进行布局，ui-box.css中就定义了弹性盒子的一些css3样式，使用box架构可以更容易更方便的适配不同分别率不同屏幕尺寸的手机12弹性盒子简单的流式布局例子简单的流式布局例子 aaaa bbbb 13弹性盒子弹性盒子 弹性盒子模型布局例子弹性盒子模型布局例子1 若子元素都使用ub-f1，那么子元素等比例的分配父元素的空间大小 AAA BBB 14 弹性盒子 弹性盒子模型布局例子弹性盒子模型布局例子2 若子元

4、素一个用ub-f1，另外一个用ub-f2.，那么子元素按照1：2的比例分配父元素的空间大小 AAA BBB15 弹性盒子 弹性盒子模型布局例子弹性盒子模型布局例子3 若子元素分别使用ub-f1，ub-f2，ub-f3，那么子元素会按照1：2：3的比例分配父元素的空间大小 AAA BBB CCC 16 弹性盒子 弹性盒子模型布局例子弹性盒子模型布局例子4 若子元素中只有一个使用ub-f1，另外一个元素根据内容的多少定义大小，那么使用ub-f1的元素会自动适配元素的剩余空间大小 内容 AAA 弹性盒子弹性盒子模型布局例子弹性盒子模型布局例子5子元素采用纵向布局， 父元素使用ub-ver AAA B

5、BB 18分配率适配分辨率适配分辨率适配为了使手机应用能够根据访问设备的不同分辨率自动调整页面效果。AppCan UI框架设计原理是为不同的分辨率，选取人直观感受最舒适的字体大小作为参考量，再用相对长度单位em进行页面布局。如：页面中设置font-size:1em;在320 x480分辨率下显示字体大小为16px，在480 x800分辨率下显示字体大小为24px。目前参照Andorid屏幕密度划分为低密度、普通密度、高密度、超高密度、超超高密度，分别定义字体为14px 16px 24px 32px 48px。19 UI 控件 - Button 按钮JS对象对象 appcan.button(se

6、lector, css, callback) selector 按钮的选择器，例如 .btn、div或#id。可同时处理多个按钮 css 按钮点击后的效果CSS类名称。预置 ani-act和 btn-act callback 按钮点击后的回调函数，回调函数中this代表点击的按钮 JS 代码代码appcan.button(.btn, ani-act, function() ) 无图片按钮无图片按钮20 UI 控件 - Button 按钮按钮1按钮2按钮3按钮4按钮521UI 控件 -图片滑块22UI 控件 -图片滑块JS对象对象 函数函数： appcan.slider(参数) selector

7、: /*选择器*/, hasLabel: true or false /*是否有标签文字栏*/, aspectRatio: 6/16 /*是否控制纵横比, index: 0 or 0 /*默认选择项*/ 方法方法： set(data) data:JSON 对象数组，用于存储显示的图片、提示文字信息 clickItem事件 data:JSON 点击条目时触发，告知点击的索引和索引对应的数据对象UI 控件 -列表列表组件是根据AppCan 布局框架对数据列表进行封装的JS对象，通过配合的样式，使开发者在界面中可以快速完成列表控件的开发。 24UI 控件 -列表JS对象对象 函数： appcan.l

8、istview(参数) selector: /*选择器*/, type: thinLine or thickLine /*窄行和宽行设定*/, hasIcon: true or false /*是否有图片*/, hasAngle: true or false /*是否有右侧箭头*/, hasSubTitle: true or false /*是否有子标题*/, hasTouchEffect: true or false /*是否有点击效果*/, hasCheckbox: true or false /*是否有复选按钮*/, hasRadiobox: true or false /*是否有单选按

9、钮*/, align: “left” or “right” /*checkbox和radiobox居左还是居右*/, multiline: 1 2 or 3 /*主标题文字占用最大行数。到达行数显示不全使用替换*/, touchClass: sc-bg-active or 用户自定义 /*列表条目点击效果CSS类*/, hasControl: true or false /*列表条目中是否包含switch组件。*/ hasGroup: true or false /*列表条目是否以分组的形式展示。*/ UI 控件 -下拉框控件 html 代码代码 请选择 选项一 选项二 选项三 选项四 JS

10、代码：代码：appcan.select(.select,function(ele,value) console.log(value););UI 控件 -下拉框控件JS对象appcan.select(selector, callback) selector : select的选择器，例如 .select、div或#id。可同时处理多个下拉按钮 callback : Select点击后的回调函数，告知select标签对应dom对象和选中的状态和选中的option的value 27 UI 控件 - Input/Textarea文本输入控件文本输入组件是根据AppCan 布局框架对标签封装的HTML5

11、代码片段，通过配合的样式，使开发者在界面中可以快速使用input标签。 JS代码代码： $(form).on(submit, function() appcan.request.postForm($(form), function() appcan.window.alert( title : 提醒, content : 您已经成功提交了表单:), buttons : 确定, callback : function(err, data, dataType, optId) ); ,function(err) ); return false;);登陆表单登陆表单HTML代码：代码： . 登录 UI

12、控件 - Input/Textarea文本输入控件29UI 控件 -开关按钮开关组件是一组根据AppCan 布局框架封装的HTML5代码片段，通过配合的样式和JS对象appcan.switch，使开发者在界面中可以快速创建开关控件，并可以快速的完成事件的监听和控制。 UI 控件 -开关按钮HTML 代码代码 JS 代码代码appcan.switch(.switch, function(obj, value) ) JS对象对象 appcan.switch(selector, css, callback) selector : 按钮的选择器，例如 .btn、div或#id。可同时处理多个按钮 cs

13、s Switch: 开启后的背景CSS类名称。预置 bc-head。可选参数 callback switch: 状态变更后的回调函数 31UI 控件 -单选框Radio组件是根据AppCan 布局框架对封装的HTML5代码片段，通过配合的样式，使开发者在界面中可以快速使用RadioBox控件。UI 控件 -单选框HTML代码代码 JS 代码代码 $(.radiobox).find(input).on(change,function(evt) /*添加Radio变更处理代码*/ );UI 控件 -复选框CheckBox组件是根据AppCan 布局框架对封装的HTML5代码片段，通过配合的样式，使

14、开发者在界面中可以快速使用CheckBox控件。UI 控件 -复选框HTML 代码代码 JS代码代码$(.checkbox).find(input).on(change,function(evt) /*添加Checkbox变更处理代码*/);UI 控件 -导航导航栏组件是一组根据AppCan布局框架封装的HTML5代码片段，通过配合的样式和JS对象appcan.button，使开发者在界面中可以快速创建导航栏，并可以快速的完成按键事件的监听和控制。按钮支持Font awesome字图图标，可直接使用。 UI 控件 -导航HTML代码代码 标题 JS代码代码appcan.button(.nav-

15、btn, btn-act, function() appcan.window.close(-1);)37UI 控件 - tab选项卡组件Tab组件是根据AppCan 布局框架对数据列表进行封装的JS对象，通过配合的样式，使开发者在界面中可以快速完成选项卡控件的开发。UI 控件 - tab选项卡组件 appcan.tab(参数参数) selector: /*选择器*/, hasIcon : true or false /*是否有图标*/, hasAnim : true or false /*切换时是否有动画*/ hasLabel : true or false /*是否有文字*/ hasBadg

16、e : false or false /*是否有badge*/ data : /*选项卡数据*/ label : 全部, /*显示文字*/ icon: fa-home /*显示Font Awesome 图标*/ , label : 待办, icon: icon-edit ub-img,/*显示图片图标*/ , label : 已办, icon: fa-home, badge: 1 /*显示badge数字*/ 方法：方法： set(data) data: JSON 对象数组，用于存储列表条目显示的文字图片等信息。 add(data,dir) data: JSON 对象数组，用于存储列表条目显示的

17、文字图片等信息。 dir: 0 or 1 用于设定数据是在列表前部添加还是后不。0为前部添加。 默认为1 click： TAB条目被点击时调用此事件 参数参数: Obj :TAB条目DOM对象 Index: TAB条目索引 数据源对象中switch.value代表switch状态 39 UI 控件 -折叠列表树状列表组件是根据AppCan 布局框架对数据列表进行封装的JS对象，通过配合的样式，使开发者在界面中可以快速完成树状列表控件的开发。 UI 控件 -折叠列表appcan.treeview(参数) selector: /*选择器*/, type: thinLine or thickLine /*窄行和宽行设定*/, hasIcon: true or false /*是否有图片*/, hasAngle: true or false /*是否有右侧箭头*/, hasTouchEffect: true or false /*是否有点击效果*/, touchClass: sc-bg-active or 用户自定义 /*列表条目点击效果CSS类*/, defa