AppCanUI框架实例讲解

AppCanUI框架实例讲解第一页，共43页。目录

UI介绍 UI开发框架UI控件

2第二页，共43页。

UI介绍AppCan内置了基于JQMobile方案的CSSUI框架。这个框架可以帮助开发者遵循一套规则下生成多变的效果。在实际商用应用开发过程中，它起到了帮助我们加快开发进度的作用。3第三页，共43页。框架布局 主干可以认为是整个页面的整体框架布局。通过下图我们看到，应用的页面都遵循标题+内容+底部栏的布局方式：4第四页，共43页。框架布局基于上面的“标题+内容+底部栏”的布局方式。AppCanUI也提供了简单的布局架构模板来适配这种布局。header和footer部分是一个定高的区域(通过内容撑开)。content是一个弹性区域，它会占满page_0中除了header和footer外的区域。如果header和footer的高度变化，content的高度也会随之变化。

5第五页，共43页。

UI文件在项目的*.html文件代码中，对*.css的文件进行了引用：6第六页，共43页。UI文件在AppCanUI架构中，我们进行了CSS类封装：常用的UI-XX.css文件介绍如下：

7第七页，共43页。盒子模型8第八页，共43页。

UI基础框架Base9第九页，共43页。UI开发框架UI开发框架包括：UI框架的设计来源、分辨率适配、布局与定位、页面美化等相关内容。10第十页，共43页。弹性盒子弹性盒子模型弹性盒子模型是CSS3推出的一种布局机制。这种机制与常见的流式布局有很大区别。简单的理解为，流式布局是通过内容决定父容器大小，而弹性盒子模型是在指定大小的父容器里来为子元素分配空间。使用弹性盒子对页面进行布局，ui-box.css中就定义了弹性盒子的一些css3样式，使用box架构可以更容易更方便的适配不同分别率不同屏幕尺寸的手机11第十一页，共43页。弹性盒子简单的流式布局例子<divstyle='display:inline;border:1pxsolidblue'><divstyle='display:inline;background:#E00'>aaaa</div><divstyle='display:inline;background:#0E0'>bbbb</div></div>12第十二页，共43页。弹性盒子弹性盒子模型布局例子1若子元素都使用ub-f1，那么子元素等比例的分配父元素的空间大小<divclass="ububaumh5"><divclass="ub-f1uba">AAA</div><divclass="ub-f1uba">BBB</div></div>13第十三页，共43页。

弹性盒子弹性盒子模型布局例子2若子元素一个用ub-f1，另外一个用ub-f2.，那么子元素按照1：2的比例分配父元素的空间大小<divclass="ububaumh5"><divclass="ub-f1uba">AAA</div><divclass="ub-f2uba">BBB</div></div>

14第十四页，共43页。

弹性盒子弹性盒子模型布局例子3若子元素分别使用ub-f1，ub-f2，ub-f3，那么子元素会按照1：2：3的比例分配父元素的空间大小<divclass="ububaumh5"><divclass="ub-f1uba">AAA</div><divclass="ub-f2uba">BBB</div><divclass="ub-f3uba">CCC</div></div>15第十五页，共43页。

弹性盒子弹性盒子模型布局例子4若子元素中只有一个使用ub-f1，另外一个元素根据内容的多少定义大小，那么使用ub-f1的元素会自动适配元素的剩余空间大小<divclass="ububaumh5"><divclass="uba">内容</div><divclass="ub-f2uba">AAA</div></div>16第十六页，共43页。

弹性盒子弹性盒子模型布局例子5子元素采用纵向布局，父元素使用ub-ver<divclass="ubub-verubaumh6"> <divclass="ub-f1uba">AAA</div><divclass="ub-f1uba">BBB</div></div>第十七页，共43页。分配率适配分辨率适配为了使手机应用能够根据访问设备的不同分辨率自动调整页面效果。AppCanUI框架设计原理是为不同的分辨率，选取人直观感受最舒适的字体大小作为参考量，再用相对长度单位em进行页面布局。如：页面中设置font-size:1em;在320x480分辨率下显示字体大小为16px，在480x800分辨率下显示字体大小为24px。目前参照Andorid屏幕密度划分为低密度、普通密度、高密度、超高密度、超超高密度，分别定义字体为14px16px24px32px48px。18第十八页，共43页。

UI控件--Button按钮JS对象

appcan.button(selector,css,callback)

selector按钮的选择器，例如.btn、div或#id。可同时处理多个按钮

css按钮点击后的效果CSS类名称。预置ani-act和btn-act

callback按钮点击后的回调函数，回调函数中this代表点击的按钮

JS代码appcan.button(".btn","ani-act",function(){})<divclass="btnubub-acbc-text-headub-pcbc-btn"id="btn">无图片按钮</div>19第十九页，共43页。

UI控件--Button按钮<divclass="btnubub-acbc-text-headub-pcbc-btnuc-a"id="btn1">按钮1</div><divclass="btnubub-acbc-text-headub-pcbc-btnuc-auba"id="btn2">按钮2</div><divclass="btnubub-acbc-text-headub-pcbc-btnuc-aubaulev1"id="btn3">按钮3</div><divclass="btnubub-acbc-text-headub-pcbc-btnuc-aubaulev-4"id="btn4">按钮4</div><divclass="btnubub-acbc-text-headub-pcbc-btnuc-aubaulev-4uts"id="btn5">按钮5</div>20第二十页，共43页。UI控件--图片滑块21第二十一页，共43页。UI控件--图片滑块JS对象

函数：appcan.slider({参数})selector: /*选择器*/,hasLabel:trueorfalse /*是否有标签文字栏*/,aspectRatio:6/16

/*是否控制纵横比,index:0or>0 /*默认选择项*/

方法：set(data)data:JSON对象数组，用于存储显示的图片、提示文字信息clickItem事件data:JSON点击条目时触发，告知点击的索引和索引对应的数据对象22第二十二页，共43页。UI控件--列表列表组件是根据AppCan布局框架对数据列表进行封装的JS对象，通过配合的样式，使开发者在界面中可以快速完成列表控件的开发。第二十三页，共43页。UI控件--列表JS对象

函数：

appcan.listview({参数})

selector:

/*选择器*/,

type:

thinLineorthickLine /*窄行和宽行设定*/,

hasIcon:

trueorfalse/*是否有图片*/,

hasAngle:

trueorfalse/*是否有右侧箭头*/,

hasSubTitle:

trueorfalse/*是否有子标题*/,

hasTouchEffect:

trueorfalse/*是否有点击效果*/,

hasCheckbox:

trueorfalse/*是否有复选按钮*/,

hasRadiobox:

trueorfalse/*是否有单选按钮*/,

align:

“left”or“right”/*checkbox和radiobox居左还是居右*/,

multiline:

12or3 /*主标题文字占用最大行数。到达行数显示不全使用…替换*/,

touchClass:

‘sc-bg-active’or用户自定义/*列表条目点击效果CSS类*/,

hasControl:

trueorfalse /*列表条目中是否包含switch组件。*/

hasGroup:

trueorfalse /*列表条目是否以分组的形式展示。*/

24第二十四页，共43页。UI控件--下拉框控件html代码<divclass="selectubabc-borderbc-text"><divclass="text">请选择</div><divclass="icon"></div><selectselectedindex="0"><optionvalue=0>选项一</option><optionvalue=1>选项二</option><optionvalue=2>选项三</option><optionvalue=3>选项四</option></select></div>JS代码：appcan.select(".select",function(ele,value){console.log(value);});第二十五页，共43页。UI控件--下拉框控件JS对象appcan.select(selector,callback)

selector

:select的选择器，例如.select、div或#id。可同时处理多个下拉按钮

callback

:Select点击后的回调函数，告知select标签对应dom对象和选中的状态和选中的option的value

第二十六页，共43页。UI控件--Input/Textarea文本输入控件文本输入组件是根据AppCan布局框架对<inputtype="text"/>标签封装的HTML5代码片段，通过配合的样式，使开发者在界面中可以快速使用input标签。27第二十七页，共43页。JS代码：

$("form").on('submit',function(){appcan.request.postForm($("form"),function(){appcan.window.alert({title:"提醒",content:"您已经成功提交了表单:)",buttons:'确定',callback:function(err,data,dataType,optId){

}});},function(err){

});returnfalse;});登陆表单HTML代码：<formmethod="get"action=""><divclass="umar-aubabc-border"><divclass="ubub-acubbumh5bc-border"><divclass="uinputubub-f1"><divclass="uinnfafa-usersc-text"></div><inputplaceholder="请输入登录账号"type="text"class="ub-f1"></div></div>

……..

</div><divclass="uinn"><divclass="btnubub-acbc-text-headub-pcbc-btnuc-a1"id="submit"><divclass="uinn3fafa-shieldumh1umw1"></div>

登录

</div></div><buttontype="submit"class="uinvisible"></button></form>

UI控件--Input/Textarea文本输入控件第二十八页，共43页。UI控件--开关按钮开关组件是一组根据AppCan布局框架封装的HTML5代码片段，通过配合的样式和JS对象appcan.switch，使开发者在界面中可以快速创建开关控件，并可以快速的完成事件的监听和控制。29第二十九页，共43页。

UI控件--开关按钮HTML代码<divclass="switchubabc-borderswitch-mini"data-checked="false">

JS代码appcan.switch(".switch",function(obj,value){})JS对象

appcan.switch(selector,css,callback)

selector:

按钮的选择器，例如.btn、div或#id。可同时处理多个按钮

cssSwitch:

开启后的背景CSS类名称。预置bc-head。可选参数

callbackswitch:

状态变更后的回调函数

第三十页，共43页。UI控件--单选框Radio组件是根据AppCan布局框架对<inputtype="radio"/>封装的HTML5代码片段，通过配合的样式，使开发者在界面中可以快速使用RadioBox控件。31第三十一页，共43页。UI控件--单选框HTML代码<divclass="radioboxumar-r"name=""><inputtype="radio"class="uabsub-con"name="lv_radio"></div>JS代码$('.radiobox').find('input').on('change',function(evt){/*添加Radio变更处理代码*/});第三十二页，共43页。UI控件--复选框CheckBox组件是根据AppCan布局框架对<inputtype="checkbox"/>封装的HTML5代码片段，通过配合的样式，使开发者在界面中可以快速使用CheckBox控件。第三十三页，共43页。UI控件--复选框HTML代码<divclass="checkboxumar-r"><inputtype="checkbox"class="uabsub-con">

</div>JS代码$('.checkbox').find('input').on('change',function(evt){/*添加Checkbox变更处理代码*/});第三十四页，共43页。UI控件--导航导航栏组件是一组根据AppCan布局框架封装的HTML5代码片段，通过配合的样式和JS对象appcan.button，使开发者在界面中可以快速创建导航栏，并可以快速的完成按键事件的监听和控制。按钮支持Fontawesome字图图标，可直接使用。第三十五页，共43页。UI控件--导航HTML代码<divid="header"class="uhbc-text-headubbc-head"><divclass="nav-btn"id="nav-left"><divclass="fafa-angle-leftfa-2x"></div></div><h1class="utub-f1ulev-3ut-stx-c"tabindex="0">标题</h1><divclass="nav-btn"id="nav-right"></div></div>JS代码appcan.button(".nav-btn","btn-act",function(){appcan.window.close(-1);})第三十六页，共43页。UI控件--

tab选项卡组件Tab组件是根据AppCan布局框架对数据列表进行封装的JS对象，通过配合的样式，使开发者在界面中可以快速完成选项卡控件的开发。37第三十七页，共43页。UI控件--tab选项卡组件

appcan.tab({参数})

selector:

/*选择器*/,

hasIcon:trueorfalse

/*是否有图标*/,

hasAnim:trueorfalse

/*切换时是否有动画*/

hasLabel:trueorfalse

/*是否有文字*/

hasBadge:falseorfalse

/*是否有badge*/

data:[{/*选项卡数据*/label:"全部",/*显示文字*/icon:"fa-home"/*显示FontAwesome图标*/},{label:"待办",icon:"icon-editub-img",/*显示图片图标*/},{label:"已办",icon:"fa-home",badge:1/*显示badge数字*/}]

方法：

set(data)

data:JSON

对象数组，用于存储列表条目显示的文字图片等信息。

add(data,dir)

data:JSON对象数组，用于存储列表条目显示的文字图片等信息。

dir:0or1

用于设定数据是在列表前部添加还是后不。0为前部添加。

默认为1