碼上快樂

相關內容    簡體    繁體

AppCan入門教程

本文轉載自   查看原文   2016-04-20 15:47   6895 

主干

主干可以認為是整個頁面的整體框架布局
上圖是截取與ZAKER(原生開發)、正益無線(HTML5開發)、ZAKER微博界面(原生開發)和HTML5中國(HTML5開發)。參考上述界面我們看到大部分應用的頁面都遵循標題+內容+底部欄的布局方式。AppCan UI2.0提供了簡單的布局架構模板來適配這種布局。
 
 
模板代碼中我們可以看到默認存在index.html和index_content.html兩個文件。我們通過對這兩個文件的分析來講解AppCan UI2.0推薦的應用開發模式。index.html文件分為三部分HEAD、BODY、SCRIPT。
 
HEAD部分：
[javascript]  view plain copy
  1. <head>  
  2. <title></title>6  
  3. <meta charset='utf-8'>  
  4. <meta name='viewport' content='target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'<  
  5. <link rel='stylesheet' href='css/ui-base.css'>  
  6. <link rel='stylesheet' href='css/ui-box.css'>  
  7. <link rel='stylesheet' href='css/ui-color.css'>  
  8. <link rel='stylesheet' href='css/ui-res.css'>  
  9. <script src='js/zy_control.js'>  
  10. </script<  
  11. <script src='js/zy_click.js'>  
  12. </script>  
  13. </head>  
這一部分定義了網頁引用的CSS和JS文件。上面代碼中ui-base.css代表基礎類文件，ui-box.css是彈性盒子封裝類文件，ui-color是色彩基礎類文件。zy_control.js是默認控件和網頁需要的一些默認功能支持類。 zy_click.js是Click事件模擬類，用於替代默認的onclick事件(手機中onclick響應較慢使應用體驗性差)。

 
BODY部分：
[javascript]  view plain copy
  1. <body class='um-vp c-wh' ontouchstart>  
  2. <div id='page_0' class='up ub ub-ver' tabindex='0'>  
  3. <!--header開始-->  
  4. <div id='header' class='uh c-org c-m1 t-wh'>  
  5. <h1 class='ut ulev0 ut-s tx-c' tabindex='0'>AppCan</h1>  
  6. </div>  
  7. <!--header結束--> <!--content開始-->  
  8. <div id='content' class='ub-f1 tx-l t-bla ub-img6 res10'>  
  9. </div>  
  10. <!--content結束--> <!--footer開始-->  
  11. <div id='footer' class='uf c-m2 c-bla t-wh'>  
  12. <h1 class='ut ulev-2 tx-c' tabindex='0'>(c) Copyright 3G2WIN and others 2011.  
  13. <br>  
  14. All rights reserved.</h1>  
  15. </div>  
  16. <!--footer結束-->  
  17. </div>  
  18. </body>  
Body部分定義了一個頁面page_0，這個頁面的高度為屏幕高度(up)，使用彈性盒子布局(ub)，它的子元素縱向排列(ub-ver)。這個頁面中包含header、content和footer三個區域。
 
header和footer部分是一個DIV，是一個定高的區域(通過內容撐開)。content是一個彈性區域，它會占滿page_0中除了header和footer外的區域。如果header和footer的高度變化，content的高度也會隨之變化。 但是這種布局當內容區域有內容時會引起整個content的高度撐高，由於大部分移動終端都不支持DIV的內部區域滾動，這回造成整個頁面能夠被拖動，這是與我們要求不符的。我們通過SCRIPT區域的代碼來處理這個問題。
 
SCRIPT部分：
[javascript]  view plain copy
  1. <script>  
  2. zy_init();  
  3. window.uexOnload = function(type){  
  4. if (!type) {  
  5. zy_con('content', 'index_content.html', 0, $$('header').offsetHeight);  
  6. }  
  7. window.onorientationchange=window.onresize=function()  
  8. {  
  9. zy_resize('content',0,$$('header').offsetHeight);  
  10. }  
  11. }  
  12. </script>  

上述代碼中zy_init函數用於在模擬器中實現字體的自動適配。在手機中無作用。

window.uexOnload事件用於在AppCan中間件擴展對象加載完成后調用。在這個函數里，我們調用了封裝在zy_control.js里的zy_con函數創建了一個浮動VIEW。這個View與content的區域保持同樣的大小，位置也與content區域的位置保持相同。這個View顯示的內容來自於index_content.html頁面。也就是說，我們的index.html頁面中content區域其實並不包含內容，它只起到一個定位的作用，為浮動View提供定位支持。

window.onorientationchange=window.onresize這行代碼為iOS和Andorid平台的屏幕旋轉事件指定了回調函數，當發生屏幕旋轉時，會調用這個函數，此時我們調用封裝的zy_resize接口參照content區域的新的高寬位置重新定位了浮動窗口。

更方便的是，開發者可以為content區域開發不同的content頁面，可以根據的操作隨時使用zy_con接口變更content區域的頁面內容來實現不同的功能。例如可以配合下方的導航條控實現功能切換。

 

AppCan UI2.0框架推薦這種方式來編寫頁面，相對於UI1.0框架來說，處理邏輯更加簡單,適配更加方便，並且在一個窗口中，並不是只允許包含一個浮動窗口，我們可以創建多個浮動窗口來完成不同的功能，輕松的實現功能的拆分，減少在一個頁面中實現眾多功能引起的邏輯問題。同時這種方式可以輕松的實現固定的背景圖片。上述代碼中，我們看到我們為content區域指定了一張背景圖，而我們在index_content.html沒有指定背景色，這樣顯示index_content.html網頁時會顯示出蓋在在下方的content區域。由於浮動窗口是獨立的窗口，因此它的頁面滾動並不會影響下方content區域。當然這種布局我們使用iscroll等JS包也可以很方便的實現，但是在很多Android手機上，由於性能原因體驗相對於原生應用還是會有很大差距。

AppCan UI2.0框架支持浮動窗口的彈動效果，開發者可以很方便的實現彈動效果，在index_content.html中我們已經默認提供了范例代碼。接着我們看一下實際的內容區域網頁index_content.html。這個頁面與index.html一樣同樣分為三個部分HEAD、BODY、SCRIPT。HEAD部分與index.html的HEAD部分一樣沒什么區別。BODY部分開發者可以根據需求添加列表、表單、地圖等功能實現。SCRIPT部分的代碼我們看一下：

[javascript]  view plain copy
  1. <script>  
  2. zy_init();  
  3. window.uexOnload=function(type)  
  4. {  
  5. if(!type){  
  6. uexWindow.setBounce('1');  
  7. uexWindow.showBounceView('0','#FFF','0');  
  8. uexWindow.showBounceView('1','#FFF','0');  
  9. }  
  10. }  
  11. </script>  
上述代碼中zy_init()用於在模擬器狀態下實現字體自適配，手機上無作用。uexOnload事件定義了浮動窗口AppCan擴展加載后的回調函數。當加載成功后，我們會調用AppCan彈動接口為浮動窗口添加彈動效果，並設定彈動背景色。大家可以使用范例應用來體驗一下。

旁支

在完成頁面后，我們需要對頁面中的元素進行布局。使用彈性盒子，將使這個布局工作的難度降低很多。我們定一個目標,如下圖：

我們可以對他進行如下區域划分。
  • 左側定寬圖片區域
    • 圖片子區域
  • 右側文字區域
    • 文字正文區域
    • 文章屬性區域
我們在index_content.html種進行布局，代碼如下：
 
[html]  view plain copy
  1. <div onmousedown='zy_touch('btn-act')' class='ubb ub b-gra t-bla lis'>  
  2. <div class='lis-th ub-img im'>  
  3. <div class='ub-f1 ub ub-ver'>  
  4. <div class='ulev1'><標題名>  
  5. <div class='ulev-1 umh4 t-gra'>文本說明</div>  
  6. <div class='ub ub-ac t-gra ulev-2'>  
  7. <div class='umh2 umw2 ub-img ' style='background-image:url(css/img/icon1.png);'>  
  8. <div class='ub-f1'>收藏數</div>  
  9. <div class='umh2 umw2 ub-img ' style='background-image:url(css/img/icon2.png);'>  
  10. <div class='ub-f1'> 評論數</div>  
  11. </div>  
  12. </div>  
  13. </div>  

上述代碼中，我們首先定義了一個容器，通過class='ubb ub b-gra t-bla lis'設定容器的下邊框為灰色(ubb b-gra)，文字色為黑色(t-bla)，容器采用彈性盒子布局(ub)，容器是一個list條目(lis)然后我們在容器中構建了一個縮略圖元素class='lis-th ub-img im'，指定了縮略圖大小(lis-th)，定義了縮略圖的顯示方式(ub-img)和縮略圖圖片資源(im)。由於圖片區域定寬，文字區域是彈性的，因此我們為文字區域構建了容器ub-f1 ub ub-ver，容器寬度為彈性(ub-f1)，容器也采用彈性盒子布局(ub)，容器中的元素采用縱向布局(ub-ver)。我們分別在容器中加入標題、文本說明。收藏評論欄我們認為又是一個容器，這個容器中的字元素采用橫向布局。我們在其中加入兩個小圖片和兩段文字“收藏數”和“評論數”。到此我們就完成了這個界面的布局。

這個例子只是一個簡單的布局應用范例，通過這個例子來展示，AppCan UI2.0在布局頁面時的簡便性。

 
 

皮膚-元素的美化

當我們為一個元素設定完布局和位置后，接着就是要對這個元素進行美化。使人舒服的外表是吸引使用者的重要因素。AppCan UI2.0框架中對一個元素的效果屬性分化為幾類，通過這些不同類別屬性的組合來完成對元素UI的設定。

 
 

大小位置形狀控制

  • 圓角類別: uc-{類型}[類型] [類別]

    uc-tl, uc-tr, uc-bl, uc-br , uc-t, uc-b, uc-r , uc-l, uc-a, uc-n, uc-tl1, uc-tr1, uc-bl1, uc-br1, uc-t1, uc-b1, uc-r1, uc-l1, uc-a1, uc-a2, uc-a3

  • 陰影類別: us [類別]和us-i [類別]

    us,us1,us-i

  • 比例類別:ulev[類別](由於元素的控制主要通過em來進行相對控制，ulev可以對默認比率進行放大縮小)

    ulev2,ulev1,ulev0,ulev-1,ulev-2

  • 浮動類別: ufl和ufr
  • 限寬類別: ulim
  • 單行類別: uinl
  • 邊距類別: uinn[類別]

    uinn,uinn1,uinn2,uinn3,uinn4

  • 最小高寬類別: um{w或h}[類別]

    umh1,umh2,umh3,umh4,umh5,umh6,umw1,umw2,umw3

  • 文字對齊類別:tx-{類型}

    tx-l,tx-r,tx-c

  • 文字縮略類別:ut-s
  • 邊框類別:ub{類型}[類別]

    ubt,ubb,ubr,ubl,uba,uba1,uba2

  • 隱藏類別:uhide
  • 間隔類別:umar-{類型}

    umar-b

色彩控制

UI2.0框架對元素的色彩划分為邊框色、文字色、背景底色和背景遮蓋層

  • 背景遮蓋類別: c-m{類別}

    c-m1,c-m2,c-m3,c-m4,c-m5,c-m6,c-m7

  • 背景底色類別: c-{色彩}[類別]

    c-blu,c-blu1, c-blu2, c-blu3, c-blu4,c-wh, c-bla,c-gra,c-gra1,c-gra2,c-gre,c-red,c-yel

  • 文字色類別:t-{色彩}[類別]

    t-bla,t-wh,t-gra,t-blu

  • 邊框色類別:b-{色彩}[類別]

    b-bla,b-wh,b-gra,b-gra1,b-blu

資源控制

UI2.0框架一些常用圖片資源進行了定義。例如搜索圖標等。

  • 資源類別:res{類別}

    res1,res2,res3,res4,res5,res6,res7,res8,res9,res10

AppCan UI2.0框架對一個元素的基礎屬性進行了拆分整理，通過不同的組合來定制元素效果，同時這個方案也是一種規則，開發者可以根據具體的實際情況在對應的類別中擴展自己需要的特效。遵循這個規則可以提高代碼的可重復利用率和維護管理效率，避免團隊開發中由於各種自定義類別混亂定義引起的UI適配和維護問題。同時使用UI2.0框架構建的控件，代碼量將會極大地減少。下面一節我們將對各種常用在應用中的控件的實現來使大家了解UI2.0在UI實現上的巨大優勢。



UI2.0中的控件

上面圖片展示了一些按鈕的效果，我們通過代碼看一下IDE是如何使用基礎類來定義這些按鈕的。我們選擇index_content.html，在其Body區域添加一個按鈕。在AppCan IDE(UI2.0)中，我們選擇中標紅的按鈕，進入按鈕制作向導。
 
 
在上面這個界面中，我們可以選擇建立普通按鈕、帶圖標按鈕和特殊定義按鈕例如iOS效果按鈕等。一般情況下按鈕會占滿整個容器，選擇內聯可以使按鈕和其他控件在不超出容器寬度的情況下保持在同一行。如果按鈕在標題或頁腳中，可以選擇居於左側或右側。高級模式可以對按鈕的顯示效果進行配置。
 
上面的界面中，我們可以配置按鈕的圓角、邊框、邊框色、背景色和背景遮蓋漸變色。這些效果不光是對按鈕起效，對於其他控件也是同樣的定義。這里定義的效果只是我們預置的效果，開發者如果需要定義自己的色彩時，只需要在ui-color.css中添加自己的類定義后，對代碼中的默認顏色類進行替換即可。我們添加一個深藍色的按鈕。
 
效果：
代碼：
[html]  view plain copy
  1. <!--按鈕開始-->  
  2. <div ontouchstart='zy_touch('btn-act')' class='btn uba1 b-bla uinn5 c-blu c-m1 uc-a t-wh'>確定</div>  
  3. <!--按鈕結束-->  

在上述代碼中所有子元素都未使用box-flex定義彈動屬性，容器div也未設定高度，此時，容器div的高度為三個子元素的高度和，並且隨着子元素的高度變化而變化。

首先使用btn來定義這個DIV是一個按鈕(我們為不同控件類型定義了一個標識類，用於定義一些此類控件通用的屬性)。然后使用uinn5在文字外定義了一個內邊距，這樣按鈕的高度就是內邊距+文字高度。使用uc-a定義按鈕四個圓角都為0.6em。接着我們使用c-blu指定背景色為藍色。在通過c-m1在藍色上加了一層漸變遮蓋層。使用t-wh定義文字為白色。

最后我們通過uba1指定邊框所有邊都為2px寬，並通過b-bla設定邊框色為黑色。到此就完成了一個按鈕在不點擊狀態下的效果。相對於之前UI1.0中一個普通按鈕需要一個DIV和兩個SPAN的嵌套要簡化了2/3的代碼，層次也減低到一層。現在我們為這按鈕加上點擊效果。按照標准CSS3來說，只需要使用偽類:active來設定一個類即可完成鼠標按下彈起的效果變換， 但很遺憾，在Andorid平台，這個效果大部分手機支持的都有問題。對於iOS平台這個屬性是支持的，但是如果想使這個偽類有效，則必須在代碼中加入ontouchstart，才能夠激活這個偽類。為了解決這個跨平台問題，我們提供了zy_touch接口，通過這個接口，它可以完成點擊效果的處理。

這段代碼中，我們加入了ontouchstart='zy_touch('btn-act')'，zy_touch是封裝在zy_control.js中的擴展函數，btn-act是我們預定義的一個通用控件點擊凹陷效果類。通過這個函數，我們構建了一個點擊監聽類zyClick(如果使用zy_touch還需要引用zy_click.js)，他會監聽觸摸屏事件，來控制為按鍵增加和去除點擊效果，同時可以判斷是否為點擊操作，如果判定成功，會直接調用參數中的回調函數來達到onclick事件的效果，可以解決手機瀏覽器中onclick不靈敏的問題。同時zy_touch還支持直接調用HTML代碼中的onclick屬性實現點擊效果。我們調整代碼

效果：
 
代碼：
[html]  view plain copy
  1. <!--按鈕開始-->  
  2. <div ontouchstart='zy_touch('btn-act')' onclick='alert(1)' class='btn uba1 b-bla uinn5 c-blu c-m1 uc-a t-wh uinl'>確定</div>  
  3. <!--按鈕結束-->  
我們可以看到按鈕的寬度已經不是整行顯示而是根據按鈕中的文字寬度、邊框寬度、內邊距寬度來展現。需要注意的是，uinl會和ub有效果沖突，在彈性盒子模型中，子元素需要處於塊模式(display:block)。剛才介紹的是一個最簡單的按鈕，好我們現在為按鈕增加一個圖標。在IDE中選擇按鈕向導，在按鈕類型中，選擇帶圖標按鈕。同樣配置為深藍色。
 
效果：
代碼：
[html]  view plain copy
  1. <!--按鈕開始-->  
  2. <div ontouchstart="zy_touch('btn-act')"class="btn uba1 b-bla c-blu c-m1 uc-a ub t-wh uinn5 ub-ac">          
  3.     <div class="ub-f1 ut-s">確定</div>          
  4.     <div class="umh1 umw1 ub-img res1 c-bla uc-a"></div>                  
  5. </div>  
  6. <!--按鈕結束-->  
無圖標的按鈕中，我們直接在DIV中加入了文字。這次因為有圖標我們認為按鈕中分左右兩個區域，左側文字區域自動適配寬度，右側圖標區域寬度固定。文字和圖標中線對齊。首先我們定義按鈕的外部效果class='btn uba1 b-bla c-blu c-m1 uc-a ub t-wh uinn5 ub-ac'，這個與之前的按鈕無區別，唯一添加的是 ub和ub-ac分別代表子元素采用彈性盒子布局，子元素中線對齊。我們為文字區域設定了彈性寬度(ub-f1)，並指明當文字超出容器寬度時，自動縮略不換行(ut-s)。最后我們定義了一個圖片，這個圖片高(umh1)寬(umw1)，采用ub-img控制其縮放，res1代表箭頭圖片，c-bla代表圖片區域默認背景色，uc-a使其有圓角，由於圖片寬度較小，配合圓角使其象一個圓形。這就是用彈性盒子布局定義的一個帶圖標按鈕。那么如何使圖標居於左側呢？彈性盒子模型的便利性在這里有很好的體現。我們在容器中加入ub-rev類，它設定子元素反向排序，很簡單實現圖標居於左側。

那如何使圖標上下布局呢？一樣很簡單，只需要在容器中加入ub-ver，定義容器中的子元素縱向排序即可。
[html]  view plain copy
  1. <!--按鈕開始-->  
  2. <div ontouchstart='zy_touch('btn-act')' class='btn uba1 b-bla c-blu c-m1 uc-a ub t-wh uinn5 ub-ac ub-ver'>  
  3.     <div class='ub-f1 ut-s'>確定</div>  
  4.     <div class='umh1 umw1 ub-img res1 c-bla uc-a'></div>  
  5. </div>  
  6. <!--按鈕結束-->  
 
通過上面的例子可以看到其實一個按鍵就是一個容器加一些子元素進行彈性盒子布局，然后為容器和子元素加一些控制和顯示效果。而其他控件也是這種方式，只是顯示效果定制上稍有不同罷了。

 

容器

在UI2.0中我們認為所有控件其實都是容器塊配合子容器和子元素組合。因此，容器是我們最基礎的組件之一。在應用開發中，經常需要把幾個按鈕、復選框或其他控件合並成一組進行顯示。在這種情況下一個滿足效果的容器將是必不可少的。我們接下來將講解，如何利用AppCan來構建一個容器並按照我們的想法對元素進行排列打開AppCan IDE(UI2.0)，我們選擇 中標紅的按鈕，進入容器制作向導。
可以看到容器分為縱向排列容器和橫向排列容器。默認容器中會建立三個子元素，如果用戶需要自己控制子元素的話可以選擇“無條目”來建立一個空的容器。同時與按鍵控件相同，我們可以很簡單為容器指定各種效果。我們接下來通過范例來演示如何使用容器。這次的范例是一個登陸的頁面
這個頁面中，縱向排列的兩個編輯區域用來演示縱向排列容器。兩個按鈕用於演示橫向排列。首先此頁面高度不會超過一個屏幕，因此我們不需要實現頁面的拖動。因此不需要建立一個浮動View來顯示內容區域，而可以直接在內容區域添加代碼。 Demo008為此范例的初始界面。我們在此基礎上進行調整來完成登陸頁面。 Demo008范例首先在插入編輯區域和按鈕區域前，我們先對內容區域進行調整。content區域調整后的代碼。
 
[html]  view plain copy
  1. <div id='content' class='uinn2 c-org1 ub-f1'></div>  
上述代碼中我們為內容區域設定了橙色背景(c-org1)，彈性區域(ub-f1)自動適配屏幕，最后設定其內邊距(uinn2)，這樣可以使后面我們將要添加的元素不會緊貼內容區域邊界。准備完成后，我們在頁面中添加一個縱向排列容器。
 
[html]  view plain copy
  1. <!--塊容器開始-->  
  2. <div class='ub ub-ver uba b-gra uc-a1 t-wh '>  
  3. <div class='ubb b-gra c-blu c-m1 uinn uc-t1'>條目1</div>  
  4. <div class='ubb b-gra c-blu c-m1 uinn '>條目2</div>  
  5. <div class='c-blu c-m1 uinn uc-b1 '>條目3</div>  
  6. </div>  
  7. <!--塊容器結束-->  

我們構建了一個默認的帶三個條目的縱排塊容器。由於此范例中只需要兩個條目，且背景為統一的白色背景，因此我們需要對生成的代碼進行調整，刪掉條目2，並去掉條目背景色，同時為容器加上白色背景。修改后效果和代碼如下
[html]  view plain copy
  1. <!--塊容器開始-->  
  2. <div class='ub ub-ver uba b-gra uc-a1 t-bla c-wh'>  
  3. <div class='ubb b-gra uinn uc-t1'>條目1</div>  
  4. <div class='uinn uc-b1 '>條目3</div>  
  5. </div>  
  6. <!--塊容器結束-->  

上圖我們可以看到，我們調整了容器的背景為白色，字體色彩為黑色，子條目沒有背景。這時我們就已經創建了一個符合要求的容器了。接下來，我們假如編輯框控件來替換條目1和條目3。

我們先通過IDE中的編輯框向導

 
插入一個編輯框到條目1位置（選擇帶標簽），替換后的條目1部分代碼如下
[html]  view plain copy
  1. <div class='ubb b-gra uinn uc-t1'>  
  2. <!--文本開始-->  
  3. <div class='ub t-bla ulab'><div class='uinn ulim'>標簽標簽</div>  
  4. <div class='ub-f1 c-blu uba uc-a1 b-gra us-i uinput uinn4'>  
  5. <input placeholder='hello' type='text' class='uc-a1'>  
  6. </div>  
  7.  </div><!--文本開始-->  
  8. </div>  

目前的效果和我們需要的效果有些偏差我們需要調整一下。首先標簽部分不需要再有一個內邊距(uinn)，其次編輯框也不需要有任何的背景邊框效果，我們刪掉這些類。調整后的效果如下
 
代碼：
[html]  view plain copy
  1. <div class='ubb b-gra uinn uc-t1'>  
  2. <!--文本開始-->  
  3. <div class='ub t-bla ulab ub-ac'><div class='ulim'>用戶名</div>  
  4. <div class='ub-f1 uinput uinn4'>  
  5. <input placeholder='hello' type='text' class='uc-a1'>  
  6. </div>  
  7. </div><!--文本開始-->  
  8. </div>  

上面的代碼可以看到，對於一個編輯框，我們采用了彈性盒子模型，編輯區域通過ub-f1實現了寬度彈性變化。到此，我們完成了條目1部分的替換，接着我們拷貝這個代碼替換條目3。最終效果如下
代碼：
[html]  view plain copy
  1. <div id='content' class='uinn2 c-org1 ub-f1'>  
  2.     <!--塊容器開始-->  
  3.     <div class='ub ub-ver uba b-gra uc-a1 t-bla c-wh'>  
  4.         <div class='ubb b-gra uinn uc-t1'>  
  5.             <!--文本開始-->  
  6.             <div class='ub t-bla ulab ub-ac'><div class='ulim'>用戶名：</div>  
  7.                 <div class='ub-f1 uinput uinn4'>  
  8.                     <input placeholder='hello' type='text' class='uc-a1'>  
  9.                 </div>  
  10.             </div>  
  11.             <!--文本開始-->  
  12.         </div>  
  13.         <div class='ubb b-gra uinn uc-t1'>  
  14.             <!--文本開始-->  
  15.             <div class='ub t-bla ulab ub-ac'><div class='ulim'>密  碼：</div>  
  16.                 <div class='ub-f1 uinput uinn4'>  
  17.                     <input placeholder='hello' type='text' class='uc-a1'>  
  18.                 </div>  
  19.             </div>  
  20.             <!--文本開始-->  
  21.         </div>  
  22.     </div>  
  23. <!--塊容器結束-->  
  24. </div>  

下面我們再增加兩個按鈕。首先在編輯區域容器下方再構建一個橫向排列容器。
 
這個容器用來容納我們的那兩個按鈕。
[html]  view plain copy
  1. <div class='ub uba b-gra c-blu c-m1 t-wh uc-a1 '>  
  2. <div class='ubr b-gra ub-f1 uinn uc-l1'>條目1</div>  
  3. <div class='ubr b-gra ub-f1 uinn '>條目2</div>  
  4. <div class='ub-f1 uinn uc-r1'>條目3</div>  
  5. </div>  
  6. </div>  

建立好的容器只有兩個按鈕，也不需要任何背景。我們對模板進行刪減。

清理后的代碼如下



接着我們需要加入兩個按鈕來替換條目1和條目3的文字，通過IDE的按鍵控件向導我們插入兩個按鈕，通過高級模式調整好色彩，並修改文字色。
[html]  view plain copy
  1. <!--塊容器開始-->  
  2. <div class='ub '>  
  3. <div class='ub-f1 uinn'>  
  4. <!--按鈕開始-->  
  5. <div ontouchstart='zy_touch('btn-act')' class='btn uba b-gra uinn5 c-wh c-m1 uc-a t-bla'>確定</div>  
  6. <!--按鈕結束-->  
  7. </div>  
  8. <div class='ub-f1 uinn'>  
  9. <!--按鈕開始-->  
  10. <div ontouchstart='zy_touch('btn-act')' class='btn uba b-org uinn5 c-org c-m1 uc-a t-wh'>確定</div>  
  11. <!--按鈕結束-->  
  12. </div>  
  13. </div>  
  14. <!--塊容器結束-->  

到此，我們完成了基本的界面排布。我們再稍微的調整一下幾個容器的間距即可。 Demo009范例是調整完后的完整代碼。我們通過一個范例來展現了AppCan UI2.0中的容器的使用方法。目前我們看到不管是一個容器、一個按鈕或一個編輯框，都是依賴於彈性盒子模型實現的布局。
 

編輯框

上一節呢，我們用到了編輯框，這里我們對編輯框的使用作一個詳細的講解。AppCan UI2.0平台提供了多種編輯框的默認效果。
有普通單行文本框、文本區域和搜索框。同時控件與按鍵控件一樣，也支持高級模式來定義效果。上一個例子里我們使用了普通的編輯框，這個例子我們主要介紹搜索框和文本區域。
 
 

搜索框

一般搜索框常會用在標題下面，我們對index.html頁面做一下調整，在標題欄和內容區域之間插入一個搜索框。代碼如下
[html]  view plain copy
  1. <!--文本開始-->  
  2. <form id='search' onsubmit='alert('submit')'>  
  3. <div class='t-bla ub uba uc-a b-gra us-i uinput ub-rev uinn4'>  
  4. <div class='res6 umw1 ub-img '>  
  5. </div>  
  6. <div class='ub-f1 uinn1'>  
  7. <input placeholder='search' type='text' class='' style='background:none;'>  
  8. </div>  
  9. </div>  
  10. </form>  
  11. <!--文本結束-->  

上面代碼我們可以看到搜索框被放置到一個form表單里，這樣手機的輸入法會根據輸入框的類型動態的匹配鍵盤效果。例如在鍵盤上確認按鈕顯示'搜索'等。由於在content區域前插入了搜索框，那么下方構建浮動窗口的代碼中，浮動窗口位置也需要進行調整為Header高度加上搜索框高度。
[javascript]  view plain copy
  1. zy_con('content', 'index_content.html', 0, $$('header').offsetHeight+$$('search').offsetHeight);  
  2. zy_resize('content',0,$$('header').offsetHeight+$$('search').offsetHeight);  

調整后的代碼見附件Demo0010范例。

目前搜索框兩邊的圓角並沒有使其顯示成半圓形，我們只需要調整一下搜索框容器的uc-a類為uc-a2即可，uc-a2是一個更大的圓角。最終效果如下

 
 

輸入域

接下來我們在index_content.html中添加一個輸入域。通過編輯框向導創建一個帶標簽的輸入域。
 
插入代碼后效果如下。
[html]  view plain copy
  1. <!--文本開始-->  
  2. <div class='ub t-bla ulab'>  
  3. <div class='uinn ulim'>  
  4. 標簽標簽  
  5. </div>  
  6. <div class='ub-f1 uba uc-a1 b-gra us-i uinput uinn4 ub ub-ver'>  
  7. <textarea placeholder='hello' name='area1' class='uc-a1 ub-f1'></textarea>  
  8. </div>  
  9. </div>  
  10. <!--文本結束-->  

這里呢我們希望標簽和輸入域縱向排列。很簡單，我們在容器后面加入ub-ver使子元素縱向排列。
[html]  view plain copy
  1. <div class='ub t-bla ulab ub-ver'>  
  2. <div class='uinn ulim'>  
  3. 標簽標簽  
  4. </div>  
  5. <div class='ub-f1 uba uc-a1 b-gra us-i uinput uinn4 ub ub-ver umh6'>  
  6. <textarea placeholder='hello' name='area1' class='uc-a1 ub-f1'></textarea>  
  7. </div>  
  8. </div>  

編輯框的高度我們添加umh6來控制，如果需要調整別的高度，可以在ui-base.css中umh6下方參照umh6定義自己的高度類，並替換上述代碼中的umh6即可。

我們對上面的代碼進行一個分析。

首先最外側是一個容器，這個容器采用彈性盒子架構(ub)，定義了默認文本色(t-bla)，由於有標簽，所以我們加入了標簽類(ulab)，他主要控制標簽和編輯區域的橫向間距，如果縱向排列這個類可以刪除。容器中有兩個子元素，一個是標簽一個是子容器。標簽元素使用uinn為齊添加內邊距，使用ulim來限制其長度。子容器用於定義編輯框的效果即陰影(us-i)、高度(umh6)、邊框(b-gra、uba)。為了使輸入域與邊框間留下空隙，我們為子容器加上內邊距(uinn4)，uinput定義textarea元素的效果，ub定義此子容器依然是一個彈性盒子。由於輸入域在適配中的特殊性，我們為子容器定義ub-ver，要求妻子元素縱向排列。接着我們為textarea指定ub-f1，使其撐滿整個容器內邊距內區域。最后的代碼看附件Demo011范例。

 

下拉列表控件

下拉列表控件經常用於在有限的區域內實現單選效果或多選，這個控件在應用開發中非常常見。我們對select標簽進行了封裝，使其有可定制化的現實效果。打開AppCan IDE(UI2.0)，我們選擇 中標紅的按鈕，進入下拉列表制作向導。
下拉列表同之前的控件一樣，可以通過高級模式配置效果。我們建立一個帶標簽的下拉列表，並對其代碼進行講解。 Demo012范例
 
效果：
代碼：
[html]  view plain copy
  1. <!--下拉列表開始-->  
  2. <div class='ub t-bla'>  
  3. <div class='uinn ulim'>標簽標簽</div>  
  4. <div class='ub-f1 ub uba uc-a1 c-wh b-org us-i sel'>   
  5. <div class='ub-f1 ut-s uinn ulev-1 tx-l'>下拉列表</div>   
  6. <div class='ubl b-org c-red c-m2 umw2 ub ub-pc uc-r2 ub-ac'>   
  7. <div class='ub-img umw1 umh1 res3'></div>   
  8. </div>  
  9. <select name='sel0' selectedindex='0' id='sel0' onchange='zy_slectmenu(this.id)'>  
  10. <option>item1</option>   
  11. <option>item2</option>   
  12. <option>item3</option>   
  13. <option>item4</option>   
  14. </select>   
  15. </div>  
  16. </div>   

上面代碼中，我們可以看到這個控件是由一個容器中包含的標簽部分和下拉列表部分組成。下拉列表中又分三個部分：

  • 文字區域-用於顯示選中的條目內容
  • 按鈕區域-是一個容器包含一個下箭頭的圖標。這個圖標通過彈性盒子進行居中顯示
  • Select控件-是一個與整個下拉列表容器等高寬的透明控件，這樣用戶看到的是我們的文字區域和按鈕區域，但實際點擊時，點擊的是系統Select控件。在select控件中我們通過zy_selectmenu接口截取用戶選中的條目，修改文字區域內容

上述控件中，不管是最外面的容器還是子容器，我們都使用的是彈性盒子模型。

 
 

導航欄

在應用開發中，導航欄是組織內容的一種常見方式。它可以給用戶更直觀的選擇和良好的交互體驗。AppCan IDE UI2.0)框架對UI1.0中的導航欄控件進行了調整，使用新的彈性盒子模型重新構建了代碼，更加便於開發者進行調整定制。我們通過選擇IDE控件欄中 標紅的按鈕，來構建一個導航欄。導航欄也可使用高級模式來設定背景色和漸變。我們在index.html中的footer部分構建一個導航欄。 Demo013范例。
 
效果：


代碼：
[html]  view plain copy
  1. <!--iPhone導航條開始-->  
  2. <div class='ub c-bla c-m1 tab t-wh'>  
  3. <input class='uhide' type='radio' name='tabSwitch' checked='true'>  
  4. <div ontouchstart='zy_touch('',zy_for)' class='ub-f1 ub ub-ver tab-act'><div class='ub-f1 ub-img5 tp-info'></div><div class='uinn ulev-2 tx-c'>新聞</div></div>  
  5. <input class='uhide' type='radio' name='tabSwitch'>  
  6. <div ontouchstart='zy_touch('',zy_for)' class='ub-f1 ub ub-ver tab-act'><div class='ub-f1 ub-img5 tp-home'></div><div class='uinn ulev-2 tx-c'>新聞</div></div>  
  7. <input class='uhide' type='radio' name='tabSwitch'>  
  8. <input class='uhide' type='radio' name='tabSwitch'>  
  9. <div ontouchstart='zy_touch('',zy_for)' class='ub-f1 ub ub-ver tab-act'><div class='ub-f1 ub-img5 tp-set'></div><div class='uinn ulev-2 tx-c'>新聞</div></div>  
  10. <input class='uhide' type='radio' name='tabSwitch'>  
  11. <div ontouchstart='zy_touch('',zy_for)' class='ub-f1 ub ub-ver tab-act'><div class='ub-f1 ub-img5 tp-shop'></div><div class='uinn ulev-2 tx-c'>新聞</div></div>  
  12. <input class='uhide' type='radio' name='tabSwitch'>  
  13. <div ontouchstart='zy_touch('',zy_for)' class='ub-f1 ub ub-ver tab-act'><div class='ub-f1 ub-img5 tp-talk'></div><div class='uinn ulev-2 tx-c'>新聞</div></div>  
  14. </div>  

上述代碼可以看到，整個導航欄是由一個彈性盒子容器包含5個條目組成的，如果用戶需要事先大於5個或小於5個的導航欄，只需要拷貝復制或刪除條目即可。每個條目又是由一個radiobox控件和一個縱排的彈性盒子子容器組成。在子容器中，包含圖片和文字兩個子元素。我們對這些組成部分進行一下分析。

  • radiobox控件-此控件為隱藏控件，並不現實(uhide)，他的作用是通過和其他具有同樣name屬性的radiobox控件組合使用，來實現條目的單項選擇，配合后面子元素的CSS類屬性實現選中和未選中效果。
  • 子容器-用於容納每一個條目的子元素。同時負責顯示選中和未選中狀態(tab-act)。我們看一下ui-tab.css中tab-act的定義。
[html]  view plain copy
  1. input[type='radio']:checked + div.tab-act  
  2. {  
  3. background-color:rgba(255,255,255,0.1) !important;  
  4. border-radius:0.3em;  
  5. border: 0px;  
  6. background-image: none;  
  7. }  

上面代碼可以很清晰的看到當一個radiobox 被選中狀態下，他相鄰的那個div中的tab-act類表示一個透明度為0.1的圓角矩形。未選中狀態下無效果。通過這個類配合之前的單選鈕我們可以很簡單的實現條目的選中未選中狀態變化。

  • 圖片元素-用於顯示每一個條目得圖片(tp-info)。由於每個條目的圖片不同，需要為每個圖片元素設定圖片資源。目前我們在ui-tab.css中預置了六組圖片資源類，用戶可以根據需求替換相應的圖片資源。每一組圖片資源分選中狀態和為選中狀態，我們以tp-info為例進行分析。
[html]  view plain copy
  1. input[type='radio'] + div>div.tp-info{  
  2. background: url(res-apple/info.png) 50% 50% no-repeat;  
  3. }  
  4.   
  5. input[type='radio']:checked + div>div.tp-info{  
  6. background: url(res-apple/info-act.png) 50% 50% no-repeat;  
  7. }  

上述代碼中，可以看到當一個radio未選中時，與他相鄰的div中的子div元素具有的tp-info屬性對應背景圖片為info.png。當選中時，與他相鄰的div中的子div元素具有的tp-info屬性對應背景圖片為info-act.png。即配合radiobox我們可以簡單的實現圖片的變化。

導航欄並不一定都是這種顯示效果，我們修改一下代碼實現以下另一種效果。

這是上面是中文下方是英文的效果。附件是代碼 Demo014范例。我們調整了子容器的元素，從一個圖片變為了兩組文字框。
[html]  view plain copy
  1. <div ontouchstart='zy_touch('',zy_for)' class='ub-f1 ub ub-ver tab-act'><div class='uinn3 tx-c'>新聞</div><div class='uinn ulev-1 tx-c'>news</div></div>  

上面展示的良種效果會有些問題，我們可以看到每一個子容器都是通過ub-f1進行等分的，但在文章最開始我們介紹時提到過，如果自容器中的內容並不等長時，瀏覽器會動態的調整每個字元素的寬度即時齊都是相同的flex屬性。如果確實出現了文字不等長的情況，我們該如何調整呢？我們調整一下Demo014范例的代碼 Demo015范例。
[html]  view plain copy
  1. <div ontouchstart='zy_touch('',zy_for)' class='ub-f1 ub ub-ver tab-act uinn3'>  
  2. <div class='tx-c umh2 umar-b umar-t'>  
  3. <div class='ub-con ulev-1 ut-s'>早間新聞</div>  
  4. </div>  
  5. <div class='ulev-1 tx-c umh1'>  
  6. <div class='ub-con'>news</div>  
  7. </div>  
  8. </div>  

相對於之前，修改后我們為文字外添加了一個容器，通過ub-con定義此文字區域的高寬與父元素相同。而之前每一個文字區域的高度都是被文字撐開的，所以此時為了保證文字區域的高度，我們分別為兩個文字區域設定了umh2和umh1的最小高度值。由於ub-con定義使用了position:absolute和height:100%屬性，則其高度是父容器的邊框高+內邊距高+內容高，因此我們不能為原來的文字區域再指定內邊距，我們為條目容器指定了uinn3的內邊距來代替原來為文字區域設定的uinn3，通過為上方的文字區域指定上下外邊界來為兩個文字區域進行分隔。通過這種寫法，我們可以在各條目文字長度不同的情況下保持寬度的一致。同樣，在頁面設計中ub-con也可以用到其它有類似問題的地方。

導航條的目的是為了配合頁面的切換。那么下面我們演示一下如何通過導航條快速實現頁面切換。我們目前已經有了一個index.html和一個index_content.html，那么我們為index.html頁面在建立一個內容頁面。復制index_content.html，改名為msg_content.html。這個時候我們就有了兩個內容頁面。我們在script區域添加兩個函數

[html]  view plain copy
  1. function loadmsgcontent(){  
  2. zy_con('content', 'msg_content.html', 0, $$('header').offsetHeight);  
  3. }  
  4. function loadindexcontent(){  
  5. zy_con('content', 'index_content.html', 0, $$('header').offsetHeight);  
  6. }  

第一個函數用於修改名字為content的浮動窗口加載的頁面為msg_content.html,第二個函數用於修改content浮動窗口加載的頁面為index_content.html。然后我們為導航欄中第一個元素和第二個元素分別加上onclick事件，
[html]  view plain copy
  1. <div ontouchstart='zy_touch('',zy_for)' onclick='loadindexcontent()' class='ub-f1 ub ub-ver tab-act uinn3'>  
  2. <div class='tx-c umh2 umar-b umar-t'>  
  3. <div class='ub-con ulev-1 ut-s'>早間新聞</div>  
  4. </div>  
  5. <div class='ulev-1 tx-c umh1'>  
  6. <div class='ub-con'>news</div>  
  7. </div>  
  8. </div>  
  9. <div ontouchstart='zy_touch('',zy_for)' onclick='loadmsgcontent()' class='ub-f1 ub ub-ver tab-act uinn3'>  
  10. <div class='tx-c umh2 umar-b umar-t'>  
  11. <div class='ub-con ulev-1 ut-s'>新聞</div>  
  12. </div>  
  13. <div class='ulev-1 tx-c umh1'>  
  14. <div class='ub-con'>news</div>  
  15. </div>  
  16. </div>  

此時我們可以看到，當我們點擊第一個條目和第二個條目時，中間區域的網頁內容發生了改變。范例工程參閱附件 Demo016范例
 
 

單選框和復選框

單選和復選框是應用中常見的組件，他們一般都會按組的方式實現。我們通過IDE 中標紅的兩個按鈕來生成復選和單選控件。我們打帶復選框向導。
構建一個單個復選框按鈕，並對其代碼進行分析
代碼：
[html]  view plain copy
  1. <!--復選框開始-->  
  2. <input type='checkbox' name='che1' class='uhide' checked='checked' value=''>   
  3. <div onclick='zy_for(event)' ontouchstart='zy_touch('btn-act')' class='ub uc-a1 uba c-gra c-m2 b-gra t-bla uinn5 '>  
  4. <div class='ub-f1 ut-s tx-l' >item</div>  
  5. <div class='che-icon ub-img umw1'></div>   
  6. </div>  
  7. <!--復選框結束-->  

述代碼可以看到一個復選框由一個隱藏(uhide)的checkbox和一個復選框容器組成。復選框容器包含一個文字區域和一個選中狀態圖標。當用戶點擊這個復選框容器時觸發onclick函數，會調用zy_for函數，此函數會對這個DIV元素之前的Input標簽的checked屬性做取反操作，即如果checked為true則變為false，為false則變為true。與之前select和導航欄控件機制一樣，我們通過input和后面元素的CLASS類組合通過input的狀態變化達到更換選中狀態圖標的效果。我們可以看一下che-icon這個類的定義。
[html]  view plain copy
  1. input[type=checkbox]+div>div.che-icon {  
  2. background-color: transparent;  
  3. background-image: url(images/icons-18-white_39.png);  
  4. }  
  5. input[type=checkbox]:checked+div>div.che-icon {  
  6. background-color: transparent;  
  7. background-image: url(images/icons-18-white_37.png);  
  8. }  


上述代碼種，當input被選中時，其相鄰的div中的子Div元素的che-icon屬性會設定圖片為icons-18-white_37.png。如果未選中則設定為icons-18-white_39.png。通過這里我們可以看到，我們在控件中廣泛采用了input和類進行組合的方式非常簡單的實現各種效果。

復選框還有一種變形，我們看看如下范例Demo017范例，通過向導選擇

 
在index_contet.html中添加一個水平分組復選框。效果如下
 
代碼：
[html]  view plain copy
  1. <!--復選框開始-->  
  2. <div class='ub uc-a1 t-bla c-gra c-m2 uba b-gra tx-c'>  
  3. <input type='checkbox' name='che1' class='uhide' value=''>  
  4. <div onclick='zy_for(event)' class='uinn5 ubr b-gra uc-l1 ub-f1 che'>item</div>  
  5. <input type='checkbox' name='che2' class='uhide' value=''>  
  6. <div onclick='zy_for(event)' class='uinn5 ubr b-gra ub-f1 che'>item</div>  
  7. <input type='checkbox' name='che3' class='uhide' value=''>  
  8. <div onclick='zy_for(event)' class='uinn5 uc-r1 ub-f1 che'>item</div>  
  9. </div>  
  10. <!--復選框結束-->  

水平復選框分組其實就是一個容器包含了三個子元素，每個子元素配合一個input標簽來控制其效果(che)。我們看一下che類的代碼
[html]  view plain copy
  1. input[type=checkbox]:checked+div.che {  
  2. box-shadow:inset 0 1px 2px rgba(0,0,0,0.6);  
  3. }  

上述代碼表示當input被選中時，為元素添加一個內陰影。

對於縱向排列的復選框分組就不作介紹了，大家可以自己通過模板建立一個，研究一下代碼。它其實就是一個容器里放了多個單條復選框而已。

單選框和復選框基本代碼和設計都是一致的只是單選框的隱藏input標簽類型為radio而已。大家可以研究一下ui-input.css中的類定義

列表控件

有人說80%的應用界面都是列表形式的，沒統計過但是從大概的感覺上可以認為沒有什么偏差。AppCan IDE UI(2.0)中，提供了新構建的列表模板。我們通過IDE中的列表向導 進行構建 Demo018范例。
這次我們構建一個帶圖標的列表。
 
效果：
 
代碼：
[html]  view plain copy
  1. <!--列表開始-->  
  2. <div class='uba b-gra c-wh us uc-a '>  
  3. <div ontouchstart='zy_touch('btn-act')' class='uc-t ubb c-m2 ub b-gra t-bla ub-ac lis'>  
  4. <div class='lis-icon ub-img im'></div>  
  5. <div class='ub-f1 ut-s'>設置</div>  
  6. <div class='tx-r t-blu ulev-1'>Old Phone</div>  
  7. <div class='res8 lis-sw ub-img'></div>  
  8. </div>  
  9. <div ontouchstart='zy_touch('btn-act')' class=' ub ubb b-gra c-m2 t-bla ub-ac lis'>  
  10. <div class='lis-icon ub-img im'></div>  
  11. <div class='ub-f1 ut-s'>設置</div>  
  12. <div class='tx-r t-blu ulev-1'>Old Phone</div>  
  13. <div class='res8 lis-sw ub-img'></div>  
  14. </div>  
  15. <div ontouchstart='zy_touch('btn-act')' class='uc-b c-m2 ub t-bla ub-ac lis'>  
  16. <div class='lis-icon ub-img im'></div>  
  17. <div class='ub-f1 ut-s'>設置</div>  
  18. <div class='tx-r t-blu ulev-1'>Old Phone</div>  
  19. <div class='res8 lis-sw ub-img'></div>  
  20. </div>  
  21. </div>  
  22. <!--列表結束-->  

這是一個三個條目的列表，很明顯，這個列表與其他控件基本組成元素都是一致的，也是一個容器、子容器加一些元素構造而成。我們主要對一個條目進行講解。
[html]  view plain copy
  1. <div ontouchstart='zy_touch('btn-act')' class='uc-t ubb c-m2 ub b-gra t-bla ub-ac lis'>  
  2. <div class='lis-icon ub-img im'></div>  
  3. <div class='ub-f1 ut-s'>設置</div>  
  4. <div class='tx-r t-blu ulev-1'>Old Phone</div>  
  5. <div class='res8 lis-sw ub-img'></div>  
  6. </div>  

這是列表的第一個條目，我們一行一行進行解析。
[html]  view plain copy
  1. <div ontouchstart='zy_touch('btn-act')' class='uc-t ubb c-m2 ub b-gra t-bla ub-ac lis'>  

這是一個容器，由於是第一行，所以他的圓角要和外面容器的圓角保持匹配，因此我們為其設定圓角(uc-t)，這個容器和下一行需要一條分割線，我們設定這個子容器右下邊界(ubb)，邊界色彩為(b-gra)，這個條目有一點簡便效果，我們采用的是(c-m2)由於其位於容器內，這個遮蓋層會和父容器背景色進行組合。這個子容器包含多個元素，這些元素也是以彈性盒子模型進行排版(ub)，文字色彩定義為黑色(t-bla)，由於容器中的子元素高低不定，因此我們要求其子元素中線對其(ub-ac)。最后是設定列表條目的默認效果(lis 建立了內邊距)。
[html]  view plain copy
  1. <div class='lis-icon ub-img im'></div>  

這是容器中的第一個元素，它是一個小圖片，我們設定了這個圖片的高寬(lis-icon)，同時設定了這個圖片是(im)，圖片的展示參數通過(ub-img)來設定。 備注：

默認工程中的ui-img.css定義了我們范例中的范例資源圖片，而ui-res.css是我們控件需要的資源圖片。

[html]  view plain copy
  1. <div class='ub-f1 ut-s'>設置</div>  
這一行設定了一個彈性區域，他會撐滿真個容器的空閑區域(ub-f1)，當文字長度超過可容納區域后，進行縮略(ut-s)。
 
[html]  view plain copy
  1. <span style="font-family: HelveticaNeue, helvetica, arial, clean, sans-serif; "><div class='tx-r t-blu ulev-1'>Old Phone</div></span>  
這一行定義了一個文字去，這個文字區的大小會根據文字長度進行調整。我們通過ulev-1對此地的文字進行縮小顯示。並通過t-blu設定其顏色為蘭色。

[html]  view plain copy
  1. <div class='res8 lis-sw ub-img'></div>  

最后這個元素是一個小箭頭圖標。lis-sw定義了他的大小，res8指定了所用的資源，ub-img定義了圖片的展示方式。

通過這部分解析我們看到一個列表其實也是由最基本的容器和元素組合而成。通過彈性盒子模型，真個列表的排布會非常簡潔明了。


開關按鈕

在UI2.0框架中，我們對開關按鈕進行了重新實現，配合上一個范例，我們在第一個條目中插入開關按鈕 來體驗一下他的效果。 Demo019范例
 
代碼：
[html]  view plain copy
  1. <div ontouchstart='zy_touch('btn-act')' class='uc-t ubb c-m2 ub b-gra t-bla ub-ac lis'>  
  2. <div class='lis-icon ub-img im'></div>  
  3. <div class='ub-f1 ut-s'>設置</div>  
  4. <!--開關按鈕開始-->  
  5. <input class='uhide' type='checkbox' checked='true' >  
  6. <div class='uba b-gra swi swi-bg uc-a1' onclick='zy_for(event)'></div>  
  7. <!--開關按鈕結束-->  
  8. </div>  
上面代碼中，我們把前一個范例的第一個條目后面的兩個元素刪除，替換了一個開關按鈕。開關按鈕的動畫變換也是依賴於input的變化進行控制。其中swi定義了這個控件的變形動畫效果，swi-bg定義了這個開關按鈕的背景 ，swi和input進行配合定義了不同狀態下的效果。
[html]  view plain copy
  1. input[type=checkbox]:checked + div.swi{  
  2. background-position:-0.1em;  
  3. }  
  4. input[type=checkbox] + div.swi  
  5. {  
  6. background-position:-4.01em  
  7. }  


當input標簽被選中時，swi的背景位置是-0.3em。當未被選中時，背景位置為-4.01em。通過背景圖片位置的變化完成選中狀態的變化。

通過上面的講解，我們展示了UI2.0的框架設計思想。並通過對我們預置組件代碼的分析，使大家對如何使用UI2.0框架調整界面有了一個基本的認識。我們總結一下我們公司開發人員的UI設計規則

  1. 制作前先考慮好如何組織頁面，需要如何布局，在什么地方需要幾個容器來進行排版。然后構建架子，使用默認效果類進行排版定位和美化
  2. 如果需要使用顏色，請在ui-color.css中根據文本、背景、遮蓋、邊框等分別擴展自己的類定義
  3. 如果需要調整圓角、邊距等附加屬性請在ui-base.css中進行添加。
  4. 如果需要資源，請在ui-res.css中進行擴展
  5. 如果需要布局，請在ui-box.css中進行調整
  6. 所有調整要遵循默認的命名規則。

遵守這些規則可以使你的代碼更容易被其他人閱讀，代碼復用和調整將會更加簡單。



 
 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 splay入門教程 truffle 入門教程 Konva入門教程 Redis入門教程（二） SPARQL 入門教程 Angular入門教程(一) RYU入門教程 Puppeteer 入門教程 Maven入門教程 Zipline入門教程
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM