Checkbox

1 功能說明

Checkbox 控件用來表示複選框，即選項之間不互斥，用戶可以同時選中多個選項。它是由input標籤加type="checkbox"屬性實現的。

例：<input type="checkbox">text</input>

checkbox中內容默認垂直居中水平居左，圖片與文字部分，垂直方向中心點對齊。根據文字內容自動計算換行。
- 在沒有樣式的情況下，控件大小由內容及title圖片計算獲得，最寬不應超過父控件寬度減去左右邊距。當文字內容不能在一行完全顯示時，需要換行顯示。
- 樣式指定高度。當大於title圖片高度，圖片按照原始大小顯示，當小於title圖片高度，圖片會適當縮放，以顯示完整圖片。
- 樣式指定寬度。當文字內容在一行不能完全顯示時，需要換行顯示。
- 樣式指定寬度和高度。當設定區域不足以顯示所有文字時，文字將會被截取。
水平對齊說明

text-align樣式裏處理left、center、right這三個值，其他值都無效，如果是其他值，則不生效，然後去判斷屬性align的值，也是這三個值，如果屬性也不是這三個值，就按默認的水平左對齊

2 屬性

全局屬性以及具體說明參見屬性介紹

2.1 checked

指定控件選項是否默認選中。
@value string checked/true/false

2.2 enable

指定控件是否可用，即是否響應用戶事件。
@value string true/false
@default true
可點擊(enable="true")和不可點擊(enable="false")兩種狀態下的顯示樣式效果可配置。
注：默認值爲true，除了true和false外其他值都按默認值處理。

2.3 linebreakmode

指定文字被截取時省略號的位置。
@value string head/middle/tail/none
@default none

2.4 numlines

指定固定文字顯示的行數。

2.5 shadowcolor

指定文本陰影的顏色。
注意：默認偏移量：(0,-1)。陰影無默認顏色，如果不給顏色則無陰影。

2.6 shadowoffset

指定文本陰影的偏移量。
@default (0,-1)
注：Android平臺不支持shadowoffset爲一正一負。

2.7 text

指定顯示在界面上的checkbox選項的文本。
@value string 任意的字符串
注：這裏text屬性的值被寫在開閉兩個標籤之間，例：value123，其中"value123"爲顯示的文本，不能寫作text="value123"格式。

2.8 valign

指定文本的垂直居中方式。
@value string top/middle/bottom
@default middle

2.9 align

指定文本的水平居左方式。
@value string left/center/right
@default left

2.10 value

指定checkbox控件的value值。
@value string 任意的字符串
注：value值不作爲顯示內容，僅作爲上傳服務器的參數值。

3 樣式

全局樣式以及具體說明參見樣式介紹

3.1 background-color

設置背景色。

3.2 background-image

設置背景圖片。

3.3 color

設置字體顏色。

3.4 filter

設置漸變背景色或透明度。

3.5 font-size

設置字體大小。

3.6 font-style

指定文本的字體樣式。

3.7 font-weight

設置字體是否加粗顯示。

3.8 height

指定控件高度
@default 根據文字內容計算

3.9 width

指定控件寬度
@default 根據文字內容計算，但寬度不可超出父控件顯示範圍

4 事件

4.1 onclick

針對用戶的點擊事件，並且控件在可用狀態下，觸發此事件。
checkbox點擊時會切換選中狀態，因此再次點擊也需要觸發onclick事件。

5 Examples

示例checkbox.xml

5.1 position

代碼片段1：css

<style>
    .father{left:20px;width:280px;height:30px;font-size: 15px;}
    .positionFixed{position:fixed;}
    .positionToplevel{position:toplevel;top:32px;}
</style>

代碼片段2：頁面

<body>
    <!-- positon:fixed 這是body第一個控件-->
    <input type="checkbox" class="father,positionFixed">position:fixed,body第一個控件</input>
    <!-- positon:toplevel -->
    <input type="checkbox" class="father,positionToplevel">position:toplevel,不隨頁面滾動</input>
    <!-- positon:fixed 這是body最後一個控件-->
    <input type="checkbox" class="father,positionFixed">position:fixed,body最後一個控件</input>
</body>

效果圖：

5.2 display&visibility&hide

代碼片段1：css

<style>
    .father{left:20px;width:280px;height:30px;font-size: 15px;}
    .display1{display:none;}
    .display2{display:block;}
    .visibility1{visibility:visible;}
    .visibility2{visibility:hidden;}
</style>

代碼片段2：頁面

<body>
    <!-- display -->
    <input type="checkbox" class="father,display2">display=block,顯示</input>
    <label>下方有display=none的checkbox,不顯示不佔位</label>
    <input type="checkbox" class="father,display1">display=none不顯示不佔位</input>
    <!-- visibility -->
    <input type="checkbox" class="father,visibility1">visibility=visible,顯示</input>
    <label>下方有visibility=hidden的checkbox,不顯示佔位</label>
    <input type="checkbox" class="father,visibility2">visibility=hidden,不顯示佔位</input>
    <!-- hide -->
    <input type="checkbox" hide="false" class="father">hide=false,顯示</input>
    <label>下方有hide=true的checkbox,不顯示不佔位</label>
    <input type="checkbox" hide="true" class="father">hide=true,不顯示不佔位</input>
    <!-- hide display -->
    <input type="checkbox" hide="true" class="father,display2">display=block,hide=true,應顯示</input>
    <label>下方有display=none,hide=false的checkbox</label>
    <input type="checkbox" hide="false" class="father,display1">display=none,hide=false,不顯示不佔位</input>
    <!-- hide visibility -->
    <input type="checkbox" class="father,visibility1" hide="true">visibility=visible,hide=true,顯示</input>
    <label>下方有visibility=hidden,hide=false的checkbox</label>
    <input type="checkbox" class="father,visibility2" hide="false">visibility=hidden,hide=false,不顯示佔位</input>
    <!-- display visibility -->
    <input type="checkbox" class="father,display1,visibility1">visibility=visible,display=none,顯示</input>
    <label>下方有visibility=hidden,display=block的checkbox</label>
    <input type="checkbox" class="father,display2,visibility2">visibility=hidden,display=block,不顯示佔位</input>
</body>

效果圖：

5.3 background-color&background-image&filter

代碼片段1：css

<style>
    .father{left:20px;width:280px;height:30px;font-size: 15px;}
    .background_color {background-color:#FFFF00;}
    .background_image {background-image:url(bg_img.png);}
    .filter1{filter:progid(startColorStr='#FFFF00',endColorStr='#ff0000',gradientType='1',alpha='0.5');}
    .filter2{filter:progid(alpha='0.5');background-color: #FFFF00;}
</style>

代碼片段2：頁面

<body>
    <!-- background-color -->
    <input type="checkbox" class="father,background_color">背景色background-color</input>
    <!-- background-image -->
    <input type="checkbox" class="father,background_image">背景圖background-image</input>
    <!-- filter -->
    <input type="checkbox" class="father,filter1">filter漸變色</input>
    <input type="checkbox" class="father,filter2">filter(alpha=0.5)</input>
</body>

效果圖：

5.4 color&font-weight&font-style&font-size

代碼片段1：css

<style>
    .father{left:20px;width:280px;height:30px;font-size: 15px;}
    .textColor{color:#ff0000;}
    .fontWeight{font-weight:bold;}
    .fontSize{font-size:23px;}
    .fontStyle{font-style:italic;}
</style>

代碼片段2：頁面

<body>
    <!-- color -->
    <input type="checkbox" class="father,textColor">字體顏色color</input>
    <!-- font-weight -->
    <input type="checkbox" class="father,fontWeight">font-weight:bold</input>
    <!-- font-size -->
    <input type="checkbox" class="father,fontSize">font-size:23px</input>
    <!-- font-style -->
    <input type="checkbox" class="father,fontStyle">fontStyle:italic</input>
    <!-- fontStyle fontWeight-->
    <input type="checkbox" class="father,fontWeight,fontStyle">bold+italic,加粗斜體</input>
    <!-- textColor fontSize fontStyle fontWeight -->
    <input type="checkbox" class="father,textColor,fontSize,fontWeight,fontStyle">color,fontSize,bold,italic</input>
</body>

效果圖：

5.5 enable&checked

代碼片段1：css

<style>
    .father{left:20px;width:280px;height:30px;font-size: 15px;}
</style>

代碼片段2：頁面

<body>
    <!-- enable -->
    <input type="checkbox" enable="true" class="father">enable=true,控件可用</input>
    <input type="checkbox" enable="false" class="father">enable=false,控件不可用</input>
    <!-- checked -->
    <input type="checkbox" class="father" checked="checked">checked="checked"</input>
    <!-- enable=false checked -->
    <input type="checkbox" class="father" enable="false" checked="checked">enable=false,checked</input>
</body>

效果圖：

5.6 value&text

代碼片段1：css

<style>
    .father{left:20px;width:280px;height:30px;font-size: 15px;}
</style>

代碼片段2：頁面

<body>
    <!-- value text-->
    <input type="checkbox" class="father" value="checkbox"></input>
    <input type="checkbox" class="father">text文字</input>
    <input type="checkbox" class="father" value="checkbox">設置value屬性,顯示的是標籤間的text</input>
</body>

效果圖：

5.7 numlines & linebreakmode

代碼片段1：css

<style>
    .father{left:20px;width:280px;height:30px;font-size:15px;}
    .heigthStyle{height: 40px}
</style>

代碼片段2：頁面

<body>
    <!-- numlines -->
    <input type="checkbox" class="father,heigthStyle" numlines="2">若將numlinese屬性值設置爲“2”，那麼指定的固定文字便會顯示爲2行。如下圖所示：</input>
    <!-- linebreakmode -->
    <input type="checkbox" class="father" linebreakmode="middle">linebreakmode指定文字被截取時省略號的位置.</input>
    <!-- numlines、linebreakmode -->
    <input type="checkbox" class="father,heigthStyle" numlines="2"linebreakmode="middle">當numlines與linebreakmode同時設置時，linebreakmode的優先級高於numlines的！</input>
</body>

效果圖：

5.8 valign

代碼片段1：css

<style>
    .father{left:20px;width:280px;height:30px;font-size:15px;}
</style>

代碼片段2：頁面

<body>
    <!-- valign -->
    <input type="checkbox" class="father" valign="top">valign="top"</input>
    <input type="checkbox" class="father">默認valign="middle"</input>
    <input type="checkbox" class="father" valign="bottom">valign="bottom"</input>
</body>

效果圖：

5.9 shadowcolor & shadowoffset

代碼片段1：css

<style>
    .father{left:20px;width:280px;height:30px;font-size:15px;}
</style>

代碼片段2：頁面

<body>
    <!-- shadowcolor & shadowoffset -->
    <input type="checkbox" class="father" shadowcolor="#0000FF">只有shadowcolor時</input>
    <input type="checkbox" class="father" shadowoffset="(5,5)">只有shadowoffset時</input>
    <input type="checkbox" class="father" shadowcolor="#0000FF" shadowoffset="(5,0)">只有橫向偏移</input>
    <input type="checkbox" class="father" shadowcolor="#0000FF" shadowoffset="(0,5)">只有縱向偏移</input>
    <input type="checkbox" class="father" shadowcolor="#0000FF" shadowoffset="(3,3)">正向的橫向偏移+縱向偏移</input>
    <input type="checkbox" class="father" shadowcolor="#0000FF" shadowoffset="(-3,-3)">反向的橫向偏移+縱向偏移</input>
</body>

效果圖：

Hidden

1 功能說明

hidden控件叫做隱藏域, 該控件被用在form提交中, 不顯示也不佔位。它是由input標籤加type='hidden'屬性實現的。

例: <input type='hidden'/>

2 屬性

value
指定hidden控件的value值(上傳服務器的參數).
@value string 任意的字符串.

3 Examples

示例hidden.xml

3.1 value

頁面報文:

  <form action="hidden_test" method="post">
    <input type="submit" class="submit1" value="submit" border="1"/><br/>
    <input type="button" class="button1" value="button" border="1"/><br/>
    <input type="hidden" name="hidden" value="HELLO"/>
    <div class="div2">
      <input type="button" class="close" value="關閉" onclick="close()"/>
    </div>
  </form>

效果圖:

點擊submit按鈕提交後界面(此xml文件不支持因爲涉及網絡請求，因此不支持本地調試)

Password

1 功能說明

Password 控件爲密碼輸入框, 供用戶輸入密碼時使用, 其輸入的文本內容不可見 (不同平臺的顯示效果有差異), 並可以設定encryptmode屬性對其內容進行加密。它是由input標籤加type="password"屬性實現的。

例: <input type="password"/>

2 屬性

2.1 border

表示是否有邊框, 1表示有邊框, 0表示無邊框
@default 1.

2.2 enable

指定控件是否可用, 即是否響應用戶事件.
@value string true/false
@default true.

2.3 encryptmode

定義當前輸入框內容的加密方式. 指定加密方式後，通過submit按鈕完成form表單提交時,會自動做加密處理.
@value string 既定的加密方式.
支持的加密方式:
00(不加密)
01(一次一密,使用AES加密)
A0(證書加密,加密算法RSA)
A1(先證書加密後一次一密).
以上所有結果最後都會做uri編碼.

2.4 hold

顯示在輸入框中的輸入提示文字.
@value string 任意的字符串.

2.5 isorder

指定密碼鍵盤是否按照正常的鍵盤順序顯示.
@value string true/false.
@default false.

2.6 substitute

指定密碼框中的密碼代替字符.
考慮到兼容性問題,默認效果不做統一要求.
iOS平臺默認效果: "●".
AD平臺效果: "*".

2.7 value

指定初始輸入框中的文本內容.
@value string 任意的字符串.

3 樣式

3.1 background-color

設置背景色.

3.2 background-image

設置背景圖片.

3.3 border

設置控件的邊框樣式。

3.4 border-radius

設置文本域四個邊的圓角屬性。

3.5 filter

設置漸變背景色或透明度

3.6 font-size

設置字體大小

3.7 height

指定控件高度
@default 24

3.8 text-align

控制文字顯示位置。
@default left

3.9 width

指定控件寬度
@default 300

4 事件

4.1 onfocus

當輸入框獲得焦點時觸發此事件.

4.2 onblur

當輸入框失去焦點時觸發此事件.

4.3 onchange

當輸入框內容改變時觸發此事件.

5 Examples

示例password.xml

5.1 position

代碼片段1:css

<style>
    .father{left:20px;width:280px;height:30px;font-size:15px;}
    .positionFixed{position:fixed;}
    .positionToplevel{position:toplevel;left:20px;top:32px;}
    ...
</style>

代碼片段2:頁面

<body>
    <!-- positon:fixed 這是body第一個控件-->
    <input type="password" class="father,positionFixed" value="password"/>
    <!-- positon:toplevel-->
    <input type="password" class="father,positionToplevel" value="password"/>
    ...
    <!-- positon:fixed 這是body最後一個控件-->
    <input type="password" class="father,positionFixed" value="password"/>
<body>

效果圖:

5.2 display&visibility&hide

代碼片段1:css

<style>
    .label {font-size:12px;height:20px;left:20px;width:280px;color:#0000FF;}
    .father{left:20px;width:280px;height:30px;font-size:15px;}
    .display1{display:none;}
    .display2{display:block;}
    .visibility1{visibility:visible;}
    .visibility2{visibility:hidden;}
    ...
</style>

代碼片段2:頁面

<body>
    ...
    <!-- display -->
    <label>display=block,顯示:</label>
    <input type="password" class="father,display2" value="password"/>
    <label>下方有display=none的input,不顯示不佔位:</label>
    <input type="password" class="father,display1" value="password"/>
    <!-- visibility -->
    <label>visibility=visible,顯示:</label>
    <input type="password" class="father,visibility1" value="password"/>
    <label>下方有visibility=hidden的input,不顯示佔位:</label>  
    <input type="password" class="father,visibility2" value="password"/>
    <!-- hide -->
    <label>hide=false,顯示:</label>
    <input type="password" hide="false" class="father" value="password"/>
    <label>下方有hide=true的input,不顯示不佔位:</label>
    <input type="password" hide="true" class="father" value="password"/>
    <!-- hide display -->
    <label>display=block+hide=true,應顯示:</label>
    <input type="password" hide="true" class="father,display2" value="password"/>
    <label>下方有display=none+hide=false的input:</label>
    <input type="password" hide="false" class="father,display1" value="password"/>
    <!-- hide visibility -->
    <label>visibility=visible+hide=true,顯示:</label>
    <input type="password" class="father,visibility1" hide="true" value="password"/>
    <label>下方有visibility=hidden+hide=false的input:</label>
    <input type="password" class="father,visibility2" hide="false" value="password"/>  
    <!-- display visibility -->
    <label>visibility=visible+display=none,顯示:</label>
    <input type="password" class="father,display1,visibility1" value="password"/>
    <label>下方有visibility=hidden+display=block的input:</label>
    <input type="password" class="father,display2,visibility2" value="password"/>
    ...
<body>

效果圖:

5.3 background-color&background-image&filter

代碼片段1:css

<style>
    .label{font-size:12px;height:20px;left:20px;width:280px;color:#0000FF;}
    .father{left:20px;width:280px;height:30px;font-size:15px;}
    .background_color {background-color:#FFFF00;}
    .background_image {background-image:url(bg_img.png);}
    .filter1 {filter:progid(startColorStr='#FFFF00',endColorStr='#ff0000',gradientType='1',alpha='0.5');}
    .filter2 {filter:progid(alpha='0.5'); background-color:#FFFF00;}
    ...
</style>

代碼片段2:頁面

<body>
    ...
    <!-- background-color -->
    <label>背景色background-color:</label>
    <input type="password" class="father,background_color" value="password"/>
    <!-- background-image -->
    <label>背景圖background-image:</label>
    <input type="password" class="father,background_image" value="password"/>
    <!-- filter -->
    <label>filter漸變色:</label>
    <input type="password" class="father,filter1" value="password"/>
    <label>filter透明度:</label>
    <input type="password" class="father,filter2" value="password"/>
    ...
<body>

效果圖:

5.4 font-size&text-align

代碼片段1:css

<style>
    .label {font-size:12px;height:20px;left:20px;width:280px;color:#0000FF;}
    .father{left:20px;width:280px;height:30px;font-size:15px;}
    .fontSize{font-size:30px;}
    .textAlignLeft{text-align:left;}
    .textAlignCenter{text-align:center;}
    .textAlignRight{text-align:right;}
    ...
</style>

代碼片段2:頁面

<body>
    ...
    <!-- font-size -->
    <label>font-size=30px</label>
    <input type="password" class="father,fontSize" value="password"/>
    <!-- text-align -->
    <label>text-align居左:</label>
    <input type="password" class="father,textAlignLeft" value="password"/>
    <label>text-align居中:</label>
    <input type="password" class="father,textAlignCenter" value="password"/>
    <label>text-align居右:</label>
    <input type="password" class="father,textAlignRight" value="password"/>
    ...
<body>

效果圖:

5.5 border

代碼片段1:css

<style>
    .label{font-size:12px;height:20px;left:20px;width:280px;color:#0000FF;}
    .father{left:20px;width:280px;height:30px;font-size:15px;}
    .borderOne{border:#FF0000;}
    .borderTwo{border:10px #FF0000;}
    .borderThree {border:10px solid #FF0000;}
    .height_40{height:40px;}
    ...
</style>

代碼片段2:頁面

<body>
    ...
    <!-- border屬性 -->
    <label>border=1，有邊框:</label>
    <input type="password" class="father" border="1" value="password"/>
    <label>border=0，無邊框:</label>
    <input type="password" class="father" border="0" value="password"/>
    <label>默認有邊框:</label>
    <input type="password" class="father" value="password"/>
    <!-- border樣式 -->
    <label>border(#FF0000):</label>
    <input type="password" class="father,borderOne" value="password"/>
    <label>border(10px #FF0000):</label>
    <input type="password" class="father,height_40,borderTwo" value="password"/>
    <label>border(10px solid #FF0000):</label>
    <input type="password" class="father,height_40,borderThree" value="password"/>
    ...
<body>

效果圖:

5.6 border-radius

代碼片段1:css

<style>
    .father{left:20px;width:280px;height:30px;font-size:15px;}
    .background_color{background-color:#FFFF00;}
    .background_image{background-image:url(bg_img.png);}
    .filter1{filter:progid(startColorStr='#FFFF00',endColorStr='#FF0000',gradientType='1',alpha='0.5');}
    .filter2{filter:progid(alpha='0.5'); background-color: #FFFF00;}
    .textAlignLeft{text-align:left;}
    .textAlignCenter{text-align:center;}
    .textAlignRight{text-align:right;}
    .borderRadiusFour{border-radius: 35px 20px 0px 10px;}
    .borderRadiusOne{border-radius:10px;}
    ...
</style>

代碼片段2:頁面

<body>
    ...
    <!-- border-radius -->
    <label>borderRadius(35px 20px 0px 10px):</label>
    <input type="password" class="father,borderRadiusFour" value="password"/>
    <label>borderRadius(10px):</label>
    <input type="password" class="father,borderRadiusOne" value="password"/>
    <!-- border-radius background-color-->
    <label>背景色+border-radius(35px 20px 0px 10px):</label>
    <input type="password" class="father,borderRadiusFour,background_color" value="password"/>
    <label>背景色+border-radius:(10px):</label>
    <input type="password" class="father,borderRadiusOne,background_color" value="password"/>
    <!-- border-radius background-image-->
    <label>背景圖+border-radius(35px 20px 0px 10px):</label>
    <input type="password" class="father,borderRadiusFour,background_image" value="password"/>
    <label>背景圖+border-radius(10px):</label>
    <input type="password" class="father,borderRadiusOne,background_image" value="password"/>
    <!-- border-radius filter -->
    <label>漸變色+borderRadius(35px 20px 0px 10px):</label>
    <input type="password" class="father,filter1,borderRadiusFour" value="password"/>
    <label>alpha+borderRadius(35px 20px 0px 10px):</label>
    <input type="password" class="father,filter2,borderRadiusFour" value="password"/>
    <!-- border-radius text-align-->
    <label>border-radius(35px 20px 0px 10px)+居左:</label>
    <input type="password" class="father,textAlignLeft,background_color,borderRadiusFour" value="password"/>
    <label>border-radius(35px 20px 0px 10px)+居中:</label>
    <input type="password" class="father,textAlignCenter,background_color,borderRadiusFour" value="password"/>
    <label>border-radius(35px 20px 0px 10px)+居右:</label>
    <input type="password" class="father,textAlignRight,background_color,borderRadiusFour" value="password"/>
    ...
<body>

效果圖:

5.7 hold&enable

代碼片段1:css

<style>
    .label{font-size:12px;height:20px;left:20px;width:280px;color:#0000FF;}
  .father{left:20px;width:280px;height:30px;font-size:15px;}
    ...
</style>

代碼片段2:頁面

<body>
    ...
    <!-- hold -->
  <label>hold屬性，顯示輸入提示文字:</label>
  <input type="password" hold="hold:輸入提示文字" class="father"/>
  <!-- enable -->
  <label>enable=true，控件可用:</label>
  <input type="password" enable="true" class="father" value="password"/>
  <label>enable=false，控件不可用:</label>
  <input type="password" enable="false" class="father" value="password"/>
  ...
<body>

效果圖:

5.8 onfocus&onchange&onblur事件測試

代碼片段1:css

<style>
    .label {font-size:12px;height:20px;left:20px;width:280px;color:#0000FF;}
    .father{left:20px;width:280px;height:30px;font-size:15px;}
    ...
</style>

代碼片段2:lua

<script type="text/x-lua">
    function alert(eventName)
        window:alert("這是".. eventName .."事件！");
    end;
</script>

代碼片段3:頁面

<body>
    ...
    <!-- 事件響應測試 -->
    <label>onfocus事件:</label>
    <input type="password" class="father" value="password" onfocus="alert('onfocus')"/>
    <label>onchange事件:</label>
    <input type="password" class="father" value="password" onchange="alert('onchange')"/>
    <label>onblur事件:</label>
    <input type="password" class="father" value="password" onblur="alert('onblur')"/>
    <label>事件組合測試:</label>
    <input type="password" class="father" value="password" onfocus="alert('onfocus')" onchange="alert('onchange')" onblur="alert('onblur')"/>
    ...
<body>

效果圖:

將光標放入"onfocus事件"的密碼框中，alert函數響應，如下圖：

改變"onchange事件"密碼框中的文字內容，alert函數響應，如下圖：

將光標放入"onblur事件"的密碼框中再移出，alert函數響應，如下圖：

"事件組合測試"密碼框可以響應onfocus、onchange、onblur三種事件。

5.9 substitute

代碼片段1:css

<style>
    .label{font-size:12px;height:20px;left:20px;width:280px;color:#0000FF;}
    .father{left:20px;width:280px;height:30px;font-size:15px;}
    ...
</style>

代碼片段2:頁面

<body>
    ...
    <!-- substitute -->
    <label>substitute="●":</label>
    <input type="password" class="father" value="password" substitute="●"/>
    <label>substitute="*":</label>
    <input type="password" class="father" value="password" substitute="*"/>
    ...
<body>

效果圖:

5.10 isorder

代碼片段1:css

<style>
    .label{font-size:12px;height:20px;left:20px;width:280px;color:#0000FF;}
    .father{left:20px;width:280px;height:30px;font-size:15px;}
    ...
</style>

代碼片段2:頁面

<body>
    ...
    <!-- isorder -->
    <label>isorder=true:</label>
    <input type="password" class="father" isorder="true" value="password"/>
    <label>isorder=false:</label>
    <input type="password" class="father" isorder="false" value="password"/>
    ...
<body>

效果圖:

isorder=true，密碼鍵盤按正常順序顯示，效果如下圖:
isorder=false，密碼鍵盤不按正常順序顯示，效果如下圖:

Radio

1 功能說明

Radio 控件用來表示單選按鈕。單選按鈕是表示一組互斥選項按鈕中的一個。當一個按鈕被選中，之前選中的按鈕就變爲非選中的。它是由input標籤加type="radio"屬性實現的。

例：<input type="radio">text</input>

name相同的radio控件構成一組，所有未指定name的radio被分爲一組。同一組的radio選項之間是互斥的，即該組中只能有一個選項被選中。一個頁面中可以有多組radio控件，不同組的選項可以被同時選中。

radio中內容默認垂直居中水平居左，圖片與文字部分，垂直方向中心點對齊。根據文字內容自動計算換行。

在沒有樣式的情況下，控件大小由內容及title圖片計算獲得，最寬不應超過父控件寬度減去左右邊距。當文字內容不能在一行完全顯示時，需要換行顯示。
樣式指定高度。當大於title圖片高度，圖片按照原始大小顯示，當小於title圖片高度，圖片會適當縮放，以顯示完整圖片。
樣式指定寬度。當文字內容在一行不能完全顯示時，需要換行顯示。
樣式指定寬度和高度。當設定區域不足以顯示所有文字時，文字將會被截取。

2 屬性

全局屬性以及具體說明參見屬性介紹

2.1 checked

指定控件選項是否默認選中
@value string checked/true
若未指定checked/true的選項，默認該組中所有選項的初始狀態爲不被選中。

2.2 enable

指定控件是否可用，即是否響應用戶事件
@value string true/false
@default true
可點擊(enable="true")和不可點擊(enable="false")兩種狀態下的顯示樣式效果可配置。

2.3 linebreakmode

指定文字被截取時省略號的位置
@value string head/middle/tail/none
@default none

2.4 numlines

指定固定文字顯示的行數

2.5 text

指定顯示在界面上的radio選項的文本。
@value string 任意的字符串
注：這裏text屬性的值被寫在開閉兩個標籤之間，例：value123，其中"value123"爲顯示的文本，不能寫作text="value123"格式。

2.6 shadowcolor

指定文本陰影的顏色
注：默認偏移量：(0,-1)。陰影無默認顏色，如果不給顏色則無陰影。

2.7 shadowoffset

指定文本陰影的偏移量
@default (0,-1)
注：Android平臺不支持shadowoffset爲一正一負。

2.8 valign

指定文本的垂直居中方式
@value string top/middle
@default middle

2.9 value

指定radio控件的value值
@value string 任意的字符串
注：value值不作爲顯示內容，僅作爲上傳服務器的參數值。

3 樣式

全局樣式以及具體說明參見 * 樣式介紹

3.1 background-color

設置背景色

3.2 background-image

設置背景圖片

3.3 color

設置文本顏色

3.4 filter

設置漸變背景色或透明度

3.5 font-size

設置字體大小

3.6 font-style

指定文本的字體樣式

3.7 font-weight

設置字體是否加粗顯示

3.8 height

指定控件高度
@default 根據文字內容計算

3.9 width

指定控件寬度
@default 根據文字內容計算，但寬度不可超出父控件顯示範圍

4 事件

4.1 onclick

針對用戶的點擊事件，並且控件在可用狀態下，觸發此事件。
注：radio的點擊事件只有在用戶切換選擇控件時才觸發。若用戶點擊了已被選擇的控件，不需要觸發點擊事件。

5 Examples

示例radio.xml

5.1 position

代碼片段1：css

<style>
    .father{left:20px;width:280px;height:30px;font-size:15px;}
    .positionFixed{position:fixed;}
    .positionToplevel{position:toplevel;top:32px;}
</style>

代碼片段2：頁面

<body>
    <!-- positon:fixed 這是body第一個控件 -->
    <input type="radio" name="radio1" class="father,positionFixed">position:fixed,body第一個控件</input>
    <!-- positon:toplevel -->
    <input type="radio" name="radio1" class="father,positionToplevel">position:toplevel,不隨頁面滾動</input>
    <input type="radio" class="father,positionFixed">position:fixed,body最後一個控件</input>
</body>

效果圖：

5.2 display & visibility & hide

代碼片段1：css

<style>
    .father{left:20px;width:280px;height:30px;font-size:15px;}
    .display1{display:none;}
    .display2{display:block;}
    .visibility1{visibility:visible;}
    .visibility2{visibility:hidden;}
</style>

代碼片段2：頁面

<body>
    <!-- display -->
    <input type="radio" name="radio1" class="father,display2">display=block顯示</input>
    <label>下方有display=none的radio,不顯示不佔位</label>
    <input type="radio" name="radio1" class="father,display1">display=none不顯示不佔位</input>

    <!-- visibility -->
    <input type="radio" name="radio1" class="father,visibility1">visibility=visible,顯示</input>
    <label>下方有visibility=hidden的radio,不顯示佔位</label>
    <input type="radio" name="radio1" class="father,visibility2">visibility=hidden,不顯示佔位</input>

    <!-- hide -->
    <input type="radio" name="radio1" hide="false" class="father">hide=false,顯示</input>
    <label>下方有hide=true的radio,不顯示不佔位</label>
    <input type="radio" name="radio1" hide="true" class="father">hide=true,不顯示不佔位</input>

    <!-- hide && display -->
    <input type="radio" name="radio1" hide="true" class="father,display2">display=block,hide=true,應顯示</input>
    <label>下方有display=none,hide=false的radio</label>
    <input type="radio" name="radio1" hide="false" class="father,display1">display=none,hide=false,不顯示不佔位</input>

    <!-- hide && visibility -->
    <input type="radio" name="radio1" class="father,visibility1" hide="true">visibility=visible,hide=true,顯示</input>
    <label>下方有visibility=hidden,hide=false的radio</label>
    <input type="radio" name="radio1" class="father,visibility2" hide="false">visibility=hidden,hide=false,不顯示佔位</input>

    <!-- display && visibility -->
    <input type="radio" name="radio1" class="father,display1,visibility1">visibility=visible,display=none,顯示</input>
    <label>下方有visibility=hidden,display=block的radio</label>
    <input type="radio" name="radio1" class="father,display2,visibility2">visibility=hidden,display=block,不顯示佔位</input>
    <label class="label1">以下爲新的一組radio:</label>
</body>

效果圖：

5.3 background-color & background-image & filter

代碼片段1：css

<style>
    .father{left:20px;width:280px;height:30px;font-size:15px;}
    .background_color{background-color:#FFFF00;}
    .background_image{background-image:url(bg_img.png);}
    .filter1{filter:progid(startColorStr='#FFFF00',endColorStr='#ff0000',gradientType='1',alpha='0.5');}
    .filter2{filter:progid(alpha='0.5'); background-color: #FFFF00;}
</style>

代碼片段2：頁面

<body>
    <label class="label1">以下爲新的一組radio:</label>
    <!-- background-color -->
    <input type="radio" name="radio2" class="father,background_color">背景色background-color</input>
    <!-- background-image -->
    <input type="radio" name="radio2" class="father,background_image">背景圖background-image</input>
    <!-- filter -->
    <input type="radio" name="radio2" class="father,filter1">filter漸變色</input>
    <input type="radio" name="radio2" class="father,filter2">filter(alpha=0.5)</input>
</body>

效果圖：

5.4 color & font-weight & font-size & font-style

代碼片段1：css

<style>
    .father{left:20px;width:280px;height:30px;font-size:15px;}
    .textColor{color:#ff0000;}
    .fontWeight{font-weight:bold;}
    .fontSize{font-size:23px;}
    .fontStyle{font-style:italic;}
</style>

代碼片段2：頁面

<body>
    <!-- color -->
    <input type="radio" name="radio2" class="father,textColor">字體顏色color</input>
    <!-- font-weight -->
    <input type="radio" name="radio2" class="father,fontWeight">font-weight:bold</input>
    <!-- font-size -->
    <input type="radio" name="radio2" class="father,fontSize">font-size:23px</input>
    <!-- font-style -->
    <input type="radio" name="radio2" class="father,fontStyle">fontStyle:italic</input>
    <!-- fontStyle fontWeight-->
    <input type="radio" name="radio2" class="father,fontWeight,fontStyle">bold+italic,加粗斜體</input>
    <!-- textColor fontSize fontStyle fontWeight -->
    <input type="radio" name="radio2" class="father,textColor,fontSize,fontWeight,fontStyle">color,fontSize,bold,italic</input>
</body>

效果圖：

5.5 enable & checked

代碼片段1：css

<style>
    .label1{font-size:15px;font-weight:bold;}
    .father{left:20px;width:280px;height:30px;font-size:15px;}
</style>

代碼片段2：頁面

<body>
    <!-- enable -->
    <input type="radio" name="radio2" enable="true" class="father">enable=true,控件可用</input><input type="radio" name="radio2" enable="false" class="father">enable=false,控件不可用</input><!-- checked -->
    <input type="radio" name="radio2" class="father" checked="checked">checked="checked"</input><label class="label1">以下爲新的一組radio:</label><!-- enable=false checked-->
    <input type="radio" class="father" enable="false" checked="checked">enable=false+checked</input>
</body>

效果圖：

5.6 value & text

代碼片段1：css

<style>
    .father{left:20px;width:280px;height:30px;font-size:15px;}
</style>

代碼片段2：頁面

<body>
    <!-- value text -->
    <input type="radio" class="father" value="radio"/><input type="radio" class="father">text文字</input><input type="radio" class="father" value="radio">設置value屬性,顯示的是標籤間的text</input>
</body>

效果圖：

5.7 numlines & linebreakmode

代碼片段1：css

<style>
    .father{left:20px;width:280px;height:30px;font-size:15px;}
    .heigthStyle{height: 40px}
</style>

代碼片段2：頁面

<body>
    <!-- numlines -->
    <input type="radio" class="father,heigthStyle" numlines="2">若將numlinese屬性值設置爲“2”，那麼指定的固定文字便會顯示爲2行。如下圖所示：</input>
    <!-- linebreakmode -->
    <input type="radio" class="father" linebreakmode="middle">linebreakmode指定文字被截取時省略號的位置.</input>
    <!-- numlines & linebreakmode -->
    <input type="radio" class="father,heigthStyle" numlines="2"linebreakmode="middle">當numlines與linebreakmode同時設置時，linebreakmode的優先級高於numlines的！</input>
</body>

效果圖：

5.8 valign

代碼片段1：css

<style>
    .father{left:20px;width:280px;height:30px;font-size:15px;}
</style>

代碼片段2：頁面

<body>
    <!-- valign -->
    <input type="radio" class="father" valign="top">valign="top"</input>
    <input type="radio" class="father">默認valign="middle"</input>
    <input type="radio" class="father" valign="bottom">valign="bottom"</input>
</body>

效果圖：

5.9 shadowcolor & shadowoffset

代碼片段1：css

<style>
    .father{left:20px;width:280px;height:30px;font-size:15px;}
</style>

代碼片段2：頁面

<body>
    <!-- shadowcolor & shadowoffset -->
    <input type="radio" class="father" shadowcolor="#0000FF">只有shadowcolor時</input>
    <input type="radio" class="father" shadowoffset="(5,5)">只有shadowoffset時</input>
    <input type="radio" class="father" shadowcolor="#0000FF" shadowoffset="(5,0)">只有橫向偏移</input>
    <input type="radio" class="father" shadowcolor="#0000FF" shadowoffset="(0,5)">只有縱向偏移</input>
    <input type="radio" class="father" shadowcolor="#0000FF" shadowoffset="(3,3)">正向的橫向偏移+縱向偏移</input>
    <input type="radio" class="father" shadowcolor="#0000FF" shadowoffset="(-3,-3)">反向的橫向偏移+縱向偏移</input>
</body>

效果圖：

Segment

1 功能說明

<input type="segment" name="segment1" class="segment1" value="seg1">search</input>
<input type="segment" name="segment1" class="segment1" value="seg2">find</input>
<input type="segment" name="segment1" class="segment1" value="seg3">look</input>

segment控件可以通過Lua設置checked屬性來動態的改變其選中狀態。

連續的input標籤，name相同則認爲是一組，同一組標籤生成一個segment控件。同一組中，至少要有兩項，理論上不限上限。value值不作爲顯示內容，僅作爲上傳服務器的參數值。用titleimg屬性賦值的圖片或者標籤之間的內容作爲顯示內容。checked='checked'或者checked='true'表明爲默認選中項。在初始化時，不需要執行默認選中項的相應事件。如果沒有checked屬性，則默認選中第一項。控件元素效果各平臺可以有差異。如果系統中有此控件，則以系統控件爲準。

注：segment標籤必須有name屬性，且同一組控件需要有相同的name值。初始默認選中項只能有一個。

使用建議

segment就是一個選擇控件，點擊控件不同的選項，有相應的點擊事件。

segment不支持設置背景圖片，設置圖片通過titleimg屬性設置。titleImg與title同級，設置了titleImg則title不會顯示。 segment可用：若圖片透明可以顯示被點擊的效果，不透明不顯示點擊效果。 segment不可用時的顯示效果分爲兩種：默認選中項：透明的圖片可以看到藍色，不透明則只能看到圖片，看不到選中的藍色；默認不選中項：顯示圖片。

2 屬性

全局屬性以及具體說明參見屬性介紹

2.1 checked

指定控件選項是否默認選中。當不寫checked屬性的時候，segment控件默認選中第一個。
@value string checked/true

2.2 cornerradius

指定控件圓角的弧度。
@value number 10 單位是px，但不需要寫

2.3 enable

指定控件是否可用，即是否響應用戶操作。同一個segment控件，設置其中一個標籤的enable即可應用到整個控件。
@value string true/false
@default true

2.4 hide

指定控件的可見狀態，與樣式中的display:none有相同的作用。同一個segment控件，設置其中一個標籤的hide即可應用到整個控件。
@value string true/false
@default false

2.5 name

同一組控件需要設置相同的name。

2.6 ontintcolor

指定控件選中狀態的顏色。在iOS平臺，即爲主題色，onTintColor負責邊線和分割線的顏色。
@format #RRGGBB(如#000000)
@default iOS平臺爲藍色

android平臺爲藍色主題的漸變色

2.7 titleimg

指定控件顯示的圖片。遠程圖片獲取接口和src一致，但不需要考慮w、h參數。圖片默認拉伸鋪滿segment控件。
@format1 local:image.png（加載本地資源，這裏兼容沒有local關鍵字的情況）
@format2 http:// | https:// | ewp_local://（加載網絡資源）
注：該屬性的優先級大於標籤間文本顯示內容，若標籤同時寫了titleimg屬性和標籤間文本，則標籤間文本不顯示。

2.8 type

規定標籤元素的類型
@value string segment

2.9 value

指定控件的值
@value string 任意的字符串
注：當用戶選中某項後，通過form表單提交時，segmeng的value值應該爲選中項的value值。詳情見form標籤，form測試用例。

3 樣式

全局樣式以及具體說明參見樣式介紹

注意
同一個segment控件，其中一個標籤應用class樣式即可作用於整個segment控件。如果同組多個標籤寫了class樣式，則第一個生效。
但通過document:getElementsByClassName方法獲取時，只獲取寫了對應class屬性的標籤。即如下所示，

<input type="segment" name="seg1" class="seg">one</input>
<input type="segment" name="seg1">two</input>
<input type="segment" name="seg1" class="test">three</input>

雖然顯示效果按第一個seg應用，但如果getClassName("seg")只返回第一個標籤，同樣getClassName("test")也只返回第三個標籤。

3.1 background-color

指定Segment控件未選中按鈕的背景色。如果按鈕有邊框則背景色不應該超出邊框的顯示區域。

3.2 color

指定segment上未選中按鈕的文本顏色，即按鈕上顯示的文字顏色，支持色值格式#RGB(#FF00FF)。

3.3 display

指定控件的可視狀態。
@value none/block
@default block

當值爲none時，表示控件不可見，且不佔位。
當值爲block時，表示控件可見。

注：如果此屬性一旦改變，需要重新佈局，需要模板人員手動刷新界面(location:reload())。
當與visibility屬性同時出現，visibility覆蓋display屬性，display不起作用。

3.4 font-size

設置字體大小。

3.5 font-style

設置字體風格。

3.6 font-weight

設置字體類型。

3.7 height

改變控件的高度。
@default 30px（iOS平臺除外）

3.8 position

指定控件的顯示狀態。
@value fixed/static
@default static

3.9 visibility

規定元素是否可見。即使不可見的元素也會佔據頁面上的空間。
@value visible/hidden
@default visible
注：當與display屬性同時出現，visibility覆蓋display屬性，display不起作用。

3.10 width

改變控件的寬度。設置的寬度爲segment的總寬度，各標籤平分寬度。
@default 120px（iOS平臺除外）

4 僞類

支持：active樣式。
當segment設置了僞類樣式active後，被選中的選項需要應用僞類樣式。僞類樣式支持如下：

4.1 background-color

指定被選擇選項的背景色。
注：同時寫了onTintColor屬性時，onTintColor負責邊線和分割線的顏色，active中的background-color負責選中部分的背景色。

4.2 color

指定被選擇選項中文本顏色，支持色值格式#RGB(#FF00FF)。

5 事件

5.1 onclick

控件的點擊事件。
注：segment的點擊事件只有在用戶切換選擇項時才觸發。若用戶點擊了已被選擇的選項，不需要觸發點擊事件。

6 Examples

圖片截取的iOS平臺（iOS7以上），並非統一樣式，各平臺顯示樣式以各平臺真實顯示效果爲準。

示例segment.xml

6.1 position

代碼片段1：css

<style>
    .positionFixed{position:fixed;}
</style>

代碼片段2：頁面

<body>
    <!-- positon:fixed -->
    <input type="segment" name="segment1" class='positionFixed' value="segg1" >search</input>
    <input type="segment" name="segment1" value="segg2" >find</input>
    <input type="segment" name="segment1" value="segg3" >look</input>
<body>

效果圖：

6.2 size

代碼片段1：css

<style>
    .segment2{left:10px;width:150px;height:80px;}
    .label1{left:10px;width:300px;height:30px;font-weight:bold;}
    .label2{left:10px;width:300px;height:30px;font-size:15px;}
</style>

代碼片段2：頁面

<body>
    <!-- size -->
    <label class='label1'>size 測試</label>
    <label class='label2'>默認size</label>
    <input type="segment" name="segment1" value="seg1" >search</input>
    <input type="segment" name="segment1" value="seg2" >find</input>
    <input type="segment" name="segment1" value="seg3" >look</input>
    <label class='label2'>修改size</label>
    <input type="segment" name="segment2" class="segment2" value="seg1" >search</input>
    <input type="segment" name="segment2" value="seg2" >find</input>
    <input type="segment" name="segment2" value="seg3" >look</input>
    <label class='label2'>說明：後面都採用默認size.</label>
<body>

效果圖：

當寬度不足顯示整個title時，則以中間三個點代替顯示不全的內容

6.3 hide/display/visibility

代碼片段1：css

<style>
    .display1{display:none;}
    .display2{display:block;}
    .visibility1{visibility:visible;}
    .visibility2{visibility:hidden;}
    .label1{left:10px;width:300px;height:30px;font-weight:bold;}
    .label2{left:10px;width:300px;height:30px;font-size:15px;}
</style>

代碼片段2：頁面

<body>
    <!-- hide -->
    <label class='label1'> hide 測試</label>
    <label class='label2'>hide = 'true',不顯示</label>
    <input type="segment" hide='true' name="segment3" value="seg1" >search</input>
    <input type="segment" name="segment3" value="seg2" >find</input>
    <input type="segment" name="segment3" value="seg3" >look</input>
    <label class='label2'>hide = 'false',顯示</label>
    <input type="segment" hide='false' name="segment4" value="seg1" >search</input>
    <input type="segment" name="segment4" value="seg2" >find</input>
    <input type="segment" name="segment4" value="seg3" >look</input>

    <!-- diaplay -->
    <label class='label1'> display 測試</label>
    <label class='label2'>diplay='none',不顯示,不佔位</label>
    <input type="segment" name="segment5" class="display1" value="seg1" >search</input>
    <input type="segment" name="segment5" value="seg2" >find</input>
    <input type="segment" name="segment5" value="seg3" >look</input>
    <label class='label2'>diplay='block',顯示</label>
    <input type="segment" name="segment6" class="display2" value="seg1" >search</input>
    <input type="segment" name="segment6" value="seg2" >find</input>
    <input type="segment" name="segment6" value="seg3" >look</input>
    <!-- visibility -->
    <label class='label1'> visibility 測試</label>
    <label class='label2'>visibility='hidden',不顯示,佔位</label>
    <input type="segment" name="segment7" class="visibility2" value="seg1" >search</input>
    <input type="segment" name="segment7" value="seg2" >find</input>
    <input type="segment" name="segment7" value="seg3" >look</input>
    <label class='label2'>visibility='visible',顯示</label>
    <input type="segment" name="segment8" class="visibility1" value="seg1" >search</input>
    <input type="segment" name="segment8" value="find" >seg2</input>
    <input type="segment" name="segment8" value="look" >seg3</input>
<body>

效果圖：

6.4 font-size/font-weight/font-style

代碼片段1：css

<style>
    .fontSize{font-size:13px;}
    .fontWeight{font-weight:bold;}
    .fontStyle{font-style:italic};
</style>

代碼片段2：頁面

<body>
    <!-- font-weight font-size font-style-->
    <label class='label1'> font-weight font-size font-style測試</label>
    <label class='label2'> size=13px,正常</label>
    <input type="segment" name="segment13" class="fontSize" value="seg1" >search</input>
    <input type="segment" name="segment13" value="seg2" >find</input>
    <input type="segment" name="segment13" value="seg3" >look</input>
    <label class='label2'> size=13px,粗體</label>
    <input type="segment" name="segment14" class="fontSize,fontWeight" value="search" >search</input>
    <input type="segment" name="segment14" value="find" >find</input>
    <input type="segment" name="segment14" value="look" >look</input>
    <label class='label2'> size=13px,斜體</label>
    <input type="segment" name="segment15" class="fontSize,fontStyle" value="seg1" >search</input>
    <input type="segment" name="segment15" value="seg2" >find</input>
    <input type="segment" name="segment15" value="seg3" >look</input>
<body>

效果圖：

6.5 checked

代碼片段1：lua

function changechecked()
    local test_ctrl = document:getElementsByName("segment9");
    if test_ctrl and #test_ctrl > 0 then
        local checked1 = test_ctrl[1]:getPropertyByName("checked");
        local checked2 = test_ctrl[2]:getPropertyByName("checked");
        local checked3 = test_ctrl[3]:getPropertyByName("checked");
        if checked1 == "true" then
            test_ctrl[1]:setPropertyByName('checked','false');
            test_ctrl[2]:setPropertyByName('checked','false');
            test_ctrl[3]:setPropertyByName('checked','true');
            window:alert("第三個被選中");
        elseif checked2 == "true" then
            test_ctrl[1]:setPropertyByName('checked','true');
            test_ctrl[2]:setPropertyByName('checked','false');
            test_ctrl[3]:setPropertyByName('checked','false');
            window:alert("第一個被選中");
        elseif checked3 == "true" then
            test_ctrl[1]:setPropertyByName('checked','false');
            test_ctrl[2]:setPropertyByName('checked','true');
            test_ctrl[3]:setPropertyByName('checked','false');
            window:alert("第二個被選中");
        end;
    end;
end;

代碼片段2：頁面

<body>
    <!-- checked -->
    <label class='label1'> checked 測試</label>
    <input type='button' value='點擊通過改變checked改變下面segment選中狀態' name='btn2' class='button' onclick='changechecked()'>yes</input>
    <label class='label2'>segment第三個爲選中</label>
    <input type="segment" name="segment9" value="seg1" >search</input>
    <input type="segment" name="segment9" value="seg2" >find</input>
    <input type="segment" name="segment9" checked="checked" value="seg3" >look</input>
<body>

效果圖：

6.6 onclick

代碼片段1：lua

實例1:
function onclick()
    local test_ctrl = document:getElementsByName("test");
    if test_ctrl and #test_ctrl > 0 then
        local checked1 = test_ctrl[1]:getPropertyByName("checked");
        local checked2 = test_ctrl[2]:getPropertyByName("checked");
        local checked3 = test_ctrl[3]:getPropertyByName("checked");
        if checked1 == "true" then
            window:alert(第一個被選中);
        elseif checked2 == "true" then
            window:alert(第二個被選中);
        elseif checked3 == "true" then
            window:alert(第三個被選中);
        end;
    end;
end;

首先取到segment控件，以三個選項的segment控件爲例，依次判斷三個選項哪個是選中狀態（選中checked爲true,非選中爲false。注意，true和false爲字符串形式），從而進行相應的操作。

實例2:
function onclick1()
    window:alert("第一個被選中");
end;
function onclick2()
    window:alert("第二個被選中");
end;
function onclick3()
    window:alert("第三個被選中");
end;

代碼片段2：頁面

<body>
    <!-- onclick事件 -->
    <label class='label1'> onclick 測試</label>
    <label class='label2'> 文檔實例1:onclick實現</label>
    <input type="segment" name="segment10" value="seg1" onclick="onclick()" >search</input>
    <input type="segment" name="segment10" value="seg2" onclick="onclick()">find</input>
    <input type="segment" name="segment10" value="seg3" onclick="onclick()" >look</input>
    <label class='label2'> 文檔實例2:onclick實現</label>
    <input type="segment" name="segment11" value="seg1" onclick="onclick1()" >search</input>
    <input type="segment" name="segment11" value="seg2" onclick="onclick2()">find</input>
    <input type="segment" name="segment11" value="seg3" onclick="onclick3()" >look</input>
<body>

效果圖：

6.7 enable

代碼片段1：lua

function onclickfalse()
    window:alert("enable=false,能點擊，錯誤");
end;

代碼片段2：頁面

<body>
    <!-- enable -->
    <label class='label1'> enbale 測試</label>
    <label class='label2'> enbale='false' 不能點擊</label>
    <input type="segment" enable='false' name="segment12" value="search" onclick="onclickfalse()" >search</input>
    <input type="segment" name="segment12" value="find" onclick="onclickfalse()">find</input>
    <input type="segment" name="segment12" value="look" onclick="onclickfalse()" >look</input>
<body>

效果圖：

6.8 titleimg

注：該屬性的優先級大於標籤間文本顯示內容，若標籤同時寫了titleimg屬性和標籤間文本，則標籤間文本不顯示。

代碼片段1：頁面

<body>
    <!-- titleimg -->
    <label class='label1'> titleimg 測試</label>
    <input type="segment" name="segment16" value="search" titleimg="local:bj.png"></input>
    <input type="segment" name="segment16" value="find" >find</input>
    <input type="segment" name="segment16" value="look" titleimg="local:gh.png">look</input>
<body>

效果圖：

6.9 ontintcolor

代碼片段1：頁面

<body>
    <!-- ontintcolor -->
    <label class='label1'> ontintcolor 測試</label>
    <input type="segment" name="segment17" value="search" selected="selected" ontintcolor="#FFFF00">search</input>
    <input type="segment" name="segment17" value="find" >find</input>
    <input type="segment" name="segment17" value="look">look</input>
<body>

效果圖：

6.10 cornerradius

代碼片段1：頁面

<body>
    <!-- cornerradius -->
    <label class='label1'> cornerradius 測試</label>
    <input type="segment" name="segment18" value="search" cornerradius="25">search</input>
    <input type="segment" name="segment18" value="find" >find</input>
    <input type="segment" name="segment18" value="look">look</input>
<body>

效果圖：

7 iOS重構segment使用說明

iOS使用segment新功能需要在class.xml裏修改配置，即RYTCustomSegmentControl替換RYTSegmentControl
```
 <object class="RYTCustomSegmentControl" init="initWithParam" tag="input" type="segment">
```

在沒有樣式及屬性設置的情況下，可通過重寫初始化方法initView設置默認值。

 -(void)initView{
        [super initView];
     [segmentedView_ release];
     segmentedView_ = nil;
         segmentedView_ = [[RYTCustomSegmentView alloc]initWithFrame:frame_];
     segmentedView_.delegate = self;
     //點擊後的字體顏色
     segmentedView_.textColor = [UIColor redColor];
     //未選中的字體顏色
     segmentedView_.fontTextColor = [UIColor yellowColor];
     //未選中的背景顏色
     segmentedView_.norbackgColor = [UIColor greenColor];
     //選中的背景顏色
     segmentedView_.selbackgColor = [UIColor purpleColor];
     //邊框顏色
     segmentedView_.tintColor = [UIColor orangeColor];
     self.view = segmentedView_;
 }

Switch

1 功能說明

<input type="switch" name="switch1">yes</input>
<input type="switch" name="switch1" checked="checked">no</input>

switch控件可以通過Lua設置checked屬性來動態的改變其選中狀態。

注1：switch標籤必須有name屬性，且同一組控件需要有相同的name值。

注2：定義模板時前面定義的input標籤永遠表示“開”，後面的input標籤永遠表示“關”，這兩個標籤中的value屬性值與“開”、“關”沒有直接關係。

使用建議

switch是一個選擇控件，代表了“開”、“關”兩個狀態，一般在控制某個事物的狀態的情況下使用，亦可在表示兩種對立功能的情況下使用。

2 屬性

全局屬性以及具體說明參見屬性介紹

2.1 checked

指定控件選項是否默認選中。當不寫checked屬性的時候，switch控件默認關閉。
@value string checked/true

2.2 enable

指定控件是否可用，即是否響應用戶操作。同一個switch控件，設置其中一個標籤的enable即可應用到整個控件。
@value string true/false
@default true。

2.3 hide

指定控件的可見狀態，與樣式中的display:none有相同的作用。同一個switch控件，設置其中一個標籤的hide即可應用到整個控件。
@value string true/false
@default false

2.4 name

同一組控件需要設置相同的name

2.5 offtintcolor

指定控件關閉狀態的顏色。
@format #RRGGBB(如#000000)
@default iOS平臺爲白色，android平臺爲白色主題的漸變色

2.6 ontintcolor

指定控件打開狀態的顏色。
@format #RGB(如#000000)
@default iOS平臺爲綠色，android平臺爲藍色主題的漸變色

2.7 thumbtintcolor

指定控件滑塊的顏色。
@format #RRGGBB(如#000000)
@default iOS平臺爲白色，android平臺爲白色主題的漸變色

iOS： android：

2.8 type

規定標籤元素的類型
@value string switch

2.9 value

指定控件的值
@value string 任意的字符串

3 樣式

全局樣式以及具體說明參見樣式介紹

注意
同一個switch控件，其中一個標籤應用class樣式即可作用於整個switch控件。如果同組多個標籤寫了class樣式，則第一個生效。
但通過document:getElementsByClassName方法獲取時，只獲取寫了對應class屬性的標籤。即如下所示，

<input type="switch" name="switch1" class="sth">yes</input>
<input type="switch" name="switch1" class="test">no</input>

雖然顯示效果按第一個sth應用，但如果getClassName("sth")只返回第一個標籤，同樣getClassName("test")也只返回第二個標籤。

3.1 display

指定控件的可視狀態。
@value none/block
@default block

3.2 height

改變控件的高度(iOS平臺不支持)。
@default 30px

3.3 position

指定控件的顯示狀態。
@value fixed/static
@default static

3.4 width

改變控件的寬度(iOS平臺不支持)。
@default 120px

4 事件

4.1 onclick

控件的點擊事件。注意switch執行的是改變狀態之後的狀態對應的onclick。例如，switch原本爲關閉狀態，點擊後，變爲開啓狀態，同時執行的是開啓狀態對應的onclick。
onclick實例：

實例1:
<input type="switch" name="switch1" onclick="onclick()">yes</input>
<input type="switch" name="switch1" onclick="onclick()">no</input>

function onclick()
    local switch = document:getElementsByName("switch1");
    local checked = switch[1]:getPropertyByName("checked");
    if checked == "true" then
        window:alert("switch開啓");
    else
        window:alert("switch關閉");
    end;
end;

checked取自switch[1]，即檢驗的是開啓狀態的checked，當switch爲開啓狀態checked == "true";switch爲關閉狀態checked == "false"。注意：true和false爲字符串形式。

實例2:
<input type="switch" name="switch1" onclick="onclickone()">yes</input>
<input type="switch" name="switch1" onclick="onclicktwo()">no</input>

function onclickone()
    window:alert("switch開啓");
end;
function onclicktwo()
    window:alert("switch關閉");
end;

5 Examples

圖片截取的iOS平臺（iOS7以上），並非統一樣式，各平臺顯示樣式以各平臺真實顯示效果爲準。

示例switch.xml

5.1 position

代碼片段1：css

<style>
    ...
    .positionFixed{position:fixed;}
    ...
</style>

代碼片段2：頁面

<body>
    <!-- positon:fixed -->
    <input type='switch' value='sww1' class='positionFixed'  name='sww1'>yes</input>
    <input type='switch' value='sww1' name='sww1'>no</input>
    ...
<body>

效果圖：

5.2 hide/display/visibility

代碼片段1：css

<style>
    ...
    .display1{display:none;}
    .display2{display:block;}
    .visibility1{visibility:visible;}
    .visibility2{visibility:hidden;}
    ...
</style>

代碼片段2：頁面

<body>
    ...
    <!-- hide -->
    <label class='label1'> hide 測試</label>
    <label class='label2'>hide = 'true',不顯示</label>
    <input type='switch' hide='true' value='sw3' name='sw3'>yes</input>
    <input type='switch' value='sw3' name='sw3'>no</input>

    <label class='label2'>hide = 'false',顯示</label>
    <input type='switch' hide='false' value='sw4' name='sw4'>yes</input>
    <input type='switch' value='sw4' name='sw4' >no</input>
    <!-- diaplay -->
    <label class='label1'> display 測試</label>
    <label class='label2'>diplay='none',不顯示,不佔位</label>
    <input type='switch' value='sw5' name='sw5' class='display1'>yes</input>
    <input type='switch' value='sw5' name='sw5' >no</input>

    <label class='label2'>diplay='block',顯示</label>
    <input type='switch' value='sw6' name='sw6' class='display2'>yes</input>
    <input type='switch' value='sw6' name='sw6' >no</input>
    <!-- visibility -->
    <label class='label1'> visibility 測試</label>
    <label class='label2'>visibility='hidden',不顯示,佔位</label>
    <input type='switch' value='sw7' name='sw7' class='visibility2'>yes</input>
    <input type='switch' value='sw7' name='sw7' >no</input>
    <label class='label2'>visibility='visible',顯示</label>
    <input type='switch' value='sw8' name='sw8' class='visibility1'>yes</input>
    <input type='switch' value='sw8' name='sw8' >no</input>
    ...
<body>

效果圖：

5.3 enable/onclick

代碼片段：頁面

<body>
    ...
    <!-- enable -->
    <label class='label1'> enable 測試</label>
    <label class='label2'> enable = 'false' 不可點擊</label>
    <input type='switch' enable='false' value='sw10' name='sw10'>yes</input>
    <input type='switch' value='sw10' name='sw10' onclick="onclick()">no</input>
    <!-- onclick事件 -->
    <label class='label1'> onclick 測試</label>
    <label class='label2'> 文檔實例1:onclick實現 </label>
    <input type='switch' value='sw10' name='sw11' onclick="onclick()">yes</input>
    <input type='switch' value='sw10' name='sw11' onclick="onclick()">no</input>
    <label class='label2'> 文檔實例2:onclick實現 </label>
    <input type='switch' value='sw11' name='sw12' onclick="onclick1()">yes</input>
    <input type='switch' value='sw11' name='sw12' onclick="onclick2()">no</input>
    ...
<body>

效果圖：

5.4 checked

代碼段1：script

function changechecked()
    local switch = document:getElementsByName("sw9");
    local checked = switch[1]:getPropertyByName("checked");
    if checked == "true" then
        switch[1]:setPropertyByName('checked','false')
    else
        switch[1]:setPropertyByName('checked','true')
    end;
end;

代碼段2：頁面

<body>
    ...
    <!-- checked 測試-->
    <label class="label1">checked 測試</label>
    <label class='label2'> 默認打開狀態 </label>
    <input type="switch" value="sw18" name="sw20" checked="checked">yes</input>
    <input type="switch" value="sw18" name="sw20">no</input>
    <label class='label2'> 默認關閉狀態 </label>
    <input type="switch" value="sw18" name="sw20">yes</input>
    <input type="switch" value="sw18" name="sw20" checked="checked">no</input>
    <input type='button' value='點擊通過改變checked改變下面switch選中狀態' name='btn2' class='button' onclick='changechecked()'></input>
    <label class='label2'>默認關閉點擊之後switch開啓</label>
    <input type='switch' value='sw9' name='sw9'>yes</input>
    <input type='switch' value='sw9' name='sw9' checked="checked">no</input>
    ...
</body>

效果圖：

5.5 ontintcolor/offtintcolor/thumbtintcolor

代碼片段：頁面

<body>
    ...
    <!-- onTintColo -->
    <label class='label1'> ontintcolor 測試</label>
    <label class='label2'> ontintcolor:打開狀態顏色 </label>
    <input type='switch' value='sw13' ontintcolor="#3CB371" name='sw13'>yes</input>
    <input type='switch' value='sw13' name='sw13'>no</input>
    <!-- offtintcolor -->
    <label class='label1'> offtintcolor 測試</label>
    <label class='label2'> offtintcolor:關閉狀態顏色</label>
    <input type='switch' value='sw14' offtintcolor="#3CB371" name='sw14'>yes</input>
    <input type='switch' value='sw14' name='sw14'>no</input>
    <!-- thumbtintcolor -->
    <label class='label1'> thumbtintcolor 測試</label>
    <label class='label2'> thumbtintcolor:滑塊顏色</label>
    <input type='switch' value='sw15' thumbtintcolor="#2E8B57" name='sw15'>yes</input>
    <input type='switch' value='sw15' name='sw15'>no</input>
    <!--onTintColo offtintcolor thumbtintcolor Switch組合測試-->
    <label class='label1'> Switch組合測試</label>
    <label class='label2'> 開關狀態及滑塊顏色</label>
    <input type='switch' value='sw16' ontintcolor="#3CB371" offtintcolor="#3CB371" thumbtintcolor="#2E8B57" name='sw17'>yes</input>
    <input type='switch' value='sw16' name='sw17'>no</input>
    ...
</body>

效果圖：

Input:text

1 功能說明

Input:text 爲文本域控件, 供用戶輸入文本使用, 是由input標籤加type="text"屬性實現的。

例: <input type="text"/>

2 屬性

2.1 border

表示是否有邊框, 1表示有邊框, 0表示無邊框
@default 1

2.2 clearmode

指定輸入框中清空按鈕顯示的方式.
@value string never/always/editing/unlessEditing.
never: 不顯示清空按鈕.
always: 始終顯示清空按鈕.
editing: 編輯狀態下顯示清空按鈕.
unlessEditing: 非編輯狀態下顯示清空按鈕.
爲了保持與舊版本的兼容默認值各平臺會有區別: iOS 中默認值爲"editing"，其他平臺爲"never".

2.3 enable

指定文本域是否可用, 即是否響應用戶事件
@value string true/false
@default true.

2.4 hold

顯示在文本域中的輸入提示文字.
@value string 任意的字符串.

2.5 leftimg

指定輸入框左側小圖標.
@value string 圖片路徑,value格式同src屬性.。

2.6 leftimgmode

指定輸入框中左側圖標的顯示模式，與leftimg屬性組合使用.
@value string never/always/editing/unlessEditing.
never: 不顯示左側圖標.
always: 始終顯示左側圖標.
editing: 編輯狀態下顯示左側圖標.
unlessEditing: 非編輯狀態下顯示左側圖標.
默認值爲never.

2.7 returnkeyaction

指定鍵盤上確定按鈕的lua事件.
@value string 已定義的lua函數名稱.
注：對於安卓平臺，在響應returnkeyaction事件的同時，系統自帶的"下一步"功能依然生效.

2.8 returnkeytype

指定鍵盤中確定按鈕的類型,此功能僅針對ios平臺.
@value string default/go/Google/join/next/route/search/send/Yahoo/done/call.
value值分別對應iOS鍵盤確定按鈕的幾種類型，設置不同value值只是顯示效果不同，按鈕沒有自帶默認事件.
該屬性默認值爲default，顯示效果由系統決定，目前顯示爲"return"鍵.
說明：安卓平臺的確定按鈕只有"完成"和"下一步"兩種，在後面跟有另一個輸入框的情況下顯示"下一步"按鈕，其他情況顯示"完成"按鈕. 安卓的"下一步"按鈕自帶將焦點移動到下一輸入框的響應事件.

2.9 rightimg

指定輸入框右側小圖標.
@value string 圖片路徑,value格式同src屬性.

注意：- iOS系統clearbutton和rightimg有重疊現象，屬於系統限制。

AD系統clearbutton和rightimg同時顯示

2.10 rightimgmode

指定輸入框中右側圖標的顯示模式，與rightimg屬性組合使用.
@value string always/editing/unlessEditing.
never: 不顯示右側圖標.
always: 始終顯示右側圖標.
editing: 編輯狀態下顯示右側圖標.
unlessEditing: 非編輯狀態下顯示右側圖標.
默認值爲never.

2.11 style

指定輸入框的輸入類型, 多種類型組合時以";"分隔。具體定義如下:

-wap-input-format:'default' 表示默認鍵盤.包括字母,數字和符號.當不設置style屬性時,顯示默認鍵盤;
iOS效果:
-wap-input-format:'N' 表示0~9的數字鍵盤;
iOS效果:
-wap-input-format:'n' 表示數字和符號的組合鍵盤;
iOS效果:
-wap-input-format:'phone' 表示要求輸入的是電話號碼;
iOS效果:
-wap-input-format:'date' 表示要求輸入的是日期.
iOS效果:
-wap-input-format:'url' 表示輸入網址, 如 https://www.baidu.com;(只有iOS支持)
-wap-input-format:'email' 表示輸入郵箱地址, 如 [email protected];(只有iOS支持)

日期控件又有如下附加屬性:

showformat
指定顯示在界面中的日期格式.
@value string 日期格式匹配字符串
注: 5.2版本及之前版本支持showFormat,5.3版本更正爲showFormat. 同時爲了兼容也支持showFormat.
我們建議使用showformat.
valueformat
指定回傳服務器的Value值日期格式.
@value string 日期格式匹配字符串
注: 5.2版本及之前版本支持valueFormat,5.3版本更正爲valueformat. 同時爲了兼容也支持valueFormat.
我們建議使用valueformat.

以上格式匹配字符串遵循Unicode Technical Standard #35標準, 請參考Date Field Symbol Table. 目前客戶端支持year, month, day, week, weekday五個字段, 請根據需要和標準設置相應的格式匹配字符串. 下面列出了常用的匹配字符串及其含義供參考：

匹配字符串	含義	備註
y/yyy/yyyy	完整的年份	例：2014
yy	顯示年份的後兩位	例：14
M/MM	數字月份	取值範圍：1~12 注：MM代表總是顯示兩位數，位數不夠時第一位補0，例如：1月份寫爲"01"
MMM	月份簡寫	例：Jan，Feb
MMMM	月份全拼	例：January，February
d/dd	月份的第幾天	取值範圍：1~31 注：dd表示總是兩位數，位數不夠時第一位補0
D/DD/DDD	一年的第幾天	注：DD表示總是兩位數，DDD表示總是三位數，位數不夠時前面補0
w/ww (小寫)	一年中的第幾周	取值範圍：1~53 注：ww表示總是兩位數，位數不夠時前面補0
W (大寫)	一個月中的第幾周	取值範圍：1~5
E/EE/EEE	星期幾簡寫	例：Sun，Mon
EEEE	星期幾全拼	例：Sunday，Monday
c	一週的第幾天	週日爲第一天注：目前iphone和android平臺顯示有差異，iphone顯示的是數字，安卓顯示的是星期幾

以上匹配字符串中與簡寫和全拼相關的內容僅針對系統語言是英文的情況，若系統語言是中文，顯示效果會有差異。

android平臺顯示效果可參考android日期格式類規範

日期控件style示例:

<input type="text" style="-wap-input-format:'date'" showformat="yyyy-MM-dd" valueformat="yyyy/MM/dd"/>

注: 日期控件不支持hold屬性, value屬性的值必須爲日期格式, 當不指定value值時默認顯示當前日期。

2.12 鍵盤類型

iOS平臺對於style指定的輸入類型，需要指定的鍵盤類型,url和email對應的鍵盤顯示效果以系統提供爲準。

2.13 value

指定初始顯示在文本域中的文字內容
@value string 任意的字符串.

3 樣式

3.1 border

設置控件的邊框樣式。

注意：當type爲text或者password，以下情況均成立

在IOS平臺，在圓角處光標會隱藏。
在AD平臺，圓角由客戶端處理，光標爲系統處理，在圓角處光標不會隱藏。

3.2 border-radius

設置文本域四個邊的圓角屬性.

3.3 background-color

設置背景色.

3.4 background-image

設置背景圖片.

3.5 color

指定文本域中的文本顏色.

3.6 filter

設置漸變背景色或透明度.

3.7 font-size

設置字體大小.

3.8 font-style

指定文本的字體樣式.

3.9 font-weight

設置字體是否加粗顯示.

3.10 height

指定控件高度
@default 24px

3.11 text-align

控制文字顯示位置.
@default left

3.12 width

指定控件寬度
@default 300px

4 事件

4.1 onblur

當輸入框失去焦點時觸發此事件.

4.2 onchange

當輸入框內容改變時觸發此事件.

4.3 onfocus

當輸入框獲得焦點時觸發此事件.

5 Examples

示例input_text.xml

5.1 position

代碼片段1:css

<style>
    .father{width:280px;height:30px;left:20px;font-size: 15px;}
    .positionFixed{position:fixed;}
    .positionToplevel{position:toplevel;top:32px;}
    ...
</style>

代碼片段2:頁面

<body>
    <!-- positon:fixed 這是body的第一個控件 -->
    <input type="text" class="father,positionFixed" value="position:fixed,body第一個控件"/>
    <!-- positon:toplevel -->
    <input type="text" class="father,positionToplevel" value="position:toplevel,不隨頁面滾動"/>
    ...
    <!-- positon:fixed 這是body最後一個控件 -->
    <input type="text" class="father,positionFixed" value="positon:fixed,body最後一個控件"/>
<body>

效果圖:

5.2 display&visibility&hide

代碼片段1:css

<style>
    .father{width:280px;height:30px;left:20px;font-size: 15px;}
    .label{left:20px;font-size:12px;color:#0000FF;width:280px;}
    .display1{display:none;}
    .display2{display:block;}
    .visibility1{visibility:visible;}
    .visibility2{visibility:hidden;}
    ...
</style>

代碼片段2:頁面

<body>
    ...
    <!-- display -->
    <input type="text" class="father,display2" value="display=block 顯示"/>
    <label>下方有display=none的input:</label>
    <input type="text" class="father,display1" value="display=none,不顯示不佔位"/>
    <!-- visibility -->
    <input type="text" class="father,visibility1" value="visibility:visible,顯示"/>
    <label>下方有visibility=hidden的input:</label>
    <input type="text" class="father,visibility2" value="visibility:hidden,不顯示佔位"/>
    <!-- hide -->
    <input type="text" hide="false" class="father" value="hide=false 顯示"/>
    <label>下方有hide=true的input:</label>
    <input type="text" hide="true" class="father" value="hide=true,不顯示不佔位"/>
    <!-- hide display -->
    <input type="text" hide="true" class="father,display2" value="display=block hide=true,應顯示"/>
    <label>下方有display=none hide=false的input:</label>
    <input type="text" hide="false" class="father,display1" value="display=none hide=false,不顯示不佔位"/>
    <!-- hide visibility -->
    <input type="text" class="father,visibility1" hide="true" value="visibility:visible hide=true,應顯示"/>
    <label>下方有visibility:hidden hide=false的input:</label>
    <input type="text" class="father,visibility2" hide="false" value="visibility:hidden hide=false,佔位不顯示"/>
    <!-- display visibility -->
    <input type="text" class="father,display1,visibility1" value="visibility:visible display=none 應顯示"/>
    <label>下方有visibility:hidden display=block的input:</label>
    <input type="text" class="father,display2,visibility2" value="visibility:hidden display=block 佔位不顯示"/>
    ...
<body>

效果圖:

5.3 background-color&background-image&filter

代碼片段1:css

<style>
    .father{width:280px;height:30px;left:20px;font-size: 15px;}
    .background_color{background-color:#FFFF00;}
    .background_image{background-image:url(bg_img.png);}
    .filter1{filter:progid(startColorStr='#FFFF00',endColorStr='#ff0000',gradientType='1',alpha='0.5');}
    .filter2{filter:progid(alpha='0.5');background-color:#FFFF00;}
    ...
</style>

代碼片段2:頁面

<body>
    ...
    <!-- background-color -->
    <input type="text" class="father,background_color" value="背景色:background-color"/>
    <!-- background-image -->
    <input type="text" class="father,background_image" value="背景圖:background-image"/>
    <!-- filter -->
    <input type="text" class="father,filter1" value="漸變色:filter"/>
    <input type="text" class="father,filter2" value="透明度0.5:filter"/>
    ...
<body>

效果圖:

5.4 color&font-weight&font-size&font-style&text-align

代碼片段1:css

<style>
    .father{width:280px;height:30px;left:20px;font-size: 15px;}
    .textColor{color:#ff0000;}
    .fontWeight{font-weight:bold;}
    .fontSize{font-size:25px;}
    .fontStyle{font-style:italic;}
    .textAlignLeft{text-align:left;}
    .textAlignCenter{text-align:center;}
    .textAlignRight{text-align:right;}
    ...
</style>

代碼片段2:頁面

<body>
    ...
    <!-- color -->
    <input type="text" class="father,textColor" value="字體顏色:color"/>
    <!-- font-weight -->
    <input type="text" class="father,fontWeight" value="font-weight:bold"/>
    <!-- font-size -->
    <input type="text" class="father,fontSize" value="font-size:25px"/>
    <!-- font-style -->
    <input type="text" class="father,fontStyle" value="fontStyle:italic"/>
    <!-- fontStyle fontWeight-->
    <input type="text" class="father,fontWeight,fontStyle" value="bold+italic 加粗斜體"/>
    <!-- text-align -->
    <input type="text" class="father,textAlignLeft" value="text-align:left"/>
    <input type="text" class="father,textAlignCenter" value="text-align:center"/>
    <input type="text" class="father,textAlignRight" value="text-align:right"/>
    ...
<body>

效果圖:

5.5 border

代碼片段1:css

<style>
    .father{width:280px;height:30px;left:20px;font-size: 15px;}
    .borderOne{border:#FF0000;}
    .borderTwo{border:10px #FF0000;}
    .borderThree{border:10px solid #FF0000;}
    .height_40{height:40px;}
    ...
</style>

代碼片段2:頁面

<body>
    ...
    <!-- border屬性-->
    <input type="text" class="father" border="1" value="border=1 有邊框"/>
    <input type="text" class="father" border="0" value="border=0 無邊框"/>
    <input type="text" class="father" value="默認有邊框"/>
    <!-- border樣式 -->
    <input type="text" class="father,borderOne" value="border:#FF0000"/>
    <input type="text" class="father,height_40,borderTwo" value="border:10px #FF0000"/>
    <input type="text" class="father,height_40,borderThree" value="border:10px solid #FF0000"/>
    ...
<body>

效果圖:

5.6 border-radius

代碼片段1:css

<style>
    .father{width:280px;height:30px;left:20px;font-size: 15px;}
    .background_color{background-color:#FFFF00;}
    .background_image{background-image:url(bg_img.png);}
    .filter1{filter:progid(startColorStr='#FFFF00',endColorStr='#FF0000',gradientType='1',alpha='0.5');}
    .filter2{filter:progid(alpha='0.5'); background-color: #FFFF00;}
    .textAlignLeft{text-align:left;}
    .textAlignCenter{text-align:center;}
    .textAlignRight{text-align:right;}
    .borderRadiusFour{border-radius: 35px 20px 0px 10px;}
    .borderRadiusOne{border-radius:10px;}
    ...
</style>

代碼片段2:頁面

<body>
    ...
    <!-- border-radius -->
    <input type="text" class="father,borderRadiusFour" value="border-radius:35px 20px 0px 10px"/>
    <input type="text" class="father,borderRadiusOne" value="border-radius:10px"/>
    <!-- border-radius background-color-->
    <input type="text" class="father,borderRadiusFour,background_color" value="background-color+borderRadiusFour"/>
    <input type="text" class="father,borderRadiusOne,background_color" value="background-color+borderRadiusOne"/>
    <!-- border-radius background-image-->
    <input type="text" class="father,borderRadiusFour,background_image" value="background-image+borderRadiusFour"/>
    <input type="text" class="father,borderRadiusOne,background_image" value="background-image+borderRadiusOne"/>
    <!-- filter border-radius-->
    <input type="text" class="filter1,borderRadiusFour,father" value="filter漸變,borderRadiusFour"/>
    <input type="text" class="filter2,borderRadiusFour,father" value="filter透明度,borderRadiusFour"/>
    <!-- border-radius text-align-->
    <input type="text" class="textAlignLeft,background_color,borderRadiusFour,father" value="左對齊,borderRadiusFour"/>
    <input type="text" class="textAlignCenter,background_color,borderRadiusFour,father" value="居中,borderRadiusFour"/>
    <input type="text" class="textAlignRight,background_color,borderRadiusFour,father" value="右對齊,borderRadiusFour"/>
    ...
<body>

效果圖:

5.7 enable&hold&style

代碼片段1:css

<style>
    .father{width:280px;height:30px;left:20px;font-size: 15px;}
    ...
</style>

代碼片段2:頁面

對於-wap-input-format:'url'和-wap-input-format:'email'只有iOS支持

<body>
    ...
    <!-- enable -->
    <input type="text" enable="false" class="father" value="enable=false,控件不可用"/>
    <!-- hold -->
    <input type="text" hold="hold:輸入提示文字" class="father"/>
    <!-- style -->
    <input type="text" class="father" hold="只能輸入整數" style="-wap-input-format:'N'"/>
    <input type="text" class="father" hold="只能輸入實數" style="-wap-input-format:'n'"/>
    <input type="text" class="father" hold="只能輸入電話號碼" style="-wap-input-format:'phone'"/>
    <input type="text" class="father" style="-wap-input-format:'url'" hold="彈出url類型鍵盤"/>
    <input type="text" class="father" style="-wap-input-format:'email'" hold="彈出email類型鍵盤"/>
    <!-- 日期控件 -->
    <input type="text" class="father" style="-wap-input-format:'date'"/>
    ...
<body>

效果圖:

5.8 日期控件組合測試

代碼片段1:css

<style>
    .father{width:280px;height:30px;left:20px;font-size: 15px;}
    .label{left:20px;font-size:15px;color:#0000FF;width:280px;}
    .filter1{filter:progid(startColorStr='#FFFF00',endColorStr='#FF0000',gradientType='1',alpha='0.5');}
    .textColor{color:#ff0000;}
    .fontWeight{font-weight:bold;}
    .fontSize{font-size:25px;}
    .fontStyle{font-style:italic;}
    .textAlignRight{text-align:right;}
    .borderRadiusFour{border-radius: 35px 20px 0px 10px;}
    ...
</style>

代碼片段2:頁面

<body>
    ...
    <!-- 日期控件 fontStyle fontWeight -->
    <label>日期控件fontStyle+fontWeight:</label>
    <input type="text" class="father,fontWeight,fontStyle" style="-wap-input-format:'date'"/>
    <!-- 日期控件 textColor fontSize text-align -->
    <label>日期控件textColor+fontSize+text-align:</label>
    <input type="text" class="father,textColor,fontSize,textAlignRight" style="-wap-input-format:'date'"/>
    <!-- 日期控件 showformat -->
    <label>日期控件showformat:</label>
    <input type="text" class="father" style="-wap-input-format:'date'" showformat="w-E-yyyy-MM-d"/>
    <input type="text" class="father" style="-wap-input-format:'date'" showformat="W/EEEE/yy/MMM/dd"/>
    <!-- 日期控件 filter border-radius -->
    <label>日期控件filter+border-radius:</label>
    <input type="text" class="father,filter1,borderRadiusFour" style="-wap-input-format:'date'"/>
    ...
<body>

效果圖:

5.9 onfocus&onchange&onblur事件測試

代碼片段1:css

<style>
    .father{width:280px;height:30px;left:20px;font-size: 15px;}
    ...
</style>

代碼片段2:lua

<script type="text/x-lua">
    function alert(eventName)
        window:alert("這是".. eventName .."事件！");
    end;
</script>

代碼片段3:頁面

<body>
    ...
    <!-- 事件響應測試 -->
    <input type="text" class="father" value="onfocus事件測試" onfocus="alert('onfocus')"/>
    <input type="text" class="father" value="onchange事件測試" onchange="alert('onchange')"/>
    <input type="text" class="father" value="onblur事件測試" onblur="alert('onblur')"/>
    <input type="text" class="father" value="事件響應組合測試" onfocus="alert('onfocus')" onchange="alert('onchange')" onblur="alert('onblur')"/>
    ...
<body>

效果圖:

將光標放入"onfocus事件測試"的輸入框中，alert函數響應，如下圖：

改變"onchange事件測試"輸入框中的文字內容，alert函數響應，如下圖：

將光標放入"onblur事件測試"輸入框中再移出，alert函數響應，如下圖：

"事件組合測試"輸入框可以響應onfocus、onchange和onblur三種事件。

5.10 clearmode

代碼片段1:css

<style>
    .father{width:280px;height:30px;left:20px;font-size: 15px;}
    ...
</style>

代碼片段2:頁面

<body>
    ...
    <!--clearmode-->
    <input type="text" class="father" clearmode="never" value="clearmode=never"/>
    <input type="text" class="father" clearmode="always" value="clearmode=always" />
    <input type="text" class="father" clearmode="editing" value="clearmode=editing" />
    <input type="text" class="father" clearmode="unlessEditing" value="clearmode=unlessEditing" />
    ...
<body>

效果圖:

clearmode=never
不顯示清除按鈕，效果圖如下:
clearmode=always
總是顯示清除按鈕，效果圖如下:
clearmode=editing
非編輯狀態下不顯示清除按鈕，效果圖如下:

編輯狀態下顯示清除按鈕，效果圖如下:
clearmode=unlessEditing
非編輯狀態下顯示清除按鈕，效果圖如下:

編輯狀態下不顯示清除按鈕，效果圖如下:

5.11 returnkeytype&returnkeyaction

代碼片段1:css

<style>
    .father{width:280px;height:30px;left:20px;font-size: 15px;}
    ...
</style>

代碼片段2:lua

<script type="text/x-lua">
    ...
    function alert(eventName)
        window:alert("這是".. eventName .."事件！");
    end;
</script>

代碼片段3:頁面

<body>
    ...
    <!--returnkeytype returnkeyaction-->
    <input type="text" class="father" value="returnkeytype=default" returnkeytype="default"/>
    <input type="text" class="father" value="returnkeytype=go" returnkeytype="go"/>
    <input type="text" class="father" value="returnkeytype=join" returnkeytype="join"/>
    <input type="text" class="father" value="returnkeytype=next" returnkeytype="next"/>
    <input type="text" class="father" value="returnkeytype=done&returnkeyaction" returnkeytype="done" returnkeyaction="alert('returnkeyaction')"/>
    ...
<body>

效果圖(iOS平臺):

returnkeytype=default，效果圖如下:
returnkeytype=go，效果圖如下:
returnkeytype=join，效果圖如下:
returnkeytype=next，效果圖如下:
returnkeytype=done，效果圖如下:

點擊done按鈕，執行returnkeyaction屬性定義的事件，效果圖如下:

5.12 leftimg&leftimgmode

代碼片段1:css

<style>
    .father{width:280px;height:30px;left:20px;font-size: 15px;}
    ...
</style>

代碼片段2:頁面

<body>
    ...
    <!--leftimg leftimgmode-->
    <input type="text" class="father" leftimg="contact.png" value="leftimg(未定義leftimgmode默認不顯示)"/>
    <input type="text" class="father" leftimg="contact.png" leftimgmode="always" value="leftimg&leftimgmode=always"/>
    <input type="text" class="father" leftimg="contact.png" leftimgmode="editing" value="leftimg&leftimgmode=editing"/>
    <input type="text" class="father" leftimg="contact.png" leftimgmode="unlessEditing" value="leftimg&leftimgmode=unlessEditing" />
    ...
<body>

效果圖:

leftimg(未定義leftimgmode)
未定義leftimgmode時默認不顯示左圖標，效果圖如下:
leftimg&leftimgmode=always
總是顯示左圖標，效果圖如下:
leftimg&leftimgmode=editing
非編輯狀態下不顯示左圖標，效果圖如下:

編輯狀態下顯示左圖標，效果圖如下:
leftimg&leftimgmode=unlessEditing
非編輯狀態下顯示左圖標，效果圖如下:

編輯狀態下不顯示左圖標，效果圖如下:

5.13 rightimg&rightimgmode

代碼片段1:css

<style>
    .father{width:280px;height:30px;left:20px;font-size: 15px;}
    ...
</style>

代碼片段2:頁面

<body>
    ...
    <!--rightimg rightimgmode-->
    <input type="text" class="father" rightimg="contact.png" value="rightimg(未定義rightimgmode默認不顯示)"/>
    <input type="text" class="father" rightimg="contact.png" rightimgmode="always" value="rightimg&rightimgmode=always"/>
    <input type="text" class="father" rightimg="contact.png" rightimgmode="editing" value="rightimg&rightimgmode=editing"/>
    <input type="text" class="father" rightimg="contact.png" rightimgmode="unlessEditing" value="rightimg&rightimgmode=unlessEditing" />
    ...
<body>

效果圖:

rightimg(未定義rightimgmode)
未定義rightimgmode時默認不顯示右圖標，效果圖如下:
rightimg&rightimgmode=always
總是顯示右圖標，效果圖如下:
rightimg&rightimgmode=editing
非編輯狀態下不顯示右圖標，效果圖如下:

編輯狀態下顯示右圖標，效果圖如下:
rightimg&rightimgmode=unlessEditing
非編輯狀態下顯示右圖標，效果圖如下:

編輯狀態下不顯示右圖標，效果圖如下:

Label

1 功能說明

<label> 標籤用來定義標註（標記）。
例：<label>標記文字</label>

lable、b、strong、i、em標籤的顯示區域佈局規則說明：

未指定寬高樣式,根據內容計算寬高；
指定寬高樣式,按照樣式確定寬高,內容顯示不下的部分被截去.
指定了寬高樣式,同時又指定了numlines屬性,會出現內容顯示不全的情況,此時以...作爲結尾.但是當設置的linebreakmode時,由linebreakmode決定...的顯示.

關於回車（換行）說明：label顯示時會忽略行首行末的換行符號。

注意：通過樣式設定高度時,不能小於單行文字高度.IOS按單詞換行，Android按字符換行。目前客戶端label的寬度是根據內部顯示文字大小決定，如果該行剩餘位置不足以顯示一個文字，右側就會出現小於一個文字的間隔。

2 屬性

2.1 adjustsfontsize

指定是否自動調整文字大小以適應顯示區域.
@value true/false
@see minfontsize
當未設置linebreakmode或者linebreakmode爲none時, 只有numlines=1時adjustsfontsizeToFitWidth生效.
當設置linebreakmode爲head/tail/middle/時, 由numberOfLines和minimumFontSize共同決定顯示效果. 在numberOfLines指定的行數內,儘量多的顯示文字內容,並且保證字體大小不小於minimumFontSize指定的大小.
注:此功能開啓後,當文字需要縮小時,文字字號的設置將失效.同時文字最大不超過設置的字體大小.

2.2 linebreakmode

指定文字省略的模式.爲了兼容之前的功能，當沒有設置linebreakmode屬性而設置了numlines屬性時，默認將省略號放在末尾。而設置linebreakmode後，則按照linebreakmode中的定義顯示省略號。

2.3 loop

指定是否以跑馬燈的方式循環展示
@value true(以跑馬燈方式循環展示)/false(不以跑馬燈方式循環展示)

2.4 minfontsize

指定最小字號.該屬性和adjustsfontsize組合使用，當adjustsfontsize爲true時,文字會自動調整大小. minfontsize用來限制最小字體.以防止文字太小造成閱讀障礙.
@value int

2.5 numlines

指定固定文字顯示的行數
@value 0(代表沒有行數限制.)
注:當指定了linebreakmode時,由linebreakmode控制顯示省略號的位置.當沒有指定linebreakmode時,默認將省略號顯示在末尾.

2.6 shadowcolor

指定文字陰影效果的顏色
@value 格式爲#RRGGBB.
@see shadowoffset

注意：默認偏移量：{0.-1}。陰影無默認顏色，如果不給顏色則無陰影。

2.7 shadowoffset

指定文字陰影效果的偏移量
@value x,y方向偏移量,格式爲(x,y).
@see shadowcolor
注： shadowcolor和shadowoffset組合使用。若沒有設置shadowcolor，只設置了shadowoffset，則沒有陰影效果；若沒有設置shadowoffset，只設置了shadowcolor，則有陰影效果，陰影偏移量按默認設置來。

2.8 velocity

指定跑馬燈移動的速度.屬性值代表每秒文字移動的像素數或座標點數.

3 樣式

3.1 background-color

指定控件背景色.

3.2 color

指定控件文本顏色.

3.3 filter

指定控件的漸變色背景色樣式.

3.4 font-size

指定控件文本的字體大小.

3.5 font-style

設置字體樣式
@value normal/italic

3.6 font-weight

指定控件文本是否加粗顯示.

3.7 height

指定控件高度
@default 根據文字內容計算

3.8 text-align

指定控件文字顯示位置.
默認居左對齊。

3.9 width

指定控件寬度
@default 根據文字內容計算，但寬度不可超出父控件顯示範圍

4 Examples

示例代碼label.xml

4.1 &nbsp

css樣式：

<style>
    .father{width:300px;height:30px;left:10px;font-size:15px;background-color:#CCCCCC;}
    .label{width: 320px;height: 30px;background-color: #808080;}
</style>

頁面佈局

<body>
    <!-- &nbsp; -->
    <label>&nbsp;&nbsp;&nbsp;&nbsp;是一個空格.</label>
    <label>這是一個空格。</label>
</body>

效果圖

說明

 表示空格,一箇中文字符佔兩個字節，而一個字節是兩個空格的大小.
上圖中，第一個label與第二個label相比，開頭部分是4個 .

4.2 position

css樣式：

<style>
    .father{width:300px;height:30px;left:10px;font-size:15px;background-color:#CCCCCC;}
    .positionFixed{position:fixed;top:100px;}
    .positionToplevel{position:toplevel;top:200px;left:10px;background-color:#ff0000;}
</style>

頁面佈局

<body>
    <!-- positon:fixed -->
    <label class='father,positionFixed'> positon:fixed body第一個控件 </label>
    ...
    其他控件代碼
    ...
    <!-- positon:toplevel -->
    <label class='father,positionToplevel' > positon:toplevel 不隨頁面滾動 </label>
    ...
    其他控件代碼
    ...
    <!-- positon:fixed -->
    <label class='father,positionFixed'> positon:fixed body最後一個控件 </label>
</body>

效果圖

說明

聲明positon:fixes的樣式的控件，將定位於頁面頂部或底部，且不隨頁面滾動而滾動。且樣式top或者bottom失效，但是left或者right有效。聲明position:toplevel樣式的控件，不隨頁面滾動而滾動。且定位佈局有效。

4.3 loop

css樣式：

<style>
    .father{width:300px;height:30px;left:10px;font-size:15px;background-color:#CCCCCC;}
</style>

頁面佈局

<body>
    <!-- loop -->
    <label class="father" loop="false">loop="false" 無跑馬燈效果</label>
    <label class="father" loop="true">loop="true" 跑馬燈效果</label>
</body>

效果圖

說明

聲明loop="true"的屬性的控件，將呈現出跑馬燈效果，所附截圖爲跑馬燈效果觸發後。

4.4 numlines

css樣式：

<style>
    .father{width:300px;height:30px;left:10px;font-size:15px;background-color:#CCCCCC;}
    .numberlines{background-color:#CCCCCC;}
</style>

頁面佈局

<body>
    <!-- numlines -->
    <label class="numberlines" numlines="3">顯示三行，無法顯示完整時以“...”結尾。顯示三行，無法顯示完整時以“...”結尾。顯示三行，無法顯示完整時以“...”結尾。顯示三行，無法顯示完整時以“...”結尾。顯示三行，無法顯示完整時以“...”結尾。顯示三行，無法顯示完整時以“...”結尾。顯示三行，無法顯示完整時以“...”結尾。</label>
</body>

效果圖

4.5 linebreakmode

css樣式：

<style>
    .father{width:300px;height:30px;left:10px;font-size:15px;background-color:#CCCCCC;}
    .linebreakmode{font-size: 14px;}
</style>

頁面佈局

<body>
    <!-- linebreakmode -->
    <label class="father,linebreakmode"linebreakmode="head">linebreakmode="head",文字開始部分省略,
    用'...'代替.</label>
    <label class="father,linebreakmode"linebreakmode="tail">linebreakmode="tail",文字結尾部分省略,
    用'...'代替.</label>
    <label class="father,linebreakmode" linebreakmode="middle">linebreakmode="middle",文字中間部分
    省略,用'...'代替.</label>
    <label class="father,linebreakmode" linebreakmode="none">linebreakmode="none",不使用'...'代替.
    增加文字超過一行。</label>
    <label class="father,linebreakmode" numlines="1">linebreakmode未設置,numlines="1",此時在末尾
    省略.</label>
</body>

效果圖

4.6 velocity

css樣式：

<style>
    .father{width:300px;height:30px;left:10px;font-size:15px;background-color:#CCCCCC;}
</style>

頁面佈局

<body>
    <!-- velocity -->
    <label class="father" loop="true" velocity="5">velocity="5",指定跑馬燈的移動速度爲
    每秒5個像素點</label>
    <label class="father" loop="true" velocity="15">velocity="5",指定跑馬燈的移動速度爲
    每秒15個像素點</label>
</body>

效果圖

說明

由所附截圖可以看出，屬性velocity='5'的label中的文字，要比velocity='15'的label中的文字移動的速度慢。

4.7 shadowcolor

css樣式：

<style>
    .father{width:300px;height:30px;left:10px;font-size:15px;background-color:#CCCCCC;}
    .shadowcolor{height: 50px;}
</style>

頁面佈局

<body>
    <!-- shadowcolor -->
    <label class="father,shadowcolor" >不指定文字陰影效果的顏色</label>
    <label class="father,shadowcolor"shadowcolor="#FF0000">shadowcolor="#FF0000"，
    指定文字陰影效果的顏色爲紅色</label>
</body>

效果圖

說明

由所附截圖可以看出下方label的文字陰影效果的顏色爲紅色。

4.8 shadowoffset

css樣式：

<style>
    .father{width:300px;height:30px;left:10px;font-size:15px;background-color:#CCCCCC;}
    .shadowoffset{height: 50px;}
</style>

頁面佈局

<body>
    <!-- shadowoffset -->
    <label class="father,shadowoffset" shdowOffset="(9,9)">不指定文字陰影效果的顏色</label>
    <label class="father,shadowoffset" shadowcolor="#FF0000">指定文字陰影偏移量爲默認</label>
    <label class="father,shadowoffset" shadowcolor="#FF0000" shadowoffset="(9,0)">指定文字陰影偏移量爲(9,0)</label>
    <label class="father,shadowoffset" shadowcolor="#FF0000" shadowoffset="(0,9)">指定文字陰影偏移量爲(0,9)</label>
    <label class="father,shadowoffset" shadowcolor="#FF0000" shadowoffset="(9,9)">指定文字陰影偏移量爲(9,9)</label>
    <label class="father,shadowoffset" shadowcolor="#FF0000" shadowoffset="(9,15)">指定文字陰影偏移量爲(9,15)</label>
</body>

效果圖

說明

所附截圖顯示了效果,第二個label的文字陰影偏移量爲默認.並且,偏移量x最大值不可以超過當前文字的寬度,否則出現異常; 當偏移量y超過當前字體的高度時,偏移量無效.

4.9 hide dispaly visibility

css樣式：

<style>
    .father{width:300px;height:30px;left:10px;font-size:15px;background-color:#CCCCCC;}
    .display1{display:none;}
    .display2{display:block;}
    .visibility1{visibility:visible;}
    .visibility2{visibility:hidden;}
</style>

頁面佈局

<body>
    <!-- hide -->
    <label hide='false' class='father' > hide=false，下方有hide=true的label </label>
    <label hide='true' class='father' > hide=true的label,不應該顯示出來 </label>
    <label hide='false' class='father' > hide=false，上方有hide=true的label </label>
    <!-- diaplay -->
    <label class='father,display2' > display=block，下方有display=none的label </label>
    <label class='father,display1' > display=none，不應該顯示出來 </label>
    <label class='father,display2' > display=block，上方有display=none的label </label>
    <!-- visibility -->
    <label class='father,visibility1'> visibility:visible下方有visibility=hidden的label </label>
    <label class='father,visibility2'> visibility:hidden 不應該顯示 </label>
    <label class='father,visibility1'> visibility:visible上方有visibility=hidden的label </label>
</body>

效果圖

說明

由所附截圖可以看出，不論是屬性hide='false'或者是樣式display:none都將對控件起到隱藏的效果，且控件隱藏後不佔佈局。而通過visibility:hidden設置隱藏的控件隱藏後將佔佈局。

4.10 color font 相關

css樣式：

<style>
    .father{width:300px;height:30px;left:10px;font-size:15px;background-color:#CCCCCC;}
    .background_color {background-color:#FFFF00;}
    .textColor {color:#ff0000;}
    .filter {filter:progid(startColorStr='#FFFF00',endColorStr='#ff0000',gradientType='1',alpha='0.5');}
    .fontWeight{font-weight:bold;background-color:#CCCCCC;}
    .fontSize{font-size:30px;}
    .fontStyle{font-style:italic;}
    .textAlignLeft{text-align:left;}
    .textAlignCenter{text-align:center;}
    .textAlignRight{text-align:right;}
</style>

頁面佈局

<body>
    <!-- background-color -->
    <label class='father,background_color' > 背景色 ：background-color </label>
    <!-- color -->
    <label class='father,textColor' > 字體顏色：color </label>
    <!-- filter -->
    <label class='father,filter' > 漸變色：filter </label>
    <!-- font-weight -->
    <label class='father,fontWeight' > font-weight:bold </label>
    <!-- font-style -->
    <label class='father,fontStyle' > font-style:italic iOS7中文不斜體 </label>
    <!-- font-size -->
    <label class='father,fontSize' > font-size:30px </label>
    <!-- text-align -->
    <label class='father,textAlignLeft'> text-align:left </label>
    <label class='father,textAlignCenter'> text-align:center </label>
    <label class='father,textAlignRight'> text-align:right </label>
</body>

效果圖

4.11 label寬度

css樣式：

<style>
    .father{background-color:#CCCCCC;font-size:18px;}
    .father2{width:200px;background-color:#CCCCCC;font-size:18px;}
</style>

頁面佈局

<body>
    <label class="father">不設置label寬度如果該行剩餘位置不足以顯示一個文字，右側就會出現小於一個文字的間隔。</label><br/><br/>
    <label class="father2">設置了label寬度如果該行剩餘位置不足以顯示一個文字，右側就會出現小於一個文字的間隔。</label>
</body>

效果圖

4.12 其他

css樣式：

<style>
    .father{width:300px;height:30px;left:10px;font-size:15px;background-color:#CCCCCC;}
    .display1{display:none;}
    .display2{display:block;}
    .fontWeight{font-weight:bold;background-color:#CCCCCC;}
    .fontStyle{font-style:italic;}
    .visibility1{visibility:visible;}
    .visibility2{visibility:hidden;}
</style>

頁面佈局

<body>
    <!-- 組合測試 -->
    <!-- font-style  font-weight-->
    <label class='fontWeight,fontStyle,father'> bold+italic 加粗並傾斜顯示 </label>
    <!-- hide display -->
    <label hide='true' class='father,display2'> display=block hide=true 樣式>屬性應顯示 </label>
    <label hide='false' class='father,display1' > display=none hide=false 樣式>屬性不顯示 </label>
    <label hide='true' class='father,display2'> display=block hide=true 樣式>屬性應顯示 </label>
    <!-- hide visibility -->
    <label hide='true' class='father,visibility1'> visibility:visible hide=true 樣式>屬性應顯示</label>
    <label hide='false' class='father,visibility2' > visibility:hidden hide=false 樣式>屬性佔位不顯示 </label>
    <label hide='true' class='father,visibility1'> visibility:visible hide=true 樣式>屬性應顯示</label>
    <!-- display visibility -->
    <label class='father,display1,visibility1'> visibility:visible display=none 應顯示</label>
    <label class='father,display2,visibility2' > visibility:hidden display=block 佔位不顯示 </label>
    <label class='father,display1,visibility1'> visibility:visible display=none 應顯示</label>
</body>

效果圖

說明

此測試用例主要用於測試控件支持的屬性和控件支持的樣式的組合測試。針對上述，我們做如下說明：

由所附截圖可以看出，當樣式與屬性的設置起衝突後，將優先使用樣式的設置。在上報文中，屬性設置顯示且樣式設置隱藏的控件最終結果是隱藏且沒有佔佈局。

font-weight和 font-style 樣式的組合使用，可以支持字體的多種形式。
因爲樣式優先的原則，當hide屬性和diaplay、visibility樣式共同作用於控件時，樣式將起決定作用。
我們規定，visibility樣式將覆蓋display樣式。

富文本

1 概論

富文本（Rich Text），就是有格式的文本。
一般的富文本都支持字體顏色、字體字號、加粗、傾斜等樣式。
在傳統的做法中，我們都是通過css來控制文本的樣式，以使文本樣式有豐富的展現。爲了簡化和方便對文本樣式的控制，我們將設計一組富文本標籤，這些標籤支持最基本的文本格式。

2 富文本標籤需求

經過調研，選出的富文本標籤如下：

字體標籤：<font></font>，其中包括字體屬性：字色（color）、字號（size），各個屬性可以同時使用在一個標籤用法中。
粗體標籤：<b></b>標籤內文字的字體加粗。
斜體標籤：<i></i>標籤內文字的字體變斜體。
下劃線標籤：<u></u>標籤內文字加下劃線。
上標標籤：<sup></sup>標籤內文字變爲上標。
下標標籤：<sub></sub>標籤內文字變爲下標。
刪除字標籤：<del></del> 標籤內文字變爲刪除字。
插入字標籤：<ins></ins>標籤內文字變爲插入字。
超鏈接標籤：<a></a>標籤內文字變爲鏈接，包括屬性：
- href，指示鏈接的目標；
- onclick，點擊時執行的lua操作，當A標籤有onclik屬性時，不執行href跳轉。
圖片標籤：<img></img>標籤內爲一張圖片，包括屬性：資源地址src，格式參見：src
字號標籤：<hn></hn>n支持1~6
換行標籤：<br/>開始新的一行顯示

注：

針對字號標籤，我們規定各級標題對應的字體大小如下：

  typedef enum CustomHnTagFontSize {
      CustomH6TagFontSize = 20,
      CustomH5TagFontSize = 25,
      CustomH4TagFontSize = 30,
      CustomH3TagFontSize = 35,
      CustomH2TagFontSize = 40,
      CustomH1TagFontSize = 45,
  } CustomHnTagFontSize;

iOS平臺下中文斜體使用說明：
```
  // Create the framesetter with the attributed string.
  CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString(attrString);
  // Create the frame and draw it into the graphics context
  CTFrameRef frame = CTFramesetterCreateFrame(framesetter,CFRangeMake(0, 0), path, NULL);
```
經過跟蹤，我們發現，使用attrString(attrString爲CFMutableAttributedStringRef類型)創建CTFramesetterRef進而創建CTFrameRef時，系統返回的frame會將設置爲中文斜體的字符串重新賦值爲默認的字體樣式。因此iOS平臺下暫不支持中文斜體的顯示。
Android平臺使用說明：

1.不支持中文斜體顯示，這個屬於系統bug（經測試Android 原生瀏覽器也是不支持中文斜體的）。目前已發現存在此問題的手機：
小米3 、 alcate-OT 986 、魅族M9 、華爲 Y320-T00 、HTC Desire 7088

2.1 A標籤規範

默認狀態: 正常狀態顏色爲藍色, 點擊時顏色爲紫色;
如果標籤指定字體顏色,則正常狀態顏色爲指定顏色,點擊時顏色仍爲紫色.

注:

下劃線與文字顏色保持一致；
因系統限制，Android平臺無法實現點擊時改變顏色的功能，只需實現點擊後顏色爲紫色。

示例代碼：

<b>粗體</b>
<i>斜體</i>
<u>下劃線</u>
<sup>上標</sup>
<sub>下標</sub>
<del>刪除字</del>
<ins>插入字 </ins>
<img src="/i/eg_tulip.jpg"  width=20 height=20 />
<font color="red" size="4">絕對字體大小爲4的紅色字</font>
<font color="#00ff00" size="5">絕對字體大小爲5的綠色字</font>
<a href="http://www.w3school.com.cn">W3School html在線測試地址[http://www.w3school.com.cn]，歡迎使用！</a>
<h1>使用&lt;H1&gt;輸出1號標題字體</h1>
<h2>使用&lt;H2&gt;輸出2號標題字體</h2>
<h3>使用&lt;H3&gt;輸出3號標題字體</h3>
<h4>使用&lt;H4&gt;輸出4號標題字體</h4>
<h5>使用&lt;H5&gt;輸出5號標題字體</h5>
<h6>使用&lt;H6&gt;輸出6號標題字體</h6>

效果圖如下：

3 富文本標籤嵌套規範和用例

在實際應用中,往往需要多個標籤的嵌套，實現許多複雜的頁面展示效果，以完成一個任務。目前富文本中關於嵌套標籤的規範如下：
不能嵌套的標籤有：

<hn>-<hn>（標題的格式已經是固定，無需嵌套）
<br />
<img>

3.1 Case1:字體嵌套

在目前顯示文本中，都可以嵌套<font>標籤,如果遇到字體的屬性和標籤本身的屬性衝突，優先使用標籤的屬性。

示例代碼：

<b><font color="#FF0000" size="5">粗體帶font標籤</font></b><br />
<i><font color="#FF0000" size="3">斜體帶font標籤</font></i><br />
<u><font color="#00FF00" size="3">下劃線帶font標籤</font></u><br />
段落開始<sup><font color="#FF0000" size="2">上標帶font標籤</font></sup>段落結束<br />
段落開始<sub><font color="#FF0000" size="4">下標帶font標籤</font></sub>段落結束<br />
<del><font color="#FF0000" size="2">刪除字帶font標籤</font></del><br /><br />
<ins><font color="#FF0000" size="2">插入字帶font標籤</font></ins><br />
<a href="http://www.baidu.com"><font color="#FF0000" size="5">超鏈接帶font標籤</font></a>

3.2 Case2:標籤之間的嵌套

在目前顯示文本中，支持各標籤的合理多層嵌套
但是有些嵌套不符合使用習慣，不建議或不支持使用：

<del>與<ins>因顯示效果一致不建議使用；
<sub>與<sup>因顯示效果衝突不支持使用；
<a>與<del>、<ins>、<u>因不符合使用習慣不建議使用；
<sub>、<sup>與 <ins>、<del>、<a>因不符合使用習慣不建議使用。

示例代碼：

<b><i>粗體嵌套斜體</i></b><br />
<i><b>斜體嵌套粗體</b></i><br />
<b><i><font color="#FF0000" size="2">粗體嵌套斜體最後嵌套font(注意font是最後的嵌套層次，用來改變最後的字體格式)</font></i></b><br />
<u><b><i><font color="#FF0000" size="2">下劃線嵌套粗體嵌套斜體最後嵌套font</font></i></b></u><br />
<del><b><i><font color="#FF0000" size="2">刪除線嵌套粗體嵌套斜體嵌套font</font></i></b></del><br />
<ins><b><i><font color="#FF0000" size="2">插入字嵌套粗體嵌套斜體嵌套font</font></i></b></ins><br />

4 報文格式

richtext爲富文本標籤名,富文本內容由cdata區域包含.

<richtext class ="richText1" name ="richText">
    <![CDATA[
        <b>粗體</b>
        <i>斜體</i>
        <u>下劃線</u>
        <sup>上標</sup>
        <sub>下標</sub>
        <del>刪除字</del>
        <ins>插入字 </ins>
        <img src="/i/eg_tulip.jpg"  width=20 height=20 />
        <font color="red" size="4">絕對字體大小爲4的紅色字</font>
        <font color="#00ff00" size="5">絕對字體大小爲5的綠色字</font>
        <a href="http://www.w3school.com.cn">W3School html在線測試地址[http://www.w3school.com.cn]，歡迎使用！</a>
        <h1>使用&lt;H1&gt;輸出1號標題字體</h1>
        <h2>使用&lt;H2&gt;輸出2號標題字體</h2>
        <h3>使用&lt;H3&gt;輸出3號標題字體</h3>
        <h4>使用&lt;H4&gt;輸出4號標題字體</h4>
        <h5>使用&lt;H5&gt;輸出5號標題字體</h5>
        <h6>使用&lt;H6&gt;輸出6號標題字體</h6>
        <h7>使用&lt;H7&gt;輸出7號標題字體</h7>
    ]]>
</richtext>

5 Example

示例RichText.xml

5.1 標籤測試

測試報文

<body>
    <div>
        <richtext name ="richText">
            <![CDATA[
                <font size="30">標籤測試</font><br/>
                <b>粗體</b><br/>
                <i>斜體123abc</i><br/>
                <u>下劃線</u><br/>
                正常文本<sup>上標</sup>正常文本<br/>
                正常文本<sub>下標</sub>正常文本<br/>
                <del>刪除字</del><br/>
                <ins>插入字</ins><br/>
                <img src="animation.png" width=20 height=20 /><br/>
                <font color="red" size="24">絕對字體大小爲24的紅色字</font><br/>
                <font color="#00ff00" size="15">絕對字體大小爲15的綠色字</font><br/>
                <a href="http://www.w3school.com.cn">W3School html在線測試地址[http://www.w3school.com.cn]，歡迎使用！</a><br/>
                <h1>使用&lt;H1&gt;輸出1號標題字體</h1>
                <h2>使用&lt;H2&gt;輸出2號標題字體</h2>
                <h3>使用&lt;H3&gt;輸出3號標題字體</h3>
                <h4>使用&lt;H4&gt;輸出4號標題字體</h4>
                <h5>使用&lt;H5&gt;輸出5號標題字體</h5>
                <h6>使用&lt;H6&gt;輸出6號標題字體</h6>
                <h7>使用&lt;H7&gt;輸出7號標題字體</h7><br/>
                這是富文本的默認字體，不含任何標籤，應該與<H7>顯示效果一直<br/><br/><br/><br/>                    
            ]]>
        </richtext>
    </div>
</body>

顯示效果

5.2 字體嵌套測試

測試報文

<body>
    <div>
        <richtext name ="richText">
            <![CDATA[
                <font size="30">字體嵌套測試</font><br/>
                <b><font size="20">粗體嵌套font標籤</font></b><br/>
                <i><font size="20">斜體嵌套font標籤abc123</font></i><br/>
                <u><font size="20">下劃線嵌套font標籤</font></u><br/>
                正常文本<sup><font size="20">上標嵌套font標籤</font></sup>正常文本<br/>
                正常文本<sub><font size="20">下標嵌套font標籤</font></sub>正常文本<br/>
                <del><font size="20">刪除字嵌套font標籤</font></del><br/>
                <ins><font size="20">插入字嵌套font標籤</font></ins><br/>
                <a href="http://www.baidu.com.cn"><font size="20">超鏈接嵌套font標籤</font></a><br/>

                <font size="20"><b>font標籤嵌套粗體</b></font><br/>
                <font size="20"><i>font標籤abc123嵌套斜體</i></font><br/>
                <font size="20"><u>font標籤嵌套下劃線</u></font><br/>
                正常文本<font size="20"><sup>font標籤嵌套上標</sup></font>正常文本<br/>
                正常文本<font size="20"><sub>font標籤嵌套下標</sub></font>正常文本<br/>
                <font size="20"><del>font標籤嵌套刪除字</del></font><br/>
                <font size="20"><ins>font標籤嵌套插入字</ins></font><br/>
                <font size="20"><a href="http://www.baidu.com.cn">font標籤嵌套超鏈接</a></font><br/><br/><br/><br/>
            ]]>
        </richtext>
    </div>
</body>

顯示效果

5.3 集合測試

測試報文

<body>
    <div>
        <richtext name ="richText">
            <![CDATA[
                <font size="30">集合測試</font><br/>
                <h4>面朝大海，春暖花開</h4><br/>
                <font size="20">海子<sup>詩人</sup></font><br/>
                <font>從明天起，做一個<b>幸福</b>的人<br/>
                <i>餵馬、劈柴，周遊世界</i><br/>
                從明天起，<u>關心糧食和蔬菜</u><br/>
                我有一所房子，<font color="red">面朝大海，春暖花開</font><br/>
                從明天起，和每一個親人通信 告訴他們我的幸福<br/>
                那幸福的閃電告訴我的<br/>
                我將告訴每一個人<br/>
                給每一條河每一座山取一個溫暖的名字<br/>
                陌生人，我也爲你祝福<br/>
                願你有一個燦爛的前程<br/>
                願你有情人終成眷屬<br/>
                願你在塵世獲得幸福<br/>
                我只願面朝大海，春暖花開<br/>
                <i>1989.1.13<sub>書</sub></i><br/>
                這是一首<del>歌曲</del><ins>詩歌</ins><br/>
                <a href="http://www.baidu.com">詳細信息 www.baidu.com 百度一下，你就知道</a></font><br/><br/><br/><br/>
            ]]>
        </richtext>
    </div>
</body>

顯示效果

5.4 兩層標籤嵌套測試

測試報文

<body>
    <div>
        <richtext name ="richText">
            <![CDATA[
                <font size="30">兩層標籤嵌套測試</font><br/>
                <b><i>b標籤abc123嵌套斜體</i></b><br/>
                <b><u>b標籤嵌套下劃線</u></b><br/>
                正常文本<b><sup>b標籤嵌套上標</sup></b>正常文本<br/>
                正常文本<b><sub>b標籤嵌套下標</sub></b>正常文本<br/>
                <b><del>b標籤嵌套刪除字</del></b><br/>
                <b><ins>b標籤嵌套插入字</ins></b><br/>
                <b><a href="http://www.baidu.com.cn">b標籤嵌套超鏈接</a></b><br/>
                <i><u>i標籤123abc嵌套下劃線</u></i><br/>
                正常文本<i><sup>i標籤123abc嵌套上標</sup></i>正常文本<br/>
                正常文本<i><sub>i標籤123abc嵌套下標</sub></i>正常文本<br/>
                <i><del>i標籤123abc嵌套刪除字</del></i><br/>
                <i><ins>i標籤123abc嵌套插入字</ins></i><br/>
                <i><a href="http://www.baidu.com.cn">i標籤123abc嵌套超鏈接</a></i><br/>
                正常文本<u><sup>u標籤嵌套上標</sup></u>正常文本<br/>
                正常文本<u><sub>u標籤嵌套下標</sub></u>正常文本<br/>
                <u><del>u標籤嵌套刪除字</del></u><br/>
                <u><ins>u標籤嵌套插入字</ins></u><br/>
                <u><a href="http://www.baidu.com.cn">u標籤嵌套超鏈接</a></u><br/>
                <del><a href="http://www.baidu.com.cn">del標籤嵌套超鏈接</a></del><br/>
                <ins><a href="http://www.baidu.com.cn">ins標籤嵌套超鏈接</a></ins><br/><br/><br/><br/>
            ]]>
        </richtext>
    </div>
</body>

顯示效果

5.5 a標籤嵌套測試

測試報文

<body>
    <div>
        <richtext name ="richText">
            <![CDATA[
                <font size="30">a標籤嵌套測試</font><br/>
                <a href="http://www.baidu.com"><b>粗體</b><i>斜體123abc</i><sup>上標</sup><sub>下標</sub>
                </a><br/><br/><br/><br/>
            ]]>
        </richtext>
    </div>
</body>

顯示效果

5.6 多層（大於兩層）標籤嵌套測試

測試報文

<body>
    <div>
        <richtext name ="richText">
            <![CDATA[
                <font size="30">多層（大於兩層）標籤嵌套測試</font><br/>
                <u><b><i>下劃線+粗體+斜體abc123</i></b></u><br/>
                <del><b><i>刪除線+粗體+斜體abc123</i></b></del><br/>
                <ins><b><i>插入字+粗體+斜體abc123</i></b></ins><br/>
                <u><b><i><font size="20">下劃線+粗體+斜體abc123+font</font></i></b></u><br/>
                <del><b><i><font size="20">刪除線+粗體+斜體abc123+font</font></i></b></del><br/>
                <ins><b><i><font size="20">插入字+粗體+斜體abc123+font</font></i></b></ins><br/>
                <b><u><i><font size="15">粗體+下劃線+斜體abc123+font</font></i></u></b><br/>
                <b><i><u><font size="15">粗體+斜體abc123+下劃線+font</font></u></i></b><br/>
                <i><b><u><font size="15">斜體abc123+粗體+下劃線+font</font></u></b></i><br/>
                <i><u><b><font size="15">斜體abc123+下劃線+粗體+font</font></b></u></i><br/>
                <u><i><b><font size="15">下劃線+斜體abc123+粗體+font</font></b></i></u><br/>
                <u><b><i><font size="15">下劃線+粗體+斜體abc123+font</font></i></b></u><br/><br/><br/><br/><br/>
            ]]>
        </richtext>
    </div>
</body>

顯示效果

Select and Option

1 功能說明

select表示多選框，子節點option必須與select同時使用。

例:

<select>
    <option>option111</option>
    <option>option222</option>
</select>

2 屬性

全局屬性以及具體說明參見 * 屬性介紹

2.1 select屬性

2.1.1 border

指定select是否有邊框
@value string 0/1
@default 0

2.1.2 enable

指定select是否可以彈出選項列表
@value string true/false
@default true

2.2 option屬性

2.2.1 selected

設置select控件的默認選項，如果沒有該屬性，則默認選中第一個option
@value string selected

2.2.2 text

text表示option控件顯示出來的值
@value string 任意字符串

注：option的文字單行顯示

2.2.3 value

value值用來上傳服務器
@value string 任意字符串

注：option的屬性目前不支持lua中動態設置。

3 樣式

3.1 select樣式

全局樣式以及具體說明參見 * 樣式介紹

注意：字體樣式只對選中項起作用

3.1.1 background-color

設置背景色 @format #RGB(如#FFFFFF)
@default transparent(透明)

3.1.2 background-image

設置背景圖
@format1 url(image.png)
@format2 url(local:image.png)
@format3 url(http:// | https// | ewp_local://)

3.1.3 border

設置控件邊框的樣式（寬度，線型，顏色）
@format1 25px solid #fff000
@format2 只寫以上三項的任意一項或兩項
@default 1px solid #d4d5d9

3.1.4 border-radius

設置控件四個邊的圓角屬性
@format1 25px 10px 0px 10px
@format2 10px
@default 0px(即直角)

3.1.5 color

設置字體顏色 @format #RGB(如#FF00FF)
@default #000000

3.1.6 filter

設置漸變背景色或者透明度.
@format1 progid(startColorStr='#FFFFFF',endColorStr='#000000',gradientType='0',alpha='0.5')
@format2 progid(alpha='0.5')

3.1.7 font-size

設置字體大小
@format 10px
@default 各平臺有差異

3.1.8 font-style

設置字體樣式
@value normal/italic
@default normal

3.1.9 font-weight

設置字體類型
@value normal/bold
@default normal

3.2 height

指定控件高度
@default 30px

3.2.1 text-align

設置文字對齊方式
@value left/center/right
@default left

3.3 width

指定控件寬度
@default 根據內容最長的子option計算，但不可超出父控件顯示範圍

3.4 option樣式

option的樣式支持區別於其他控件. 同一組的option只需要設置一個樣式,並將此樣式作用到同組的其他option上. 取前置標籤的樣式作爲整組option的樣式. 如下報文,則會以option2的樣式作爲整組option的樣式.

<select>
    <option >option111</option>
    <option class="option2">option222</option>
    <option class="option3">option222</option>
</select>

3.4.1 color

設置字體顏色
@format #RGB(如#FF00FF)
@default #000000

3.4.2 font-size

設置字體大小
@format 10px
@default 各平臺有差異

3.4.3 font-style

設置字體樣式
@value normal/italic
@default normal

3.4.4 font-weight

設置字體類型
@value normal/bold
@default normal

3.4.5 text-align

設置文字對齊方式
@value left/center/right
@default left

4 事件

4.1 option

4.1.1 onclick

option可以設置點擊事件.
說明：option的點擊事件只有在用戶切換option控件時才觸發。如下圖示例,若select當前選中項爲option1，用戶在彈出的option選項列表中點擊了option1不能觸發點擊事件，點擊option2才能觸發點擊事件。

5 Examples

示例代碼地址： select.xml

說明：當select控件無可選用項時，iOS的5.3EMP與6.0ERT顯示效果不同，不影響功能，5.3無可選用項時，彈出下拉框，內容爲空，6.0不彈出下拉框，安卓同6.0，保留當前顯示效果各自爲準，目前不做統一。

5.1 position

代碼片段1:css

    <style>
        .father{width:200px;height:30px;left:10px;background-color:#afdfe4;}
        .positionFixed{position:fixed;filter:progid(alpha='0.5');background-color:#E0FFFF;}
        .positionToplevel{position:toplevel;top:50px;filter:progid(alpha='0.5');background-color:#E0FFFF;}
    </style>

代碼片段2:頁面

    <body>
        <!-- positon:fixed，這是body的第一個控件 -->
        <select class='father,positionFixed'>
          <option>1:in select Fixed</option>
          <option>2:in select Fixed</option>
        </select>
        <!-- positon:fixed，這是body的最後一個控件 -->
        <select class='father,positionFixed'>
          <option>1:in select Fixed</option>
          <option>2:in select Fixed</option>
        </select>
    <body>

效果圖:

5.2 text/value

代碼片段1:css

    <style>
        .father{width:200px;height:30px;left:10px;background-color:#afdfe4;}
    </style>

代碼片段2:頁面

    <body>
        <!-- text/value-->
        <b>測試option對text/value的支持</b><br/>
        <select class='father'>
          <option value="value1">option-text1</option>
          <option value="value2">option-text2</option>
          <option value="value3">option-text3</option>
        </select>
    <body>

效果圖:

5.3 selected

代碼片段1:css

    <style>
        .father{width:200px;height:30px;left:10px;background-color:#afdfe4;}
    </style>

代碼片段2:頁面

    <body>
        <!-- selected-->
        <b>測試option對selected的支持:設置選擇第二項</b><br/>
        <select class='father'>
          <option value="value1">option-text1</option>
          <option selected="selected" value="value2">option-text2</option>
          <option value="value3">option-text3</option>
        </select>
    <body>

效果圖:

5.4 display&hide&visibility

代碼片段1:css

    <style>
        .father{width:200px;height:30px;left:10px;background-color:#afdfe4;}
        .display1{display:none;}
        .display2{display:block;}
        .visibility1{visibility:visible;}
        .visibility2{visibility:hidden;}
    </style>

代碼片段2:頁面

    <body>
       <b>測試select對hide/display/visibility的支持</b><br/>

        <!-- hide -->
        <label>下面的select有:hide=false</label><br/>
        <select hide="false" class='father'>
          <option>option1</option>
          <option>option2</option>
        </select>
        <label>下面的select有:hide=true</label><br/>
        <select hide="true" class='father'>
          <option>option1</option>
          <option>option2</option>
        </select>

         <!-- diaplay -->
        <label>下面的select有:display=none</label><br/>
        <select class='father,display1' >
          <option>option1</option>
          <option>option2</option>
        </select>
        <label>下面的select有:display=block</label><br/>
        <select class='father,display2' >
          <option>option1</option>
          <option>option2</option>
        </select>

        <!-- visibility -->
        <label>下面的select有:visibility=visible</label><br/>
        <select class='father,visibility1' >
          <option>option1</option>
          <option>option2</option>
        </select>
        <label>下面的select有:visibility=hidden</label><br/>
        <select class='father,visibility2' >
          <option>option1</option>
          <option>option2</option>
        </select>
    <body>

效果圖:

5.5 enable

代碼片段1:css

    <style>
        .father{width:200px;height:30px;left:10px;background-color:#afdfe4;}
    </style>

代碼片段1:lua

    function click(arg)
        local info="可以點擊！info:"..arg;
        window:alert(info);
    end;

代碼片段2:頁面

    <body>
        <!-- enable and onclick事件 -->
        <b>測試select對enable的支持，option對onclick的支持</b><br/>
         <label>下面的select有:enable=true</label><br/>
        <select class='father' enable="true" >  
          <option>option1</option>
          <option>option2</option>
        </select>
        <label>下面的select有:enable=false</label><br/>
        <select class='father' enable="false" >
          <option>option1</option>
          <option>option2</option>
        </select>
        <label>下面的option定義了onclick事件</label><br/>
        <select class='father'>
          <option onclick="click('option1')">option1</option>
          <option onclick="click('option2')">option2</option>
        </select>
    <body>

效果圖:

5.6 background-image&background-color&filter

代碼片段1:css

    <style>
        .father{width:200px;height:30px;left:10px;background-color:#afdfe4;}
        .background_color {background-color:#FFFF00;}
        .background_image {background-image:url(a.png);}
        .filter1 {filter:progid(startColorStr='#FFFF00',endColorStr='#ff0000',gradientType='1',alpha='0.5');}
        .filter2 {filter:progid(alpha='0.5'); background-color:#FFFF00;}
    </style>

代碼片段2:頁面

    <body>
       <!-- filter/background-color/background-image-->
        <b>測試select對filter/background-color/background-image的支持</b><br/>
        <!-- filter -->
        <label>下面的select有:filter漸變</label><br/>
        <select class='father,filter1' >
          <option>option1</option>
          <option>option2</option>
        </select>
        <label>下面的select有:filter透明度</label><br/>
        <select class='father,filter2' >
          <option>option1</option>
          <option>option2</option>
        </select>
        <!-- background-color -->
        <label>下面的select有:background-color</label><br/>
        <select class='father,background_color' >  
          <option>option1</option>
          <option>option2</option>
        </select>
        <!-- background-image -->
        <label>下面的select有:background-image</label><br/>
        <select class='father,background_image' >
          <option>option1</option>
          <option>option2</option>
        </select>
    <body>

效果圖:

5.7 font系列

5.7.1 select對font系列的支持

代碼片段1:css

    <style>
        .father{width:200px;height:30px;left:10px;background-color:#afdfe4;}
        .textColor {color:#ff0000;}
        .fontWeight{font-weight:bold;}
        .fontSize{font-size:25px;}
        .fontStyle{font-style:italic;}
        .textAlignLeft{text-align:left;}
        .textAlignCenter{text-align:center;}
        .textAlignRight{text-align:right;}
    </style>

代碼片段2:頁面

    <body>
        <!-- color/font-size/font-wight/font-style-->
        <b>測試select對color/font-size/font-wight/font-style/text-align的支持</b><br/>
        <!--color-->
        <select class='father,textColor' >
           <option>1-color</option>
           <option>2-color</option>
        </select>
        <!--fontSize-->
        <select class='father,fontSize' >
           <option>1-font-size:25px</option>
           <option>2-font-size:25px</option>
        </select>
        <!--fontWeight-->
        <select class='father,fontWeight' >
           <option>1-font-weight</option>
           <option>2-font-weight</option>
        </select>
        <!--fontStyle-->
        <select class='father,fontStyle' >
           <option>1-font-style</option>
           <option>2-font-style</option>
        </select>
        <!--textAlign-->
        <select class='father,textAlignLeft' >
           <option>1-textAlignLeft</option>
           <option>2-textAlignLeft</option>
        </select>
        <select class='father,textAlignCenter' >
           <option>1-textAlignCenter</option>
           <option>2-textAlignCenter</option>
        </select>
        <select class='father,textAlignRight' >
           <option>1-textAlignRight</option>
           <option>2-textAlignRight</option>
        </select>
    <body>

效果圖:

6

6.0.1 option對font系列的支持

option樣式支持規則,同組的option支持一個樣式

6.0.1.1 option對color的支持

代碼片段1:css

    <style>
        .father{width:200px;height:30px;left:10px;background-color:#afdfe4;}
        .textColor {color:#ff0000;}
                .tip{font-size: 14px;color:#00FF00;}
                .option_father{font-size: 15px;}
    </style>

代碼片段2:頁面

    <body>
        <b class="tip">測試option對color的支持</b><br/>
        <select class='father' >
            <option class='option_father,textColor'>1-color</option>
            <option>2-color</option>
        </select>
    <body>

效果圖:

7

7.0.0.1 option對font-size的支持

代碼片段1:css

    <style>
        .father{width:200px;height:30px;left:10px;background-color:#afdfe4;}
        .fontSize{font-size:25px;}
                .tip{font-size: 14px;color:#00FF00;}
    </style>

代碼片段2:頁面

    <body>
        <b class="tip">測試option對font-size</b><br/>
        <select class='father' >
            <option class='fontSize'>1-font-size:25px</option>
            <option>2-font-size:25px</option>
        </select>
    <body>

效果圖:

8

8.0.0.1 option對font-weight的支持

代碼片段1:css

    <style>
        .father{width:200px;height:30px;left:10px;background-color:#afdfe4;}
        .fontWeight{font-weight:bold;}
        .tip{font-size: 14px;color:#00FF00;}
                .option_father{font-size: 15px;}
    </style>

代碼片段2:頁面

    <body>
        <b class="tip">測試option對font-wight的支持</b><br/>
        <select class='father' >
            <option class='option_father,fontWeight'>1-font-weight</option>
            <option>2-font-weight</option>
        </select>
    <body>

效果圖:

9

9.0.0.1 option對font-style的支持

代碼片段1:css

    <style>
        .father{width:200px;height:30px;left:10px;background-color:#afdfe4;}
        .fontStyle{font-style:italic;}
        .tip{font-size: 14px;color:#00FF00;}
                .option_father{font-size: 15px;}
    </style>

代碼片段2:頁面

    <body>
        <b class="tip">測試option對font-wight的支持</b><br/>
            <b class="tip">測試option對font-style的支持</b><br/>
            <select class='father' >
                <option class='option_father,fontStyle'>1-font-style</option>
                <option>2-font-style</option>
            </select>
    <body>

效果圖:

10

10.0.0.1 option對text-align的支持

代碼片段1:css

    <style>
        .father{width:200px;height:30px;left:10px;background-color:#afdfe4;}
        .textAlignLeft{text-align:left;}
        .textAlignCenter{text-align:center;}
        .textAlignRight{text-align:right;}
                .tip{font-size: 14px;color:#00FF00;}
                .option_father{font-size: 15px;}
    </style>

代碼片段2:頁面

    <body>
        <b class="tip">測試option對text-align的支持</b><br/>
        <select class='father' >
            <option class='option_father,textAlignLeft'>1-textAlignLeft</option>
            <option>2-textAlignLeft</option>
        </select>
        <select class='father' >
            <option class='option_father,textAlignCenter'>1-textAlignCenter</option>
            <option>2-textAlignCenter</option>
        </select>
        <select class='father' >
            <option class='option_father,textAlignRight'>1-textAlignRight</option>
            <option>2-textAlignRight</option>
        </select>
    <body>

效果圖:

11

11.1 border屬性

代碼片段1:css

<style>
    .father_border{width:300px;height:30px;left:10px;font-size:12px;}
    .borderRadiusFour{border-radius: 0px 10px 15px 20px;}
    .borderRadiusOne{border-radius:10px;}
    .border{border:3px solid #00ff00}
    ...
</style>

代碼片段2:頁面

<body>
   <!-- select對border的支持 -->
    <b>測試select對border屬性的支持</b><br/>
    <select class='father_border'>
       <option>select沒有指定屬性border=?默認爲0</option>
    </select>
    <select class='father_border' border="0">
       <option>select指定屬性border=0</option>
    </select>
    <select class='father_border' border="1">
       <option>select指定屬性border=1</option>  
    </select>
    <select class='father_border,background_color' border="1">
       <option>select有:background-color,border=1</option>
    </select>
    <select class='father_border,background_image' border="1">
       <option>select有:background-image,border=1</option>  
    </select>
    ...
<body>

效果圖:

11.2 border樣式

代碼片段1:css

<style>
    .father_border{width:300px;height:30px;left:10px;font-size:12px;}
    .borderRadiusFour{border-radius: 0px 10px 15px 20px;}
    .borderRadiusOne{border-radius:10px;}
    .border{border:3px solid #00ff00}
    ...
</style>

代碼片段2:頁面

<body>
   <!-- select對border的支持 -->
    <b>測試select對border樣式的支持</b><br/>
    <select class='father_border,border' border="0">  
      <option>select有:border=0,border樣式不起作用</option>
    </select>
    <select class='father_border,border' border="1">  
      <option>select有:border=1,border:3px solid #00ff00</option>
    </select>
    <select class='father_border,background_color,border' border="1">
       <option>select有:background-color,border=1,border:3px solid #00ff00</option>
    </select>
    <select class='father_border,background_image,border' border="1">
       <option>select有:background-image,border=1,border:3px solid #00ff00</option>
    </select>
    ...
<body>

效果圖:

11.3 border-radius

代碼片段1:css

<style>
    .father_border{width:300px;height:30px;left:10px;font-size:12px;}
    .borderRadiusFour{border-radius: 0px 10px 15px 20px;}
    .borderRadiusOne{border-radius:10px;}
    .border{border:3px solid #00ff00}
    ...
</style>

代碼片段2:頁面

<body>
    <b>測試select對border-radius的支持</b><br/>
    <select class='father_border,borderRadiusOne,background_color' border="0">
        <option>select有:border=0,border-radius不起作用</option>
    </select>  

    <select class='father_border,borderRadiusOne' border="1">  
      <option>select有:border=1,border-radius:10</option>
    </select>
    <select class='father_border,borderRadiusOne,background_color' border="1">
        <option>select有:border=1,border-radius:10,background-color</option>
    </select>
    <select class='father_border,borderRadiusOne,background_image' border="1">
        <option>select有:border=1,border-radius:10,background-image</option>
    </select>  
    <select class='father_border,borderRadiusFour' border="1">  
       <option>select有:border=1,border-radius:0 10 15 20</option>
    </select>
    <select class='father_border,borderRadiusFour,background_color' border="1">
      <option>select有:border=1,border-radius:0 10 15 20,background-color</option>
    </select>
    <select class='father_border,borderRadiusFour,background_image' border="1">
       <option>select有:border=1,border-radius:0 5 10 15,background-image</option>
    </select>
    ...
<body>

效果圖:

Table & Tr & Td & Th

1 功能說明

table是用來展示表格的控件，tr表示行，th/td表示列。目前table尚不支持行列的合併,th尚未實現多餘功能,和td功能相同。一般，tr放在table中，td放在tr中。td也是一個容器控件，td內可以盛放label,image,div等控件。

table可以滑動（即當table的contentSize超過height會有滾動條）。

我們的table默認是一個塊級元素，所以table的前後都會自動換行，即table會獨佔一行。

table佈局參見 * table佈局

例:

<table>
    <tr>
        <th>
            <label>第一列:標題</label>
        </th>
        <td>
            <label>第二列：內容</label>
        </td>
    </tr>
    ...
</table>

2 屬性

全局屬性以及具體說明參見 * 屬性介紹

2.1 table屬性

2.1.1 border

指定table是否有邊框
@value string 0/1
@default 1

注意：border是內邊框，對於有邊框的table,設置子控件寬度時請考慮邊框寬度。
如table寬度設置爲了100，boder的寬度爲2，則td的子控件的總寬度應該控制在96以內，且最左側的子控件的left值至少設置爲2，否則子控件可能被邊框蓋住。

2.1.2 separator

指定table是否有水平方向的分割線及其顏色
@format #RRGGBB
注：iOS平臺與Androi平臺顯示有差異。在iOS平臺，如果設置了該屬性，則每個tr下方都會顯示分割線。在Android平臺，如果設置了該屬性，則每兩個tr之間會存在分割線，即最下方tr不會顯示分割線。

2.2 table特殊屬性

2.2.1 minscrolllimit

設置滾動視圖支持滑動的最小限制，當手指移動距離小於此值時，不認爲是滾動。
@value number 滑動最小距離限制數值（320*480標準模板下），爲0表示不處理
@default 0

注：除Android系統，其他平臺不需要處理此屬性。

2.3 tr屬性

注：

tr在設置了影響佈局的樣式或者屬性（包括：display,hide,height）後自動刷新table。
當table子控件tr全部隱藏時，客戶端將自動處理table的border爲0，即不顯示。

2.3.1 align

指定該行所有列（td/th）的子控件的水平居中方式，當td/th也定義了該屬性，td/th的優先
@value string left/right/center
@default left

2.4 delay

指定按鈕點擊的延時時間

2.4.1 enable

指定tr是否可以點擊
@value string true/false
@default true

2.5 th、td屬性

2.5.1 align

指定該列（th/td）的子控件的水平居中方式.
關於td的對齊算法參見文檔對齊算法
@value string left/right/center
@default left

2.6 delay

指定按鈕點擊的延時時間

2.6.1 enable

指定th/td是否可以點擊
@value string true/false
@default true

2.6.2 hide

th/td不支持hide

2.6.3 valign

指定該列（th/td）的子控件的垂直居中方式
關於td的對齊算法參見文檔對齊算法
@value string top/bottom/middle
@default middle

注意：當某個子控件自定義了left、right樣式來控制佈局，全部子控件align失效。同理，當某個子控件自定義了top、bottom，全部子控件valign失效。

3 樣式

全局樣式以及具體說明參見 * 樣式介紹

3.1 table、tr、th、td共同支持的樣式

注：以下字體相關的樣式將作用到table/tr/th/td的子控件上，如果子控件本身也定義了同一項樣式，則以子控件自己的爲準。相關可以參考樣式繼承。且由於這個原因，它們的字體樣式不做默認值處理。

3.1.1 background-color

設置背景色.
@format #RGB(如#FFFFFF)
@default transparent(透明)

3.1.2 background-image

設置背景圖.
@format1 url(image.png)
@format2 url(local:image.png)
@format3 url(http:// | https:// | ewp_local://)

3.1.3 color

設置字體顏色
@format #RGB(如#FF00FF)

3.1.4 filter

設置漸變背景色或者透明度.
@format1 progid(startColorStr='#FFFFFF',endColorStr='#000000',gradientType='0',alpha='0.5')
@format2 progid(alpha='0.5')

3.1.5 font-size

設置字體大小
@format 10px

3.1.6 font-style

設置字體樣式
@value normal/italic

3.1.7 font-weight

設置字體類型
@value normal/bold

3.2 table樣式

table支持所有全局樣式

3.2.1 border

設置控件邊框的樣式（寬度，線型，顏色）
@format1 25px solid #fff000
@format2 只寫以上三項的任意一項或兩項
@default 1px solid #d4d5d9

3.2.2 border-radius

設置控件四個邊的圓角屬性
@format1 25px 10px 0px 10px
@format2 10px
@default 各平臺有差異（目前均爲圓角，但角度大小不一致）

3.3 height

指定控件高度
@default 根據子控件內容計算

3.4 width

指定控件寬度
@default 根據子控件內容計算，但寬度不可超出父控件顯示範圍

3.5 tr樣式

說明：

tr不支持部分全局樣式
tr在設置了影響佈局的樣式或者屬性（包括：display,hide,height）後自動刷新table。

3.5.1 定位樣式

tr不支持設置top/left/right/bottom。
tr在table中順序排列。

3.5.2 height

tr支持設置height
@default:如果tr沒有指定height則與td的height相同

說明：tr的height總是和td的相同,當td也設置了height,取兩個中較大的一個作爲tr的height

3.5.3 position

tr不支持position

3.5.4 visibility

tr不支持visibility

3.5.5 width

tr不支持設置width,tr的width總是和table的width相同。

3.6 th、td樣式

th/td不支持部分全局樣式

3.6.1 定位樣式

td不支持設置top/left/right/bottom。
td在tr中順序排列。

3.6.2 display

th/td不支持display

3.6.3 height

td支持設置height
@default:如果tr和td均未指定height則適應子控件大小並且取同一行中最高一列的height值，如果tr指定了height則取tr的height

說明：

td的height總是和tr的相同,當tr也設置了height,取兩個中較大的一個作爲td的height
同一行的td設置了不同的height值，取最大的一個作爲這一行所有td的height
建議height樣式賦給tr,在以後的版本中我們可能會取消td會height的支持

3.6.4 position

th/td不支持position

3.6.5 visibility

th/td不支持visibility

3.6.6 width

td支持設置width
@default 根據子控件內容計算，但寬度不可超出父控件顯示範圍

說明：

最後一個td的width無效，總是佔滿tr剩餘的空間
同一列td設置了不同的width,取最大的一個作爲這一列所有td的width

4 事件

4.1 onclick

tr,th,td均支持點擊事件

5 Examples

示例代碼地址 table.xml

5.1 position

代碼片段1:css

<style>
    .father{width:300px;height:30px;left:10px;}
    .positionFixed{position:fixed;filter:progid(alpha='0.5');background-color:##E0FFFF;}
    .positionToplevel{position:toplevel;top:50px;filter:progid(alpha='0.5');background-color:#E0FFFF;}
    ...
</style>

代碼片段2:頁面

<body>
    <!-- positon:fixed ，這是body的第一個控件 -->
    <table class='father,positionFixed'>
        <tr>
            <td>
                <label>positionFixed Table</label>
            </td>
        </tr>
    </table>
    <!-- positon:toplevel -->
    <div class='father,positionToplevel'>
        <label>我在透明的div中，div有:positionToplevel</label>
    </div>
    ...
    <!-- positon:fixed ，這是body的最後一個控件-->
    <table class='father,positionFixed'>
        <tr>
            <td>
                <label>positionFixed</label>
            </td>
        </tr>
    </table>
<body>

效果圖:

5.2 separator

代碼片段1:css

<style>
    .father_free{width:300px;left:10px;}
    .color_tr{background-color:#8DEEEE;}
    ...
</style>

代碼片段2:頁面

<body>
    <b>測試separator</b><br/>
    <label>分割線顏色：#fff000</label>
    <table class="father_free" separator="#fff000">
        <tr class="color_tr">
            <td ><label>第1行第1列</label></td>
            <td ><label>第1行第2列</label></td>
        </tr>
        <tr class="color_tr">
            <td ><label>第2行第1列</label></td>
            <td ><label>第2行第2列</label></td>
        </tr>
        <tr class="color_tr">
            <td ><label>第3行第1列</label></td>
            <td ><label>第3行第2列</label></td>
        </tr>
    </table>

    <label>分割線顏色：#BDBDBD</label>
    <table class="father_free" separator="#BDBDBD">
        <tr >
            <td ><label>第1行第1列</label></td>
            <td ><label>第1行第2列</label></td>
        </tr>
        <tr >
            <td ><label>第2行第1列</label></td>
            <td ><label>第2行第2列</label></td>
        </tr>
        <tr >
            <td ><label>第3行第1列</label></td>
            <td ><label>第3行第2列</label></td>
        </tr>
    </table>
    ...
<body>

效果圖:

5.3 align&valign

代碼片段1:css

<style>
    .father_free{width:300px;left:10px;}
    .td1{width:100px;height:50px;background-color:#00FFFF;}
    .td2{width:100px;height:50px;background-color:#CAFF70;}
    .td3{width:100px;height:50px;background-color:#DDA0DD;}
    ...
</style>

代碼片段2:頁面

<body>
    <b>測試tr/th/td對align/valign的支持</b><br/>

    <table class="father_free" border="0">
        <tr align="left">
            <td class="td1" >
                <label>tr:align=left</label>
            </td>
            <td class="td2" align="center">
                <label>td:align=center</label>
            </td>
            <td class="td3" align="right">
                <label>td:align=right</label>
            </td>
        </tr>
        <tr align="center">
            <td class="td2" >
                <label>tr:align=center</label>
            </td>
            <td class="td3" align="left">
                <label>td:align=left</label>
            </td>
            <td class="td1" align="right">
                <label>td:align=right</label>
            </td>
        </tr>
        <tr align="right">
            <td class="td3">
                <label>tr:align=right</label>
            </td>
            <td class="td1" align="left">
                <label>td:align=left</label>
            </td>
            <td class="td2" align="center">
                <label>td:align=center</label>
            </td>
        </tr>
        <tr>
            <td class="td1" valign="top">
                <label>td:valign=top</label>
            </td>
            <td class="td2" valign="middle">
                <label>td:valign=middle</label>
            </td>
            <td class="td3" valign="bottom">
                <label>td:valign=bottom</label>
            </td>
        </tr>
    </table>
<body>

效果圖:

5.4 hide&display&visibility

代碼片段1:css

<style>
    .father{width:300px;height:30px;left:10px;}
    .display1{display:none;}
    .display2{display:block;}
    .visibility1{visibility:visible;}
    .visibility2{visibility:hidden;}
    ...
</style>

代碼片段2:頁面

<body>
    <b>測試table對hide/display/visibility的支持</b><br/>

    <!-- hide -->
    <label>下面的table有:hide=false</label><br/>
    <table class='father' hide="false">
        <tr>
            <td>
                <label>我在table中</label>
            </td>
        </tr>
    </table>
    <label>下面的table有:hide=true</label><br/>
    <table class='father' hide="true">
        <tr>
            <td>
                <label>我在table中</label>
            </td>
        </tr>
    </table>

    <!-- diaplay -->
    <label>下面的table有:display=block</label><br/>
    <table class='father,display2' >
        <tr>
            <td>
                <label>我在table中</label>
            </td>
        </tr>
    </table>
    <label>下面的table有:display=none</label><br/>
    <table class='father,display1' >  
        <tr>
            <td>
                <label>我在table中</label>
            </td>
        </tr>
    </table>

    <!-- visibility -->
    <label>下面的table有:visibility=hidden</label><br/>
    <table class='father,visibility2' >
        <tr>
            <td>
                <label>我在table中</label>
            </td>
        </tr>
    </table>
    <label>下面的table有:visibility=visible</label><br/>
    <table class='father,visibility1' >  
        <tr>
            <td>
                <label>我在table中</label>
            </td>
        </tr>
    </table>

    <b>測試tr對hide/display的支持:第二行和第四行被隱藏</b><br/>
    <table class='father_free'>
        <tr hide="false" >
            <td>
                <label>第1行:hide=false,下面一行hide=true</label>
            </td>
        </tr>
        <tr hide="true">
            <td>
                <label>第2行:hide=true</label>
            </td>
        </tr>
        <tr class="display2">
            <td>
                <label>第3行:display=block,下面一行display=none</label>
            </td>
        </tr>
        <tr class="display1" >
            <td>
                <label>第4行:display=none</label>
            </td>
        </tr>
    </table>

<body>

效果圖:

5.5 enable&onclick

代碼片段1:css

<style>
    .father_free{width:300px;left:10px;}
    .tr1{height:20px;background-color:#00FFFF;}
    .tr2{height:20px;background-color:#DDA0DD;}
    ...
</style>

代碼片段2:lua

function click(arg)
    local info="可以點擊，info:"..arg;
    window:alert(info);
end;

代碼片段3:頁面

<body>
    <!-- enable and onclick事件 -->
    <b>測試tr對onclick/enable的支持</b><br/>
    <table class='father_free' border="0">
        <tr class="tr1" onclick="click('tr')" enable="true">
            <td>
                <label>點擊這裏-tr:enable=true</label>
            </td>
        </tr>
        <tr class="tr2" onclick="click('tr')" enable="false">
            <td>
                <label>點擊這裏-tr:enable=false</label>
            </td>
        </tr>
        <tr class="tr1" >
            <td  onclick="click('td')" enable="true">
                <label>點擊這裏-td:enable=true</label>
            </td>
        </tr>
        <tr class="tr2" >
            <td onclick="click('td')" enable="false">
                <label>點擊這裏-td:enable=false</label>
            </td>
        </tr>
        <tr class="tr1" onclick="click('tr')" enable="true">
            <td  onclick="click('td')" enable="false">
                <label>點擊這裏-td:enable=false,tr:enable=true</label>
            </td>
        </tr>
        <tr class="tr2" onclick="click('tr')" enable="false">
            <td onclick="click('td')" enable="true">
                <label>點擊這裏-td:enable=true,tr:enable=false</label>
            </td>
        </tr>
    </table>
<body>

效果圖:

5.6 border屬性

代碼片段1:css

<style>
    .father{width:300px;height:30px;left:10px;}
    .border{border:3px solid #00ff00}
    .background_color {background-color:#FFFF00;}
    .background_image {background-image:url(a.png);}
    ...
</style>

代碼片段2:頁面

<body>
    <!--table對border的支持 -->
    <b>測試table對border屬性的支持</b><br/>
    <table class='father'>
        <tr>
            <td>
                <label>table沒有指定border=?默認爲1</label>  
            </td>
        </tr>
    </table>
    <table class='father' border="0">
        <tr>
            <td>
                <label>table指定border=0</label>
            </td>
        </tr>
    </table>
    <table class='father' border="1">
        <tr>
            <td>
                <label>table指定border=1</label>
            </td>
        </tr>
    </table>
    <table class='father,background_color' border="1">
        <tr>
            <td>
                <label>table有:background-color,border=1</label>
            </td>
        </tr>
    </table>
    <table class='father,background_image' border="1">
        <tr>
            <td>
                <label>table有:background-image,border=1</label>
            </td>
        </tr>
    </table>
    ......
<body>

效果圖:

5.7 border樣式

代碼片段1:css

<style>
    .father{width:300px;height:30px;left:10px;}
    .border{border:3px solid #00ff00}
    .background_color {background-color:#FFFF00;}
    .background_image {background-image:url(a.png);}
    ...
</style>

代碼片段2:頁面

<body>
    <!--table對border的支持 -->
    <b>測試table對border樣式的支持</b><br/>
    <table class='father,border' border="0">  
        <tr>
            <td>
                <label class="has_border">table有:border=0,border樣式不起作用</label>
            </td>
        </tr>
    </table>
    <table class='father,border' border="1">  
        <tr>
            <td>
                <label class="has_border">table有:border:3px solid #00ff00</label>
            </td>
        </tr>
    </table>
    <table class='father,background_color,border'>
        <tr>
            <td>
                <label class="has_border">table有:background-color,border:3px solid #00ff00</label>
            </td>
        </tr>
    </table>
    <table class='father,background_image,border'>
        <tr>
            <td>
                <label class="has_border">table有:background-image,border:3px solid #00ff00</label>
            </td>
        </tr>
    </table>
    ......
<body>

效果圖:

5.8 border-radius

代碼片段1:css

<style>
    .father{width:300px;height:30px;left:10px;}
    .border{border:3px solid #00ff00}
    .background_color {background-color:#FFFF00;}
    .background_image {background-image:url(a.png);}
    .borderRadiusFour{border-radius: 0px 5px 10px 15px;}
    .borderRadiusOne{border-radius:10px;}
    ...
</style>

代碼片段2:頁面

<body>
    <b>測試table對border-radius的支持</b><br/>

    <table class='father,borderRadiusOne,background_color' border="0">
        <tr>
            <td>
                <label>table有:border=0,border-radius不起作用</label>
            </td>
        </tr>
    </table>

    <table class='father,borderRadiusOne'>
        <tr>
            <td>
                <label>table有:border=1和border-radius:10</label>
            </td>
        </tr>
    </table>
    <table class='father,borderRadiusOne,background_color'>
        <tr>
            <td>
                <label>table有:border-radius:10,background-color</label>
            </td>
        </tr>
    </table>
    <table class='father,borderRadiusOne,background_image'>
        <tr>
            <td>
                <label>table有:border-radius:10,background-image</label>
            </td>
        </tr>
    </table>

    <table class='father,borderRadiusFour'>
        <tr>
            <td>
                <label>table有:border-radius:0 10 15 20</label>
            </td>
        </tr>
    </table>
    <table class='father,borderRadiusFour,background_color'>
        <tr>
            <td>
                <label>table有:border-radius:0 10 15 20,background-color</label>
            </td>
        </tr>
    </table>
    <table class='father,borderRadiusFour,background_image'>
        <tr>
            <td>
                <label>table有:border-radius:0 5 10 15,background-image</label>
            </td>
        </tr>
    </table>
    ......
<body>

效果圖:

5.9 background-color&background-image&filter

代碼片段1:css

<style>
    .father{width:300px;height:30px;left:10px;}
    .father_free{width:300px;left:10px;}
    .background_color {background-color:#FFFF00;}
    .background_image {background-image:url(a.png);}
    .filter1 {filter:progid(startColorStr='#FFFF00',endColorStr='#ff0000',gradientType='1',alpha='0.5');}
    .filter2 {filter:progid(alpha='0.5'); background-color: #FFFF00;}
    ...
</style>

代碼片段2:頁面

<body>
    <!-- filter/background-color/background-image-->
    <b>測試table,tr,td對filter/background-color/background-image的支持</b><br/>
    <!-- filter -->
    <table class='father,filter1' >
        <tr>
            <td>
                <label>table:has filter漸變</label>
            </td>
        </tr>
    </table>
    <table class='father,filter2' >
        <tr>
            <td>
                <label>table:has filter透明度</label>
            </td>
        </tr>
    </table>
    <!-- background-color -->
    <table class='father,background_color' >
        <tr>
            <td>
                <label>table:has background-color</label>
            </td>
        </tr>
    </table>
    <!-- background-image -->
    <table class='father,background_image' >
        <tr>
            <td>
                <label>table:has background-image</label>
            </td>
        </tr>
    </table>

    <!--tr-->
    <table class='father_free'>
        <tr class="filter1">
            <td>
                <label>tr:has filter漸變色</label>
            </td>
        </tr>
        <tr class="filter2">
            <td>
                <label>tr:has filter透明度</label>
            </td>
        </tr>
        <tr class="background_color">
            <td>
                <label>tr:has background-color</label>
            </td>
        </tr>
        <tr class="background_image">
            <td>
                <label>tr:has background-image</label>
            </td>
        </tr>
    </table>

    <!--td-->
    <table class='father_free'>
        <tr>
            <td class="filter1">
                <label>td:has filter漸變色</label>
            </td>
        </tr>
        <tr>
            <td  class="filter2">
                <label>td:has filter透明度</label>
            </td>
        </tr>
        <tr>
            <td  class="background_color">
                <label>td:has background-color</label>
            </td>
        </tr>
        <tr>
            <td class="background_image">
                <label>td:has background-image</label>
            </td>
        </tr>
    </table>
<body>

效果圖:

5.10 font系列

代碼片段1:css

<style>
    .father_free{width:300px;left:10px;}
    .textColor {color:#ff0000;}
    .fontWeight{font-weight:bold;}
    .fontSize{font-size:25px;}
    .fontStyle{font-style:italic;}
    ...
</style>

代碼片段2:頁面

<body>
    <!-- color/font-size/font-wight/font-style-->
    <b>測試table對color/font-size/font-wight/font-style的支持</b><br/>
    <!--color-->
    <table class='father_free,textColor' >
        <tr>
            <td>
                <input type="button" value="in table:textColor" />
            </td>
        </tr>
    </table>
    <!--fontSize-->
    <table class='father_free,fontSize' >
        <tr>
            <td>
                <input type="button" value="in table:fontSize=25" />
            </td>
        </tr>
    </table>
    <!--fontWeight-->
    <table class='father_free,fontWeight' >
        <tr>
            <td>
                <input type="button" value="in table:fontWeight" />
            </td>
        </tr>
    </table>
    <!--fontStyle-->
    <table class='father_free,fontStyle' >
        <tr>
            <td>
                <input type="button" value="in table:fontStyle" />
            </td>
        </tr>
    </table>
    <b>測試tr對color/font-size/font-wight/font-style的支持</b><br/>
    <!--tr-->
    <table class='father_free'>
        <tr class="textColor">
            <td>
                <input type="button" value="in tr:textColor" />
            </td>
        </tr>
        <tr class="fontSize">
            <td>
                <input type="button" value="in tr:fontSize=25" />
            </td>
        </tr>
        <tr class="fontWeight">
            <td>
                <input type="button" value="in tr:fontWeight" />
            </td>
        </tr>
        <tr class="fontStyle">
            <td>
                <input type="button" value="in tr:fontStyle" />
            </td>
        </tr>
    </table>
    <b>測試td對color/font-size/font-wight/font-style的支持</b><br/>
    <!--td-->
    <table class='father_free'>
        <tr>
            <td class="textColor">
                <input type="button" value="in td:textColor" />
            </td>
        </tr>
        <tr>
            <td  class="fontSize">
                <input type="button" value="in td:fontSize=25" />
            </td>
        </tr>
        <tr>
            <td  class="fontWeight">
                <input type="button" value="in td:fontWeight" />
            </td>
        </tr>
        <tr>
            <td class="fontStyle">
                <input type="button" value="in td:fontStyle" />
            </td>
        </tr>
    </table>
    ......
<body>

效果圖:

5.11 佈局相關

代碼片段1:css

<style>
    .father_free{width:300px;left:10px;}
    .td_line{width:2px;background-color:#000000;}
    .tr_line{height:1px;background-color:#000000;}
    .tr_width_260{width:260px;}
    .td_width_200{width:200px;}
    .td_width_50{width:50px;}
    .td_width_99{width:99px;}
    .tr_height_60{height:60px;}
    .tr_height_20{height:20px;}
    .td_height_40{height:40px;}
    .color_table{background-color:#BBBBBB;}
    .color_tr{background-color:#8DEEEE;}
    .color_tr2{background-color:#8DEEEE;filter:progid(alpha='0.2');}
    .color_td{background-color:#DDCCDD;}
    .color_td2{background-color:#DDCCDD;filter:progid(alpha='0.5');}
    ...
</style>

代碼片段2:頁面

<body>
    <!--table佈局相關測試-->
    <b>table佈局相關測試,tr背景淡藍色,td背景淡紫色,table背景灰色,分割線黑色</b><br/>

    <!-- width -->
    <b>table:width=300,no-height;測試tr/td寬</b>
    <table class='father_free,color_table' >
        <tr class="tr_width_260,color_tr">
            <td class="td_width_200,color_td">
                <label>tr-width=260(無效),td-width=200(有效)</label>
            </td>
            <td class="td_line">
            </td>
            <td class="td_width_50,color_td">
                <label>td-width=50(無效,佔滿剩餘空間)</label>
            </td>
        </tr>
        <tr class="tr_line">
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="color_tr">
            <td class="td_width_99,color_td">
                <label>td-width=99(無效,取第一列最大值)</label>
            </td>
            <td class="td_line">
            </td>
            <td class="color_td">
                <label>td-no-width</label>
            </td>
        </tr>
        <tr class="tr_line">
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="color_tr">
            <td class="color_td">
                <label>td-no-width</label>
            </td>
            <td class="td_line">
            </td>
            <td class="color_td">
                <label>td-no-width</label>
            </td>
        </tr>
    </table>

    <!-- height -->
    <b>table:width=300,no-height;測試tr/td高</b>
    <table class='father_free,color_table' >
        <tr class="tr_height_60,color_tr" >
            <td class="td_height_40,color_td">
                <label>tr-height=60,td-height=40(應取tr的60)</label>
            </td>
        </tr>
        <tr class="tr_line">
            <td></td>
        </tr>
        <tr class="tr_height_20,color_tr">
            <td class="td_height_40,color_td">
                <label>tr-height=20(應取td的40),td-height=40</label>
            </td>
        </tr>
        <tr class="tr_line">
            <td></td>
        </tr>
        <tr class="tr_height_20,color_tr">
            <td class="color_td">
                <label>tr-height=20,td-no-height(應取tr的20)</label>
            </td>
        </tr>
        <tr class="tr_line">
            <td></td>
        </tr>
        <tr class="color_tr">
            <td class="td_height_40,color_td">
                <label>tr-no-height(應取td的40),td-height=40</label>
            </td>
        </tr>
        <tr class="tr_line">
            <td></td>
        </tr>
        <tr class="color_tr">
            <td class="color_td">
                <label>tr-no height,td-no height</label>
            </td>
        </tr>
    </table>

    <b>table/tr/td均未設置寬高</b><br/>
    <table>
        <tr class="color_tr">
            <td class="color_td"><label>第1行第1列</label></td>
            <td class="color_td2"><label>第1行第2列</label></td>
            <td class="color_td"><label>第1行第3列</label></td>
        </tr>
        <tr class="color_tr2">
            <td class="color_td"><label>第2行第1列</label></td>
            <td class="color_td2"><label>第2行第2列</label></td>
            <td class="color_td"><label>第2行第3列</label></td>
        </tr>
        <tr class="color_tr">
            <td class="color_td"><label>第3行第1列</label></td>
            <td class="color_td2"><label>第3行第2列</label></td>
            <td class="color_td"><label>第3行第3列</label></td>
        </tr>
    </table>
<body>

效果圖:

Webview

1 功能說明

Webview控件被用來展現網頁的視圖，它是由div標籤加type="webview"屬性擴展實現的。當指定其url屬性時，webview顯示對應鏈接的網頁視圖；另外,可以通過lua接口（參見Lua接口setInnerHtml）設置webview的內容。

webview控件默認的大小爲填充滿父控件，但需要保留父控件的邊距。如果樣式指定大小，應用樣式中的大小。

例：<div type="webview" url="http://www.baidu.com"></div>

2 屬性

2.1 gooffline

表明加載網頁時，是否走本地離線資源。
@value string true/false
@default false

注：

當gooffline屬性值爲非法值時，按照默認值處理。
iOS系統限制，使用該屬性時，url屬性必須爲以/開頭的相對路徑地址，否則該屬性會失效，直接去遠程服務器加載。

2.2 url

指定webview控件顯示的網頁的鏈接地址。
@value string 鏈接地址

以/開頭的，需要拼接ewp服務器地址，並作爲最終的url加載；
以local:開頭的，客戶端讀取對應本地資源文件加載，並將上級目錄作爲webview的baseurl。如：local:ebank/html/test.html，baseurl爲ebank/html;
其餘格式url直接加載。

2.3 注：webview在android平臺不支持`enable="false"`,並且這麼做也無意義。

3 Examples

示例Webview.xml

運行效果圖:

EMP界面開發規範（3）

Checkbox

1 功能說明

2 屬性

2.1 checked

2.2 enable

2.3 linebreakmode

2.4 numlines

2.5 shadowcolor

2.6 shadowoffset

2.7 text

2.8 valign

2.9 align

2.10 value

3 樣式

3.1 background-color

3.2 background-image

3.3 color

3.4 filter

3.5 font-size

3.6 font-style

3.7 font-weight

3.8 height

3.9 width

4 事件

4.1 onclick

5 Examples

5.1 position

5.2 display&visibility&hide

5.3 background-color&background-image&filter

5.4 color&font-weight&font-style&font-size

5.5 enable&checked

5.6 value&text

5.7 numlines & linebreakmode

5.8 valign

5.9 shadowcolor & shadowoffset

Hidden

1 功能說明

2 屬性

3 Examples

3.1 value

Password

1 功能說明

2 屬性

2.1 border

2.2 enable

2.3 encryptmode

2.4 hold

2.5 isorder

2.6 substitute

2.7 value

3 樣式

3.1 background-color

3.2 background-image

3.3 border

3.4 border-radius

3.5 filter

3.6 font-size

3.7 height

3.8 text-align

3.9 width

4 事件

4.1 onfocus

4.2 onblur

4.3 onchange

5 Examples

5.1 position

5.2 display&visibility&hide

5.3 background-color&background-image&filter

5.4 font-size&text-align

5.5 border

5.6 border-radius

5.7 hold&enable

5.8 onfocus&onchange&onblur事件測試

5.9 substitute

5.10 isorder

Radio

1 功能說明

2 屬性

2.1 checked