AppCanUI框架實(shí)例講解

AppCanUI框架實(shí)例講解第一頁(yè)，共43頁(yè)。目錄

UI介紹 UI開發(fā)框架UI控件

2第二頁(yè)，共43頁(yè)。

UI介紹AppCan內(nèi)置了基于JQMobile方案的CSSUI框架。這個(gè)框架可以幫助開發(fā)者遵循一套規(guī)則下生成多變的效果。在實(shí)際商用應(yīng)用開發(fā)過(guò)程中，它起到了幫助我們加快開發(fā)進(jìn)度的作用。3第三頁(yè)，共43頁(yè)?？蚣懿季?主干可以認(rèn)為是整個(gè)頁(yè)面的整體框架布局。通過(guò)下圖我們看到，應(yīng)用的頁(yè)面都遵循標(biāo)題+內(nèi)容+底部欄的布局方式：4第四頁(yè)，共43頁(yè)?？蚣懿季只谏厦娴摹皹?biāo)題+內(nèi)容+底部欄”的布局方式。AppCanUI也提供了簡(jiǎn)單的布局架構(gòu)模板來(lái)適配這種布局。header和footer部分是一個(gè)定高的區(qū)域(通過(guò)內(nèi)容撐開)。content是一個(gè)彈性區(qū)域，它會(huì)占滿page_0中除了header和footer外的區(qū)域。如果header和footer的高度變化，content的高度也會(huì)隨之變化。

5第五頁(yè)，共43頁(yè)。

UI文件在項(xiàng)目的*.html文件代碼中，對(duì)*.css的文件進(jìn)行了引用：6第六頁(yè)，共43頁(yè)。UI文件在AppCanUI架構(gòu)中，我們進(jìn)行了CSS類封裝：常用的UI-XX.css文件介紹如下：

7第七頁(yè)，共43頁(yè)。盒子模型8第八頁(yè)，共43頁(yè)。

UI基礎(chǔ)框架Base9第九頁(yè)，共43頁(yè)。UI開發(fā)框架UI開發(fā)框架包括：UI框架的設(shè)計(jì)來(lái)源、分辨率適配、布局與定位、頁(yè)面美化等相關(guān)內(nèi)容。10第十頁(yè)，共43頁(yè)。彈性盒子彈性盒子模型彈性盒子模型是CSS3推出的一種布局機(jī)制。這種機(jī)制與常見的流式布局有很大區(qū)別。簡(jiǎn)單的理解為，流式布局是通過(guò)內(nèi)容決定父容器大小，而彈性盒子模型是在指定大小的父容器里來(lái)為子元素分配空間。使用彈性盒子對(duì)頁(yè)面進(jìn)行布局，ui-box.css中就定義了彈性盒子的一些css3樣式，使用box架構(gòu)可以更容易更方便的適配不同分別率不同屏幕尺寸的手機(jī)11第十一頁(yè)，共43頁(yè)。彈性盒子簡(jiǎn)單的流式布局例子<divstyle='display:inline;border:1pxsolidblue'><divstyle='display:inline;background:#E00'>aaaa</div><divstyle='display:inline;background:#0E0'>bbbb</div></div>12第十二頁(yè)，共43頁(yè)。彈性盒子彈性盒子模型布局例子1若子元素都使用ub-f1，那么子元素等比例的分配父元素的空間大小<divclass="ububaumh5"><divclass="ub-f1uba">AAA</div><divclass="ub-f1uba">BBB</div></div>13第十三頁(yè)，共43頁(yè)。

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

14第十四頁(yè)，共43頁(yè)。

彈性盒子彈性盒子模型布局例子3若子元素分別使用ub-f1，ub-f2，ub-f3，那么子元素會(huì)按照1：2：3的比例分配父元素的空間大小<divclass="ububaumh5"><divclass="ub-f1uba">AAA</div><divclass="ub-f2uba">BBB</div><divclass="ub-f3uba">CCC</div></div>15第十五頁(yè)，共43頁(yè)。

彈性盒子彈性盒子模型布局例子4若子元素中只有一個(gè)使用ub-f1，另外一個(gè)元素根據(jù)內(nèi)容的多少定義大小，那么使用ub-f1的元素會(huì)自動(dòng)適配元素的剩余空間大小<divclass="ububaumh5"><divclass="uba">內(nèi)容</div><divclass="ub-f2uba">AAA</div></div>16第十六頁(yè)，共43頁(yè)。

彈性盒子彈性盒子模型布局例子5子元素采用縱向布局，父元素使用ub-ver<divclass="ubub-verubaumh6"> <divclass="ub-f1uba">AAA</div><divclass="ub-f1uba">BBB</div></div>第十七頁(yè)，共43頁(yè)。分配率適配分辨率適配為了使手機(jī)應(yīng)用能夠根據(jù)訪問設(shè)備的不同分辨率自動(dòng)調(diào)整頁(yè)面效果。AppCanUI框架設(shè)計(jì)原理是為不同的分辨率，選取人直觀感受最舒適的字體大小作為參考量，再用相對(duì)長(zhǎng)度單位em進(jìn)行頁(yè)面布局。如：頁(yè)面中設(shè)置font-size:1em;在320x480分辨率下顯示字體大小為16px，在480x800分辨率下顯示字體大小為24px。目前參照Andorid屏幕密度劃分為低密度、普通密度、高密度、超高密度、超超高密度，分別定義字體為14px16px24px32px48px。18第十八頁(yè)，共43頁(yè)。

UI控件--Button按鈕JS對(duì)象

appcan.button(selector,css,callback)

selector按鈕的選擇器，例如.btn、div或#id?？赏瑫r(shí)處理多個(gè)按鈕

css按鈕點(diǎn)擊后的效果CSS類名稱。預(yù)置ani-act和btn-act

callback按鈕點(diǎn)擊后的回調(diào)函數(shù)，回調(diào)函數(shù)中this代表點(diǎn)擊的按鈕

JS代碼appcan.button(".btn","ani-act",function(){})<divclass="btnubub-acbc-text-headub-pcbc-btn"id="btn">無(wú)圖片按鈕</div>19第十九頁(yè)，共43頁(yè)。

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第二十頁(yè)，共43頁(yè)。UI控件--圖片滑塊21第二十一頁(yè)，共43頁(yè)。UI控件--圖片滑塊JS對(duì)象

函數(shù)：appcan.slider({參數(shù)})selector: /*選擇器*/,hasLabel:trueorfalse /*是否有標(biāo)簽文字欄*/,aspectRatio:6/16

/*是否控制縱橫比,index:0or>0 /*默認(rèn)選擇項(xiàng)*/

方法：set(data)data:JSON對(duì)象數(shù)組，用于存儲(chǔ)顯示的圖片、提示文字信息clickItem事件data:JSON點(diǎn)擊條目時(shí)觸發(fā)，告知點(diǎn)擊的索引和索引對(duì)應(yīng)的數(shù)據(jù)對(duì)象22第二十二頁(yè)，共43頁(yè)。UI控件--列表列表組件是根據(jù)AppCan布局框架對(duì)數(shù)據(jù)列表進(jìn)行封裝的JS對(duì)象，通過(guò)配合的樣式，使開發(fā)者在界面中可以快速完成列表控件的開發(fā)。第二十三頁(yè)，共43頁(yè)。UI控件--列表JS對(duì)象

函數(shù)：

appcan.listview({參數(shù)})

selector:

/*選擇器*/,

type:

thinLineorthickLine /*窄行和寬行設(shè)定*/,

hasIcon:

trueorfalse/*是否有圖片*/,

hasAngle:

trueorfalse/*是否有右側(cè)箭頭*/,

hasSubTitle:

trueorfalse/*是否有子標(biāo)題*/,

hasTouchEffect:

trueorfalse/*是否有點(diǎn)擊效果*/,

hasCheckbox:

trueorfalse/*是否有復(fù)選按鈕*/,

hasRadiobox:

trueorfalse/*是否有單選按鈕*/,

align:

“l(fā)eft”or“right”/*checkbox和radiobox居左還是居右*/,

multiline:

12or3 /*主標(biāo)題文字占用最大行數(shù)。到達(dá)行數(shù)顯示不全使用…替換*/,

touchClass:

‘sc-bg-active’or用戶自定義/*列表?xiàng)l目點(diǎn)擊效果CSS類*/,

hasControl:

trueorfalse /*列表?xiàng)l目中是否包含switch組件。*/

hasGroup:

trueorfalse /*列表?xiàng)l目是否以分組的形式展示。*/

24第二十四頁(yè)，共43頁(yè)。UI控件--下拉框控件html代碼<divclass="selectubabc-borderbc-text"><divclass="text">請(qǐng)選擇</div><divclass="icon"></div><selectselectedindex="0"><optionvalue=0>選項(xiàng)一</option><optionvalue=1>選項(xiàng)二</option><optionvalue=2>選項(xiàng)三</option><optionvalue=3>選項(xiàng)四</option></select></div>JS代碼：appcan.select(".select",function(ele,value){console.log(value);});第二十五頁(yè)，共43頁(yè)。UI控件--下拉框控件JS對(duì)象appcan.select(selector,callback)

selector

:select的選擇器，例如.select、div或#id?？赏瑫r(shí)處理多個(gè)下拉按鈕

callback

:Select點(diǎn)擊后的回調(diào)函數(shù)，告知select標(biāo)簽對(duì)應(yīng)dom對(duì)象和選中的狀態(tài)和選中的option的value

第二十六頁(yè)，共43頁(yè)。UI控件--Input/Textarea文本輸入控件文本輸入組件是根據(jù)AppCan布局框架對(duì)<inputtype="text"/>標(biāo)簽封裝的HTML5代碼片段，通過(guò)配合的樣式，使開發(fā)者在界面中可以快速使用input標(biāo)簽。27第二十七頁(yè)，共43頁(yè)。JS代碼：

$("form").on('submit',function(){appcan.request.postForm($("form"),function(){appcan.window.alert({title:"提醒",content:"您已經(jīng)成功提交了表單:)",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="請(qǐng)輸入登錄賬號(hào)"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文本輸入控件第二十八頁(yè)，共43頁(yè)。UI控件--開關(guān)按鈕開關(guān)組件是一組根據(jù)AppCan布局框架封裝的HTML5代碼片段，通過(guò)配合的樣式和JS對(duì)象appcan.switch，使開發(fā)者在界面中可以快速創(chuàng)建開關(guān)控件，并可以快速的完成事件的監(jiān)聽和控制。29第二十九頁(yè)，共43頁(yè)。

UI控件--開關(guān)按鈕HTML代碼<divclass="switchubabc-borderswitch-mini"data-checked="false">

JS代碼appcan.switch(".switch",function(obj,value){})JS對(duì)象

appcan.switch(selector,css,callback)

selector:

按鈕的選擇器，例如.btn、div或#id?？赏瑫r(shí)處理多個(gè)按鈕

cssSwitch:

開啟后的背景CSS類名稱。預(yù)置bc-head?？蛇x參數(shù)

callbackswitch:

狀態(tài)變更后的回調(diào)函數(shù)

第三十頁(yè)，共43頁(yè)。UI控件--單選框Radio組件是根據(jù)AppCan布局框架對(duì)<inputtype="radio"/>封裝的HTML5代碼片段，通過(guò)配合的樣式，使開發(fā)者在界面中可以快速使用RadioBox控件。31第三十一頁(yè)，共43頁(yè)。UI控件--單選框HTML代碼<divclass="radioboxumar-r"name=""><inputtype="radio"class="uabsub-con"name="lv_radio"></div>JS代碼$('.radiobox').find('input').on('change',function(evt){/*添加Radio變更處理代碼*/});第三十二頁(yè)，共43頁(yè)。UI控件--復(fù)選框CheckBox組件是根據(jù)AppCan布局框架對(duì)<inputtype="checkbox"/>封裝的HTML5代碼片段，通過(guò)配合的樣式，使開發(fā)者在界面中可以快速使用CheckBox控件。第三十三頁(yè)，共43頁(yè)。UI控件--復(fù)選框HTML代碼<divclass="checkboxumar-r"><inputtype="checkbox"class="uabsub-con">

</div>JS代碼$('.checkbox').find('input').on('change',function(evt){/*添加Checkbox變更處理代碼*/});第三十四頁(yè)，共43頁(yè)。UI控件--導(dǎo)航導(dǎo)航欄組件是一組根據(jù)AppCan布局框架封裝的HTML5代碼片段，通過(guò)配合的樣式和JS對(duì)象appcan.button，使開發(fā)者在界面中可以快速創(chuàng)建導(dǎo)航欄，并可以快速的完成按鍵事件的監(jiān)聽和控制。按鈕支持Fontawesome字圖圖標(biāo)，可直接使用。第三十五頁(yè)，共43頁(yè)。UI控件--導(dǎo)航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">標(biāo)題</h1><divclass="nav-btn"id="nav-right"></div></div>JS代碼appcan.button(".nav-btn","btn-act",function(){appcan.window.close(-1);})第三十六頁(yè)，共43頁(yè)。UI控件--

tab選項(xiàng)卡組件Tab組件是根據(jù)AppCan布局框架對(duì)數(shù)據(jù)列表進(jìn)行封裝的JS對(duì)象，通過(guò)配合的樣式，使開發(fā)者在界面中可以快速完成選項(xiàng)卡控件的開發(fā)。37第三十七頁(yè)，共43頁(yè)。UI控件--tab選項(xiàng)卡組件

appcan.tab({參數(shù)})

selector:

/*選擇器*/,

hasIcon:trueorfalse

/*是否有圖標(biāo)*/,

hasAnim:trueorfalse

/*切換時(shí)是否有動(dòng)畫*/

hasLabel:trueorfalse

/*是否有文字*/

hasBadge:falseorfalse

/*是否有badge*/

data:[{/*選項(xiàng)卡數(shù)據(jù)*/label:"全部",/*顯示文字*/icon:"fa-home"/*顯示FontAwesome圖標(biāo)*/},{label:"待辦",icon:"icon-editub-img",/*顯示圖片圖標(biāo)*/},{label:"已辦",icon:"fa-home",badge:1/*顯示badge數(shù)字*/}]

方法：

set(data)

data:JSON

對(duì)象數(shù)組，用于存儲(chǔ)列表?xiàng)l目顯示的文字圖片等信息。

add(data,dir)

data:JSON對(duì)象數(shù)組，用于存儲(chǔ)列表?xiàng)l目顯示的文字圖片等信息。

dir:0or1

用于設(shè)定數(shù)據(jù)是在列表前部添加還是后不。0為前部添加。

默認(rèn)為1