EMP界面開發規範

FAQ

• 有關邊框的說明
  • Android平臺的特殊說明

1 有關邊框的說明

產品中採用的邊框繪製方案爲內邊框，即當父控件與子控件含有同樣大小時，父控件的邊框會遮擋子控件部分內容。

.style {width:100px;height:50px;}

<div class="style" border="1">
    <input type="button" class="style" value="test" />
</div>

如上述報文所示，父控件div和子控件button還有同樣的寬高，父div含有邊框，就寬度而言，父div的邊框會佔用其內部2px的內容，這樣子button就會在左右兩邊各被遮擋1px；如果父div含有border樣式，設定邊框寬度爲10px，那麼子button就會在左右兩邊各被遮擋10px；

因此建議在寫頁面報文時，如果不希望出現子控件被父控件邊框遮擋的情況，就從樣式上調整控件位置，給子控件加上left、top等樣式，避免遮擋。如上例報文可改成：

.style_div {width:100px;height:50px;}
.style_button {width:98px;height:48px;left:1px;top:1px;}

<div class="style_div" border="1">
    <input type="button" class="style_button" value="test" />
</div>

1.1 Android平臺的特殊說明

由於Android系統本身不支持控件邊框，Android平臺的邊框都是通過給父控件背景繪製線框實現的。雖然產品做過特殊處理，但由於系統限制，在以下情況中，依舊會出現邊框顯示異常的問題：

1. button控件文字較多，和邊框重疊時，文字會遮擋邊框；
2. 父容器控件含有圓角邊框，且子控件存在背景色，且佈局位置緊貼父控件四個角，會出現子控件超出父控件邊框的圓角範圍的情況；
3. table含有圓角邊框，子tr或td含有背景色，table四個角上會出現子控件超出父table邊框圓角範圍的情況；

若遇到上述情況，建議通過修改控件樣式規避。

CSS

• 全局樣式
  • bottom
  • display
  • height
  • left
  • position
  • right
  • top
  • width
• 其他樣式
  • background-color
  • background-image
  • border
  • border-radius
    • 邊框圓角弧度的算法
  • color
  • font-size
  • font-style
  • font-weight
  • filter
  • inline-block
  • margin-top
  • text-align
  • visibility
• 樣式的定義
  • 元素選擇器
  • 類選擇器
  • 僞類
• 樣式合併
• 外部的樣式
• 樣式替換
• 樣式的繼承

1 全局樣式

1.1 bottom

指定控件下邊界Y座標，此座標相對於父控件。top、bottom爲互斥的樣式，針對同一個控件不能同時指定top和bottom。
@value 10px 樣式值必須指明單位px
@see top

1.2 display

指定控件的可視狀態。
@value none/block
當值爲none時，表示控件不可見，且不佔位，即不參與佈局計算。
當值爲block時，表示控件可見。
@default block

注：通常控件的顯示和隱藏都會導致頁面佈局的變化，因此當控件的可視屬性變化時，需要通過頁面刷新功能將頁面重新佈局。當然如果通過樣式將控件座標都控制在恰當的位置，而控件的顯示與隱藏不會操作頁面顯示錯誤的話，則不需要重新佈局。
如果在一次操作中，改變了多個控件的display樣式，建議在所有的樣式設置結束後再reload頁面。

@see location:reload()

同時hide屬性也可以控制控件的隱藏與顯示，與display功能相同。當同一個控件同時設置了display與hide時，hide屬性將失效。
當與visibility樣式同時出現，visibility覆蓋display樣式，display不起作用

1.3 height

指定控件高度
@value 10px 樣式值必須指明單位px
@see width

1.4 left

指定控件左側X座標，此座標相對於父控件。left、right爲互斥的樣式，針對同一個控件不能同時指定left和right。
@value 10px 樣式值必須指明單位px
@see right

1.5 position

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

fixed
當值爲fixed時，表示控件位置固定，不會跟隨頁面滑動而動。此值僅對body的第一個和最後一個控件起作用。當此樣式值作用於第一個控件時，該控件會自動的置於頁面最上端。當此樣式值作用於最後一個控件時，該控件被置於頁面的最低端。這種情況下樣式中的top、bottom是不起作用的，但是left和right樣式依然起作用。
同時被設置爲fixed的控件相當於block元素，會獨佔一行顯示。

static
當值爲static時，控件爲正常顯示，不做特殊處理

toplevel
當值爲toplevel時，控件將被固定在頁面上指定的位置，且不會跟隨頁面滑動而移動。使用此值時需要制定控件的top、left座標，否則將會默認顯示在左上角。top、left值相對於body左上角。 注：toplevel的控件不參與佈局算法。

注:toplevel控件與fixed控件重疊時, toplevel控件遮擋fixed控件.即toplevel控件在最上層.

1.6 right

指定控件右側X座標，此作爲相對於父控件。left、right爲互斥的樣式，針對同一個控件不能同時指定left和right。
注: 如果控件設置right值,則同時需要設置其父控件的width.left,right 樣式 @value 10px 樣式值必須指明單位px
@see left

1.7 top

指定控件上邊界Y座標，此座標相對於父控件。top、bottom爲互斥的樣式，針對同一個控件不能同時指定top和bottom。
@value 10px 樣式值必須指明單位px
@see bottom

1.8 width

指定控件寬度
@value 10px 樣式值必須指明單位px
@see height

2 其他樣式

2.1 background-color

指定控件背景色，如div背景色。支持色值格式#RGB(#RRGGBB);
@value #RRGGBB

注:

• 當控件有邊框時，背景色/背景圖/漸變背景色的邊界不能超出邊框的範圍。
• 對於同一個控件，背景色、背景圖、漸變色只需要設置其中一種。當設置多個時，會以背景色、漸變色、背景圖的順序依次覆蓋前者。

2.2 background-image

指定控件背景圖
@value url(imageurl)

支持三種格式:

1. url(image.png)
2. url(local:image.png)
3. url(http:// | https:// | ewp_local://)

1和2表示從客戶端本地獲取圖片，使用圖片路徑*.png或者前面有local指示，例如：local:*.png。

圖片獲取優先級爲:插件資源 > 離線下載資源 > 預置資源 > file：write寫出的資源 > 安裝包資源。

3的格式爲從服務器請求圖片。客戶端通過請求EWP的/map/get_pic接口，將url中的內容上傳服務器，由服務器返回遠程圖片。

注:

• 當控件有邊框時，背景色/背景圖/漸變背景色的邊界不能超出邊框的範圍。
• 對於同一個控件，靜態設置時，背景色、背景圖、漸變色只需要設置其中一種。當設置多個時，會以背景色、漸變色、背景圖的順序依次覆蓋前者。但這三個樣式屬於互斥樣式，通過lua動態設置時，後設置的生效。
• 圖片文件不存在時，控件背景圖顯示空。通過lua設置時，已存在的背景也需要被覆蓋.

2.3 border

指定控件的邊框樣式
可以按順序設置如下樣式效果：
border-width 指定邊線的寬度，如10px;默認值爲1px;
border-style 指定邊線的類型，目前僅支持solid;
border-color 指定邊線的顏色，格式#FF0000;
如果不設置其中的某個值，也不會出問題，比如 border:solid #ff0000; 也是允許的。

例: border: 10px solid #FF0000;

2.4 border-radius

設置控件四個邊的圓角半徑。border-radius與border樣式一樣類似，會受到border屬性控制，當border='0'時，border-radius不顯示。
格式:border-radius: 25px 10px 0px 10px
四個圓角半徑的值順序爲：top_left、top-right、bottom-right、bottom-left。
如果要四個角的圓角值相同，可以用一個值表示。
如果要讓四個角圓角弧度不一樣，需要按順序寫出四個值。

例1: border-radius: 25px 10px 0px 10px; 分別指定四個圓角值
例2: border-radius :25px; 指定四個圓角值相同

目前客戶端只需要支持例子的兩種寫法。

2.4.1 邊框圓角弧度的算法

首先邊框寬度的算法，邊框寬度由border樣式指定，但由於我們的邊框是內邊框，因此左右兩條邊框不得大於控件寬度的一半，上下兩條邊框不得大於控件高度的一半。

borderWidthLeft = Math.min(控件寬度 / 2, 邊框樣式寬);
borderWidthRight = Math.min(控件寬度 / 2, 邊框樣式寬);
borderWidthTop = Math.min(控件高度 / 2, 邊框樣式高);
borderWidthBottom = Math.min(控件高度 / 2, 邊框樣式高);

接着是邊框圓角的計算方法，以左上角爲例。
先計算圓角支持的最大半徑，最大值不可超過控件寬高的一半，X軸、Y軸可分開計算（即最終畫出來的弧度不一定是圓的一部分，而是橢圓的一部分）：

mMaxRadiusX = 控件寬度 / 2 - borderWidthLeft / 2;
mMaxRadiusY = 控件高度 / 2 - borderWidthTop / 2;

然後計算實際圓角半徑：

topLeftRadiusX = Math.min(mMaxRadiusX, 左上角圓角樣式半徑);
topLeftRadiusY = Math.min(mMaxRadiusY, 左上角圓角樣式半徑);

最後繪製圓角。繪製的中心點爲，以左上爲(0,0)點，(topLeftRadiusX,topLeftRadiusY)所在的點位。根據圓角半徑是否大於邊框寬度，分情況繪製：

if (topLeftRadiusX < borderWidthLeft || topLeftRadiusY < borderWidthTop) {
    // 這種情況下，邊框會蓋住圓角，因此使用塗滿的繪製方式，如下圖1
    RectF arc1 = new RectF(0, 0, topLeftRadiusX * 2, topLeftRadiusY * 2);
    paint.setStyle(Paint.Style.FILL);
    canvas.drawArc(arc1, 180, 90, true, paint);
} else {
    // 這種情況下，邊框不會蓋住圓角，使用線的方式繪製即可，如下圖2
    RectF arc1 = new RectF(borderWidthLeft / 2, borderWidthTop / 2, topLeftRadiusX * 2 - borderWidthLeft / 2, topLeftRadiusY * 2 - borderWidthTop / 2);
    paint.setStyle(Paint.Style.STROKE);
    canvas.drawArc(arc1, 180, 90, false, paint);
}

圖1： 
圖2： 

2.5 color

控件文本顏色，如按鈕上顯示的文字顏色，支持色值格式#RGB(#RRGGBB);

2.6 font-size

指定文本的字體大小。
@value 18px

例: font-size:18px;

注意:

• 當控件高度不足以顯示一行字的時候，IOS系統是將文字垂直居中顯示，上下截斷。
• android系統是分情況處理，button爲上對齊，下邊截斷，輸入框爲下對齊，上邊截斷。

2.7 font-style

指定文本的字體樣式
@value normal/italic
normal：顯示一個標準的字體樣式。
italic：顯示一個斜體的字體樣式。（IOS7後不支持斜體）
@default normal

2.8 font-weight

指定文本是否顯示粗體文字。
@value normal/bold
@default normal

2.9 filter

指定控件的漸變背景色樣式。漸變色作爲背景色的一種特殊形式。
值格式爲filter:progid(startColorStr='#FFFFFF',endColorStr='#000000',gradientType='0',alpha='0.5')

startColorStr表示漸變色的起始顏色
endColorStr表示漸變色結束顏色
alpha表示漸變色透明度，如不指定該屬性默認爲不透明，即默認值爲1。值被約束在[0.0-1.0]範圍內，如果超過了這個範圍，其計算結果將截取到與之最相近的值。
gradientType指定漸變的方向，值爲0/1，0從上至下漸變。1從左至右漸變（如不指定該屬性默認爲從左至右漸變)

如果filter中只有alpha屬性，就代表控件整體透明度。

例1:

filter:progid(startColorStr='#FFFFFF',
endColorStr='#000000',
gradientType='0',
alpha='0.5')

例2:

filter:progid(alpha='0.5';)

例3:

filter:progid(alpha='-1';)
filter:progid(alpha='0';)
這兩個方式會出現相同的效果

注:

• 當控件有邊框時，背景色/背景圖/漸變背景色的邊界不能超出邊框的範圍。
• 對於同一個控件，靜態設置時，背景色、背景圖、漸變色只需要設置其中一種。當設置多個時，會以背景色、漸變色、背景圖的順序依次覆蓋前者。但這三個樣式屬於互斥樣式，通過lua動態設置時，後設置的生效。
• 對於不寫起始或結束顏色這種不規範的寫法，客戶端不做處理。

2.10 inline-block

指定控件是否爲塊級元素。
目前只針對<div>標籤
@value inline/block
當值爲block時，控件爲塊級元素
當值爲inline時，控件爲內聯元素
@default block

塊級元素的含義:塊級元素會獨佔一行。因此它的後一個控件也會在它的下一行顯示。

2.11 margin-top

只對柱狀圖或折線圖起作用，用於設定縱向刻度軸或橫向刻度軸的刻度間隔。??
@value 40px

2.12 text-align

指定控件中文字的對齊方式
@value left/center/right
left:表示文字左對齊
center:表示文字居中顯示
right:表示文字右對齊
@default left

2.13 visibility

指定元素是否可見。即使不可見的元素也會佔據頁面上的空間。請使用 display樣式來創建不佔據頁面空間的不可見元素。
@value visible/hidden
visible: 元素是可見的。
hidden: 元素是不可見的。
@default visible

注：當與display樣式同時出現，visibility覆蓋display樣式，display不起作用。

3 樣式的定義

格式: .css {name:value;}
.css 爲樣式名，{}中爲樣式內容。
樣式(css)支持兩種定義方式，元素標籤名和類選擇器。

3.1 元素選擇器

元素選擇器，樣式名與html某個元素名相同。表示此XHTML頁面中的同名元素都遵循該樣式。

示例：
HTML: <a href="http://www.rongyitong.com/">ryt</a>
CSS: .a {color:#ff0000;display:block; font-size:18px}

3.2 類選擇器

類選擇器，在html頁面中通過在標籤中加入屬性class='classname'來引入樣式。類選擇器優先級高於元素選擇器。

HTML: <a class="important" href="http://www.rongyitong.com/">ryt</a>
CSS: .important {color:#ffff00; font-size:20px; }

注意：* 如果一個標籤同時出現兩個選擇器作用同一標籤，類選擇器的屬性覆蓋標籤選擇器的相同的屬性。

3.3 僞類

EMP藉助html僞類的語法來實現控件的點擊等效果的樣式設置。
通過給樣式名加後綴的方式指定控件的點擊樣式或不可點擊樣式。樣式名包括元素選擇器和類選擇器。
如button:active、button.inactive。

.button:active表示點擊某button的一瞬間此Button所應用的樣式

.button:inactive表示某button的屬性enable="false"時所應用的樣式

css:
.button {background-color:#ff0000;}
.button1 {color:#00ffff;}
.button2 {width:100px;}
.button:active {background-color:#0000ff;color:#00ff00}
.button1:active {background-color:#00ff00;}

html:
<input type='button' class='button1,button2'/>

此時button的正常樣式爲button1，button2三個樣式的組合。
而button的點擊樣式爲在button正常樣式的基礎上，再應用button1.active樣式的組合。

支持僞類的控件button，a。

4 樣式合併

控件可以指定多了樣式，例: class='css1,css2'。
樣式合併將class中指定的樣式合併，生成最終的樣式。
合併的原則爲:

1. 按照元素選擇器，類選擇器的順序依次合併樣式各屬性。類選擇器優先級大於元素選擇器。
2. 當有多個類選擇器時，按照書寫順序依次合併樣式各屬性。列表中後面的樣式優先級大於前面的樣式。
3. 樣式合併時，如果有相同屬性的樣式，優先級高的樣式屬性替換優先級低的樣式屬性。
4. 當有相同名稱的選擇器時，按照書寫順序，後面的選擇器替換前面的同名選擇器

如一個控件中的class中有多個值如下：
<a class="a1,a2,a3" href="http://www.rongyitong.com/">ryt</a>
CSS: .a1 {color:#ff0000;display:block; font-size:18px;}
CSS: .a2 {color:#00ff00; font-size:19px;background-color:#cccccc;}
CSS: .a3 {color:#0000ff;display:block; font-size:20px;}
最終的樣式：
{ color:0000ff;display:block; font-size:20px; background-color:#cccccc;}
以最後一個樣式的屬性爲準，如果前面有的，而最後的類選擇器中沒有此屬性的話，需要繼承前面的樣式。

當樣式定義中既存在與標籤名同名的樣式定義，也存在對單獨控件應用的樣式，則這兩個樣式也會合並。

5 外部的樣式

樣式表可以引用外部的樣式文件，使用標準的link標籤，同時需置於head標籤中。外部的樣式文件可單獨存在，也可與style標籤可同時存在，同時不限定外部樣式文件個數。link標籤中只有兩個屬性：ref標籤文件地址，type標籤文件類型，type值目前只有"text/css"。通過ref獲取樣式文件時，需滿足一下規則：讀取文件的優先級順序爲：插件資源 > 離線下載資源 > 預置資源 > file：write寫出的資源 > 安裝包資源。

例: <link ref='login.css' type='text/css'/>

6 樣式替換

由於外部樣式的引入,導致在客戶端中存在多個樣式表. 當這些樣式表中存在同名樣式時,按照樣式的優先級順序,優先級高的樣式會替換優先級低的樣式.同樣式合併的第四條.

7 樣式的繼承

如果父節點的樣式中定義了子節點樣式沒有定義的CSS屬性，那麼該CSS屬性對子節點起作用，適用於所有子節點，包括內部嵌套的子節點。
可以繼承的樣式:font-size、font-weight、color、font-style。

說明：

.div {font-size:20px;color:#ff0000;width:100px;}
.label {color:#ffff00;}

<div>
    <label>font-size繼承自div,color使用label中定義的樣式,width不繼承</label>
</div>

上面label的最終樣式爲

{font-size:20px;color:#ffff00;}

Date	Note	Modifier
2014-11-28	CSS	lin.jitao
2015-04-08	補充僞類樣式說明	lin.jitao
2015-08-17	補充僞類樣式說明	chai.lixin
2015-09-04	text-align樣式，關於其相對於父控件的對齊算法，不符合
html標準規範，取消	zhou.changjin
2015-09-07	增加border-radius算法，調整各樣式以字母順序排列，同時增加相關樣式的引用鏈接	zhou.changjin
2015-09-17	增加背景色、背景圖、漸變色通過lua動態設置的優先級說明	zhou.changjin
2015-10-12	增加背景圖圖片文件不存在時的說明	zhou.changjin

屬性

• 全局屬性
  • class
  • hide
  • id
  • name
• 其他屬性
  • adjustsfontsize
  • align
  • autoplay
  • border
  • checked
  • clearmode
  • cornerradius
  • delay
  • enable
  • encryptmode
  • failed
  • gooffline
  • hold
  • href
  • isorder
  • istap
  • leftimg
  • leftimgmode
  • leftimgpos
  • linebreakmode
  • loading
  • loop
  • minfontsize
  • numlines
  • offtintcolor
  • ontintcolor
  • returnkeyaction
  • returnkeytype
  • rightimg
  • rightimgmode
  • rightimgpos
  • separator
  • shadowcolor
  • shadowoffset
  • showformat
  • src
  • style
  • substitute
  • thumbtintcolor
  • titleimg
  • type
  • valign
  • value
  • valueformat
  • velocity
• 事件
  • onchange
  • onclick
  • onblur
  • onfocus
• 特殊屬性
  • minscrolllimit

1 全局屬性

1.1 class

指定元素的樣式。
該屬性不能在以下元素中使用：content、head、script、style、hidden。
針對可以支持class屬性的標籤，可以指定多個樣式，用逗號分隔類名。例如：<div class="left_menu,important">。這麼做可以把若干個CSS樣式應用到同一個標籤上。

1.2 hide

指定控件的可見狀態。
@value string true/false
@default false
true 表示控件爲隱藏狀態
false表示控件爲可見狀態

與樣式中的display有相同的作用。
當同一個控件同時設置了display與hide時，hide屬性將失效。

1.3 id

指定控件的id
同一個頁面的所有控件id必須保證唯一。

1.4 name

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

可以允許不同控件使用相同name，不過如果沒有特殊的需求最好不要這樣使用。
對於有相同name的控件，通過lua的getElement系列函數可以同時獲得。
有相同name的radio控件，表示同一組，有選擇互斥效果。

2 其他屬性

2.1 adjustsfontsize

指定是否自動調整文字大小以適應顯示區域。當顯示區域不足以顯示所有文字內容時，文字自動縮小以顯示更多內容。
@value true/false
@see minfontsize

注: 此功能開啓後，當文字需要縮小時，文字字號的設置將失效。同時文字最大不超過設置的字體大小。
當未設置linebreakmode或者linebreakmode爲none時，只有numlines=1時adjustsfontsize生效。
當設置linebreakmode爲head/tail/middle/時，由numlines和minfontsize共同決定顯示效果。 在numlines指定的行數內，儘量多的顯示文字內容，並且保證字體大小不小於minfontsize指定的大小。

2.2 align

針對容器控件，指定其子控件的水平對齊方式。
目前支持此屬性的控件div、td。
@value string left/center/right
@default left

注：水平的對齊是將整個控件區域整體做對齊。

2.3 autoplay

當image控件的src爲gif圖片時，指定gif圖片是否自動播放。
@value string true/false
@default true

注：如果設置了初始化後不默認播放，即autoplay=false，那此時設置istap屬性無效，istap恆等於true，否則無法啓動gif動畫，gif將變得沒有意義。

2.4 border

指定控件是否有邊框。當border爲1時，會顯示默認邊框或根據樣式中設定的border值顯示。如果border值爲0，則不會顯示邊框。即使樣式中指定了border相關的樣式，也不會顯示邊框。
border默認寬度1px，默認顏色#d4d5d9，默認弧度10。
@value string類型 0/1
1表示有邊框
0表示無邊框
@default 實際控件的默認值參見對應控件說明文檔

2.5 checked

指定控件選項是否默認選中。
@value string checked/true/false
checked相當於true
例: checked='checked' 

支持控件：segment、switch、checkbox、radio
註釋：目前客戶端通過getPropertyByName返回此屬性的值的時候轉化爲"true"或者"false"。被選中項爲true，否則爲false。對於互斥的控件如segment、switch、radio控件，在設置checked的屬性的時候，只能設置checked/true，然後互斥的控件會自動把其他控件設置成false，並改變顯示效果。

2.6 clearmode

指定輸入框中清空按鈕顯示的方式。
@value string類型 never/editing/unlessEditing/always
never:不顯示清空按鈕
editing:編輯時顯示清空按鈕
unlessEditing:非編輯模式時顯示情況按鈕
always:一直顯示情況按鈕。
@default 爲了保持與舊版本的兼容默認值各平臺會有區別:
iOS 中默認值爲editing。
其他平臺爲:never。

2.7 cornerradius

指定控件圓角的弧度。
當前只有segment支持該屬性。
@value number 10 單位是px，但不需要寫

2.8 delay

指定按鈕點擊的延時時間，也就是兩個點擊的最小時間間隔。
@value number 單位秒。支持浮點數，value需要大於等於0 @default 0

注：異常值(<0)做0處理。

2.9 enable

指定控件是否可用，即是否響應用戶操作。
@value string true/false
@default true
true 表示接受用戶操作
false 表示不接受用戶操作

當控件enable被置爲false時，控件本身及其子控件都不再響應用戶操作。但是對其父控件不會產生影響。
對於由於父控件enable被置爲false而導致子控件無法響應的情況，子控件的enable屬性依然爲子控件本身的值，不會因爲其不可點擊而改變。

注：當enable屬性值爲非法值時,按照控件默認值處理.

2.10 encryptmode

定義當前密碼框內容的加密方式，只能用於密碼輸入框。指定加密方式後，通過submit按鈕完成form表達提交時，會自動做加密處理。
@value string 既定的加密方式

支持的加密方式:
00(不加密)
01(一次一密，使用AES加密)
A0(證書加密，加密算法RSA)
A1(先證書加密後一次一密)
以上所有結果最後都會做uri編碼。

注: 5.2版本及之前版本支持encryptMode,5.3版本更正爲encryptmode. 同時爲了兼容也支持encryptMode.我們建議使用encryptmode.

2.11 failed

指定img控件圖片加載失敗時的顯示圖片。
@value string 圖片路徑，value格式同img的src屬性
@see loading

2.12 gooffline

webview專屬屬性，見webview:goofline。

2.13 hold

文本域中的提示文字。當輸出內容時隱藏。各個平臺效果可能會略有差異。
@value string 任意字符串

2.14 href

指定鏈接的目標的URL。用於<a>標籤。
@value string url字符串

href值的類型:

1. <a href='/relative url'>頁面內容</a>: 與客戶端配置的ewp服務器地址組合成鏈接地址。請求EWP服務器，將返回的內容push到客戶端緩存中，並顯示返回內容。用戶頁面跳轉。
2. <a href='local://……'>歷史明細</a>: 當以local://開頭時則直接加載客戶端本地內容在客戶端顯示，並將內容push到客戶端緩存中。
3. <a href='http://……'>www.baidu.com</a>: 當url以http://或https://開頭時表示需要通過手機瀏覽器顯示url內容。
4. <a href='tel://8888888888'>客服電話</a>: 當url以tel://開頭則表示需要向指定號碼撥打電話。
5. <a href='sms://8888888888'>客服電話</a>: 當url以sms://開頭則表示需要向指定號碼發送短信。
6. <a href='mailto://'>客服郵件</a>: 當url以mailto://開頭則表示向指定地址發送郵件郵件。
   例：mailto://[email protected],[email protected]?subject=主題&body=內容&[email protected],[email protected]&[email protected],[email protected] mailto://後面爲收件人，多個收件人地址以","分隔;
   subject爲郵件主題;
   body爲郵件正文內容;
   cc爲抄送收件人，多個收件人地址以","分隔;
   bcc爲祕密抄送收件人，多個收件人地址以","分隔;
   其中所有參數都爲可選，客戶端應進行處理

2.15 isorder

用於密碼輸入框，指定密碼鍵盤是否按照正常的鍵盤順序顯示。
@value string true/false
@default false

2.16 istap

當image控件的src爲gif圖片時，指定是否需要支持點擊圖片暫停或播放gif動畫。
@value string true/false
@default true

注：如果設置了istap=true，那將不會響應img控件的onclick屬性。

2.17 leftimg

指定控件左側小圖標。通常針對button和inputtext控件。
@value string 圖片路徑，value格式同src屬性
@see rightimg

2.18 leftimgmode

指定輸入框中左側圖標的顯示模式。
@value string never/editing/unlessEditing/always
@default never
@see rightimgmode

2.19 leftimgpos

指定控件左側小圖標的顯示位置，目前只有button控件支持。
@value number left,right,top,width,height
@see rightimgpos

例：<input type='button' leftimg='local:a.png' leftimgpos='5,5,2,30,30' value='test'/>

注：

1. 使用時屬性各值必須按既定順序都寫，且只支持大於等於0的整數。不合規範的寫法不予處理，視作該屬性不存在；
2. 不寫該屬性時，圖片顯示效果由具體控件決定；
3. 該屬性各數值應用時需要做屏幕適配；
4. bottom由控件高度確定，因此不需要寫。若控件高度不足，可能會出現截取圖片的情況;
5. 各屬性值可參考下圖：

2.20 linebreakmode

指定文字省略模式. @value string類型 head/tail/middle/none
head:表示文字開始部分省略，用'...'代替
tail:表示文字結尾部分省略，用'...'代替
middle:表示文字中間部分省略，用'...'代替
none:不使用'...'代替文字

2.21 loading

指定img控件圖片加載過程中的加載圖片。
@value string 圖片路徑，value格式同img的src屬性
@see failed

2.22 loop

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

2.23 minfontsize

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

2.24 numlines

指定文字顯示的行數。0代表沒有行數限制。

2.25 offtintcolor

指定控件未選中狀態的顏色。
當前只有switch支持該屬性。
@format #RRGGBB(如#000000)
@default 實際控件的默認值參見對應控件說明文檔

2.26 ontintcolor

指定控件選中狀態顯示的顏色。
當前只有segment、switch支持該屬性。
@format #RRGGBB(如#000000)
@default 實際控件的默認值參見對應控件說明文檔

2.27 returnkeyaction

指定鍵盤上確定按鈕的lua事件。當鍵盤確定按鈕被點擊時觸發此事件。

2.28 returnkeytype

指定鍵盤中確定按鈕的類型，此功能僅針對ios平臺。
@value string類型 default/go/Google/join/next/route/search/send/Yahoo/done/call
類型分別對應ios鍵盤確定按鈕的幾種類型。

2.29 rightimg

指定控件右側小圖標。通常針對button和inputtext控件。
@value string 圖片路徑，value格式同src屬性
@see leftimg

2.30 rightimgmode

指定輸入框中右側圖標的顯示模式。
@value string never/editing/unlessEditing/always
@default never
@see leftimgmode

2.31 rightimgpos

指定控件右側小圖標的顯示位置，目前只有button控件支持。
@value number left,right,top,width,height
@see leftimgpos

例：<input type='button' rightimg='local:a.png' rightimgpos='5,5,2,30,30' value='test'/>

注：屬性規範說明同leftimgpos屬性。

2.32 separator

指定table控件每一行分割線顏色。格式爲#RRGGBB。
table控件默認沒有分割線。當指定separator屬性後，會在行間顯示分割線，通常爲1個像素高度，寬度爲table寬度。顏色爲separator中指定的顏色值。

格式: <table separator='#RRGGBB'></table>

2.33 shadowcolor

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

2.34 shadowoffset

指定文字陰影效果的偏移量
@value x、y方向偏移量，格式爲(x,y)
@defalut (0,-1)
@see shadowcolor

注： shadowcolor和shadowoffset組合使用。若沒有設置shadowcolor，只設置了shadowoffset，則沒有陰影效果；若沒有設置shadowoffset，只設置了shadowcolor，則有陰影效果，陰影偏移量按默認設置來。

2.35 showformat

inputtext控件爲日期輸入框時支持，指定顯示在界面中的日期格式
@value string 日期格式匹配字符串
@default 格式 yyyyMMdd

注： 5.2版本及之前版本支持showFormat，5.3版本更正爲showformat。同時爲了兼容也支持showFormat
我們建議使用showformat

2.36 src

指定image圖片的路徑。例: <img src=''>

@value string 圖片路徑

src支持三種格式的路徑:

1. 加載本地圖片：<img src='head.png'>或<img src='local:head.png'>。local:表示需要本地加載的特徵，後面跟圖片的名稱或路徑。
2. 加載遠程圖片：http://、https://、ewp_local://這三種協議都是表示加載遠程圖片。http://與https://表示該圖片資源位於第三方的服務器上； ewp_local://表示該圖片資源位於EWP服務器中。 模板可能會根據圖片尺寸或排版需要制定固定的寬或高，會以參數形式通知客戶端，例如："ewp_local://img/1.png?h=100&w=200"。客戶端將樣式中指定的width、height值通過/map/get_pic的w、h參數上傳服務器。如果樣式中沒有width、height值，則獲取src中的w、h參數作爲get_pic接口的w、h。

注:

1. 樣式中的width、height代表的是座標點。而get_pic接口中的w、h代表的是像素值。因此客戶端在上傳w、h參數時需要對樣式中的widht、height進行轉換。如iphone中的retina屏，需要根據像素與座標點的比例做配置。同時對於返回的圖片，在計算圖片大小時需要考慮像素值與座標值之間的轉換問題。
2. 同理，對於src中包含的w、h參數同樣需要做如上的適配處理。服務器返回的w、h使用標準屏320*480像素作爲基準。因此客戶端回傳的時候需要轉換成相應的分辨率值。
3. 當服務器返回的圖片的寬高小於上傳的w、h時，可以不做還原的處理。

接口方法	http://EWP/map/get_pic
HTTP請求方法	POST
描述	客戶端向服務器請求圖片資源，該資源可位於EWP中，也可位於第三方服務器上。
接口需求方	客戶端
接口提供者	EWP服務器
輸入參數（加密信道中傳輸）
url	img標籤src屬性值(需要URI編碼)
w(可選)	圖片像素寬度
h(可選)	圖片像素高度

url，w，h參數的獲取原則:

1. url:src中的內容做url編碼後，作爲url參數內容，這裏不需要刪除w、h參數，並且將整個src內容做編碼。
2. w:表示圖片的寬度，首先取樣式的width值作爲w參數值。如果樣式中沒有，則取src中的w參數。如果src中沒有w，則可以不傳w參數。
3. h:表示圖片的高度，同w的處理方式。

注:由於src參數有可能從外網服務器獲取，因此w、h參數的含義存在差異。比如w、h參數可能不代表圖片的寬高。這時需要通過樣式指定w、h的值，建議使用src明確圖片寬高。

2.37 style

文本域的輸入類型，多種類型時用;分割。
@value string 規定可以支持的類型

支持的類型如下:
-wap-input-format:'N' 表示只能輸入整數，如123、-123
-wap-input-format:'n' 表示只能輸入實數，如123、-123、125.5、-0.5
-wap-input-format:'date' 表示要求輸入日期
-wap-input-format:'phone' 表示要求輸入電話號碼
-wap-input-format:'url' 表示輸入網址, 如 https://www.baidu.com;(只有iOS支持)
-wap-input-format:'email' 表示輸入郵箱地址, 如 [email protected];(只有iOS支持)

2.38 substitute

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

2.39 thumbtintcolor

指定控件滑塊的顏色。
當前只有switch支持該屬性。
@format #RRGGBB(如#000000)
@default 實際控件的默認值參見對應控件說明文檔

2.40 titleimg

指定控件顯示的圖片。遠程圖片獲取接口和src屬性一致，但不需要考慮w、h參數。
當前只有segment支持該屬性。
@format1 local:image.png（加載本地資源，這裏兼容沒有local關鍵字的情況）
@format2 http:// | https:// | ewp_local://（加載網絡資源）

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

2.41 type

規定標籤元素的類型，如<input type='button'/>。
@value string 規定的類型

2.42 valign

針對容器控件，指定其子控件的垂直對齊方式
針對文本類控件，指定其文本的垂直對齊方式
目前支持此屬性的控件div、td、radio、checkbox。
@value string top/middle/bottom
@default 容器控件默認爲top，文本控件默認爲middle

針對容器控件：
垂直對齊只適用於單行內容。當有垂直對齊屬性時，默認認爲容器中只有一行。
當對齊方式爲top時，控件上邊與上邊距對齊。
當對齊方式爲bottom時，控件下邊與下邊距對齊。
當對齊方式爲middle時，控件相對於父控件居中對齊，同一行控件中心點在同一水平線上。

2.43 value

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

通常控件的value值與顯示的內容是不同的。 如<checkbox value='male'>男</checkbox>，這裏的男是顯示給用戶看的，而value值male則是用來上傳服務器的。
但是對於部分控件value可能有特殊的含義，如button控件的value被用來作爲按鈕上的文字顯示。

2.44 valueformat

inputtext控件爲日期輸入框時支持，指定回傳服務器的Value值日期格式
@value string 日期格式匹配字符串
@default 格式 yyyyMMdd

注： 5.2版本及之前版本支持valueFormat，5.3版本更正爲valueformat。同時爲了兼容也支持valueFormat
我們建議使用valueformat

2.45 velocity

指定跑馬燈移動的速度。屬性值代碼每秒文字移動的像素數或座標點數。
需要和loop屬性組合使用

3 事件

3.1 onchange

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

3.2 onclick

針對用戶的點擊事件，並且控件在可用狀態下，觸發此事件

3.3 onblur

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

3.4 onfocus

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

4 特殊屬性

4.1 minscrolllimit

在Android系統中，滾動視圖ScrollView和列表視圖ListView（一般用於瀑布流開發）由於都有滾動效果，在嵌套使用時會有事件衝突。需要對ListView做特殊處理，才能保證兩者的滾動效果沒問題。但在某些項目需求中，可能會希望ScrollView的滾動距離響應不那麼靈敏（比如同時響應上下滾動和水平手勢滑動的時候），若直接修改產品代碼，就會造成已有的ListView處理失效，產生兼容性問題。
爲解決此問題，這裏增加屬性minscrolllimit，表示當容器控件可以滾動時，設置滾動視圖支持滑動的最小限制，當手指移動距離小於此值時，不認爲是滾動。
目前只有body、div、table支持此屬性。
@value number 滑動最小距離限制數值（320*480標準模板下），爲0表示不處理
@default 0

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

Date	Note	Modifier
2014-11-28	屬性	lin.jitao
2015-01-14	增加separator屬性說明	lin.jitao
2015-02-02	修正src參數的處理及get_pic接口的參數處理	lin.jitao
2015-04-08	增加新的屬性	lin.jitao
2015-04-09	增加屬性titleimg、cornerradius、ontintcolor、offtintcolor、sliderColor，修改屬性valign的說明	zhou.changjin
2015-04-28	補充關於src中w、h參數對分辨率的處理方案	lin.jitao
2015-06-05	修改sliderColor名稱爲thumbColor	zhou.changjin
2015-06-05	修改thumbColor名稱爲thumbtintcolor	zhou.changjin
2015-06-06	增加shadowcolor和shadowoffset的組合關係說明	zhou.changjin
2015-06-08	完善linebreakmode和adjustFontSize說明	zhou.changjin
2015-06-08	修改linebreakmode，adjustFontSize，numlines說明	lin.jitao
2015-08-20	修改isorder默認值爲false	zhou.changjin
2015-09-07	增加id屬性，調整各屬性以字母順序排列，同時增加相關屬性的引用鏈接	zhou.changjin
2015-09-11	修改所有屬性名位小寫,不包含大寫	lin.jitao
2015-09-17	增加encryptmode支持encryptMode寫法的說明	zhou.changjin
2015-09-18	增加屬性leftimgpos、rightimgpos	zhou.changjin
2015-09-21	補充屬性showformat、valueformat說明	zhou.changjin
2015-11-12	增加屬性gooffline	zhou.changjin
2015-11-12	增加特殊屬性minscrolllimit	zhou.changjin

全局配置支持的屬性說明

• 說明
• label
  • linebreakmode
  • shadowcolor
  • shadowoffset
• link
  • linebreakmode
• button
  • delay
• img
  • loading
  • failed
• text
  • clearmode
• password
  • substitute
  • isorder
• option
  • height

1 說明

以下控件屬性的應用範圍是整個程序生命週期，即通過改配置設置的屬性，在整個程序運行過程中都會生效。
若某個控件設置了同名的標籤屬性，則針對該控件，標籤屬性效果覆蓋全局屬性效果，但其他同類型控件不受影響。
關於全局屬性的配置方式，根據平臺不同而存在差異。如iOS平臺在class.xml中配置，android平臺通過WidgetConfig類配置。具體配置方式可參考對應平臺配置說明。

2 label

2.1 linebreakmode

指定文字省略模式,當顯示區域不足以顯示所有文字時通過linebreakmode屬性設置省略的方式,並通過...代替. @value string類型 head/tail/middle/none.
head:表示文字開始部分省略,用'...'代替.
tail:表示文字結尾部分省略,用'...'代替.
middle:表示文字中間部分省略,用'...'代替.
none:不使用'...'代替文字. 默認爲none.

2.2 shadowcolor

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

2.3 shadowoffset

指定文字陰影效果的偏移量
@value x,y方向偏移量,格式爲(x,y).
@see shadowcolor

3 link

3.1 linebreakmode

指定文字省略模式,當顯示區域不足以顯示所有文字時通過linebreakmode屬性設置省略的方式,並通過...代替. @value string類型 head/tail/middle/none.
head:表示文字開始部分省略,用'...'代替.
tail:表示文字結尾部分省略,用'...'代替.
middle:表示文字中間部分省略,用'...'代替.
none:不使用'...'代替文字. 默認爲none.

4 button

4.1 delay

指定按鈕點擊的延時時間,也就是兩個點擊的最小時間間隔. @value number 單位秒. 支持浮點數,value需要大於等於0. 默認爲0.

5 img

5.1 loading

指定img控件圖片加載過程中的加載圖片.
@value string 圖片路徑,value格式同img的src屬性
@see failed

5.2 failed

指定img控件圖片加載失敗時的顯示圖片.
@value string 圖片路徑,value格式同img的src屬性
@see loading

6 text

6.1 clearmode

指定輸入框中清空按鈕顯示的方式. @value string類型 never/editing/unlessEditing/always.
never:不顯示清空按鈕
editing:編輯時顯示清空按鈕
unlessEditing:非編輯模式時顯示情況按鈕
always:一直顯示情況按鈕.
爲了保持與舊版本的兼容默認值各平臺會有區別:
iOS 中默認值爲editing.
其他平臺爲:never.

7 password

7.1 substitute

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

7.2 isorder

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

8 option

8.1 height

指定下拉列表中每行的高度. @value string 行高, 10px.

Date	Note	Modifier
2015-4-8	初稿	lin.jitao
2015-5-4	增加 option屬性height	lin.jitao
2015-9-11	修改屬性名下小寫