《app can ui框架实例讲解》由会员分享，可在线阅读，更多相关《app can ui框架实例讲解（42页珍藏版）》请在金锄头文库上搜索。
1、AppCan UI介绍及UI控件,培训师：王天访,2,目 录,UI 介绍 UI 开发框架 UI 控件,3,UI 介绍,AppCan内置了基于JQMobile方案的CSS UI框架。这个框架可以帮助开发者遵循一套规则下生成多变的效果。在实际商用应用开发过程中，它起到了帮助我们加快开发进度的作用。,4,框架布局,主干可以认为是整个页面的整体框架布局。通过下图我们看到，应用的页面都遵循标题+内容+底部栏的布局方式：,5,框架布局,基于上面的“标题+内容+底部栏”的布局方式。 AppCan UI也提供了简单的布局架构模板来适配这种布局。 header和footer部分是一个定高的区域(通过内容撑开)。
2、content是一个弹性区域，它会占满page_0中除了header和footer外的区域。如果header和footer的高度变化，content的高度也会随之变化。,6,UI 文件,在项目的*.html文件代码中，对*.css的文件进行了引用：,7,UI文件,在AppCan UI架构中，我们进行了CSS类封装：常用的UI-XX.css文件介绍如下：,8,盒子模型,9,UI 基础框架Base,10,UI开发框架,UI开发框架包括：UI框架的设计来源、分辨率适配、布局与定位、页面美化等相关内容。,11,弹性盒子,弹性盒子模型 弹性盒子模型是CSS3推出的一种布局机制。这种机制与常见的流式布局有
3、很大区别。简单的理解为，流式布局是通过内容决定父容器大小，而弹性盒子模型是在指定大小的父容器里来为子元素分配空间。 使用弹性盒子对页面进行布局，ui-box.css中就定义了弹性盒子的一些css3样式，使用box架构可以更容易更方便的适配不同分别率不同屏幕尺寸的手机,12,弹性盒子,简单的流式布局例子 aaaa bbbb ,13,弹性盒子,弹性盒子模型布局例子1 若子元素都使用ub-f1，那么子元素等比例的分配父元素的空间大小 AAA BBB ,14,弹性盒子,弹性盒子模型布局例子2 若子元素一个用ub-f1，另外一个用ub-f2.，那么子元素按照1：2的比例分配父元素的空间大小 AAA BB
4、B ,15,弹性盒子,弹性盒子模型布局例子3 若子元素分别使用ub-f1，ub-f2，ub-f3，那么子元素会按照1：2：3的比例分配父元素的空间大小 AAA BBB CCC ,16,弹性盒子,弹性盒子模型布局例子4 若子元素中只有一个使用ub-f1，另外一个元素根据内容的多少定义大小，那么使用ub-f1的元素会自动适配元素的剩余空间大小 内容 AAA ,弹性盒子,弹性盒子模型布局例子5 子元素采用纵向布局， 父元素使用ub-ver AAA BBB ,18,分配率适配,分辨率适配 为了使手机应用能够根据访问设备的不同分辨率自动调整页面效果。 AppCan UI框架设计原理是为不同的分辨率，选取
5、人直观感受最舒适的字体大小作为参考量，再用相对长度单位em进行页面布局。 如：页面中设置font-size:1em;在320x480分辨率下显示字体大小为16px，在480x800分辨率下显示字体大小为24px。目前参照Andorid屏幕密度划分为低密度、普通密度、高密度、超高密度、超超高密度，分别定义字体为14px 16px 24px 32px 48px。,19,UI 控件 - Button 按钮,JS对象 appcan.button(selector, css, callback) selector 按钮的选择器，例如 .btn、div或#id。可同时处理多个按钮 css 按钮点击后的效果
6、CSS类名称。预置 ani-act和 btn-act callback 按钮点击后的回调函数，回调函数中this代表点击的按钮 JS 代码 appcan.button(“.btn“, “ani-act“, function() ), 无图片按钮 ,20,UI 控件 - Button 按钮, 按钮1 按钮2 按钮3 按钮4 按钮5 ,21,UI 控件 -图片滑块,22,UI 控件 -图片滑块,JS对象 函数： appcan.slider(参数) selector: /*选择器*/, hasLabel: true or false /*是否有标签文字栏*/, aspectRatio: 6/16 /
7、*是否控制纵横比, index: 0 or 0 /*默认选择项*/ 方法： set(data) data:JSON 对象数组，用于存储显示的图片、提示文字信息 clickItem事件 data:JSON 点击条目时触发，告知点击的索引和索引对应的数据对象,UI 控件 -列表,列表组件是根据AppCan 布局框架对数据列表进行封装的JS对象，通过配合的样式，使开发者在界面中可以快速完成列表控件的开发。,24,UI 控件 -列表,JS对象 函数： appcan.listview(参数) selector: /*选择器*/, type: thinLine or thickLine /*窄行和宽行设定
8、*/, hasIcon: true or false /*是否有图片*/, hasAngle: true or false /*是否有右侧箭头*/, hasSubTitle: true or false /*是否有子标题*/, hasTouchEffect: true or false /*是否有点击效果*/, hasCheckbox: true or false /*是否有复选按钮*/, hasRadiobox: true or false /*是否有单选按钮*/, align: “left” or “right” /*checkbox和radiobox居左还是居右*/, multiline
9、: 1 2 or 3 /*主标题文字占用最大行数。到达行数显示不全使用替换*/, touchClass: sc-bg-active or 用户自定义 /*列表条目点击效果CSS类*/, hasControl: true or false /*列表条目中是否包含switch组件。*/ hasGroup: true or false /*列表条目是否以分组的形式展示。*/,UI 控件 -下拉框控件,html 代码 请选择 选项一 选项二 选项三 选项四 JS 代码： appcan.select(“.select“,function(ele,value) console.log(value); );
10、,UI 控件 -下拉框控件,JS对象 appcan.select(selector, callback) selector : select的选择器，例如 .select、div或#id。可同时处理多个下拉按钮 callback : Select点击后的回调函数，告知select标签对应dom对象和选中的状态和选中的option的value,27,UI 控件 - Input/Textarea文本输入控件,文本输入组件是根据AppCan 布局框架对标签封装的HTML5代码片段，通过配合的样式，使开发者在界面中可以快速使用input标签。,JS代码： $(“form“).on(submit, fu
11、nction() appcan.request.postForm($(“form“), function() appcan.window.alert( title : “提醒“, content : “您已经成功提交了表单:)“, buttons : 确定, callback : function(err, data, dataType, optId) ); ,function(err) ); return false; );,登陆表单HTML代码： 登录 ,UI 控件 - Input/Textarea文本输入控件,29,UI 控件 -开关按钮,开关组件是一组根据AppCan 布局框架封装的H
12、TML5代码片段，通过配合的样式和JS对象appcan.switch，使开发者在界面中可以快速创建开关控件，并可以快速的完成事件的监听和控制。,UI 控件 -开关按钮,HTML 代码 ,JS 代码 appcan.switch(“.switch“, function(obj, value) ),JS对象 appcan.switch(selector, css, callback) selector : 按钮的选择器，例如 .btn、div或#id。可同时处理多个按钮 css Switch: 开启后的背景CSS类名称。预置 bc-head。可选参数 callback switch: 状态变更后的回
13、调函数,31,UI 控件 -单选框,Radio组件是根据AppCan 布局框架对封装的HTML5代码片段，通过配合的样式，使开发者在界面中可以快速使用RadioBox控件。,UI 控件 -单选框,HTML代码 JS 代码 $(.radiobox).find(input).on(change,function(evt) /*添加Radio变更处理代码*/ );,UI 控件 -复选框,CheckBox组件是根据AppCan 布局框架对封装的HTML5代码片段，通过配合的样式，使开发者在界面中可以快速使用CheckBox控件。,UI 控件 -复选框,HTML 代码 JS代码 $(.checkbox)
14、.find(input).on(change,function(evt) /*添加Checkbox变更处理代码*/ );,UI 控件 -导航,导航栏组件是一组根据AppCan布局框架封装的HTML5代码片段，通过配合的样式和JS对象appcan.button，使开发者在界面中可以快速创建导航栏，并可以快速的完成按键事件的监听和控制。按钮支持Font awesome字图图标，可直接使用。,UI 控件 -导航,HTML代码 标题 JS代码 appcan.button(“.nav-btn“, “btn-act“, function() appcan.window.close(-1); ),37,UI
15、 控件 - tab选项卡组件,Tab组件是根据AppCan 布局框架对数据列表进行封装的JS对象，通过配合的样式，使开发者在界面中可以快速完成选项卡控件的开发。,UI 控件 - tab选项卡组件,appcan.tab(参数) selector: /*选择器*/, hasIcon : true or false /*是否有图标*/, hasAnim : true or false /*切换时是否有动画*/ hasLabel : true or false /*是否有文字*/ hasBadge : false or false /*是否有badge*/ data : /*选项卡数据*/ label : “全部“, /*显示文字*/ icon: “fa-home“ /*显示Font Awesome 图标*/ , label : “待办“, icon: “icon-edit ub-img“,/*显示图片图标*/ , label : “已办“, icon: “fa-home“, badge
