EMP界面开发规范-界面标签

来源：互联网发布：纳什均衡和福利最优化编辑：程序博客网时间：2024/05/22 00:26

控件支持属性和样式对照表

这里整理了控件支持的属性和样式，用于方便查阅及对照; 在各个控件的定义中有对其支持属性和样式的详细描述。

控件支持属性对照表
控件支持样式对照表
关于Lua中可以操作的样式及属性

1 控件支持属性对照表

下面的表格为具体控件对属性的支持情况：

proper属性namevaluetexttagNamehidefocusenablesrccheckedhrefdiv√----√√--√------form√----√√----------img√----√√--√√----input:button√√--√√--√------input:submit√√--√√--√------input:password√√--√√√√------input:text√√--√√√√------input:segment√√√√√--√--√--input:switch√√--√√--√--√--input:checkbox√√√√√--√--√--input:radio√√√√√--√--√--link√√√√√--√----√select√√--√√--√------select:option√√√√------------text:i√√√√√----------text:em√√√√√----------text:strong√√√√√----------text:b√√√√√----------text:label√√√√√----------table:table√----√√----------table:tr√----√√--√------table:th√----√----√------table:td√----√----√------proper属性alignvalignselectedborderseparatorloadingfaileddelaytitleimgcornerradiusdiv√√--√------------img----------√√------input:button------√------√----input:submit------√------√----input:password------√------------input:text------√------------input:segment----------------√√input:checkbox--√----------------input:radio--√----------------select------√------------select:option----√--------------table:table------√√----------table:tr√------------------table:th√√----------------table:td√√----------------其他控件--------------------proper属性leftimgrightimgleftimgmoderightimgmodeclearmodestyleholdreturnkeytypereturnkeyactionencryptmodesubstituteisorderinput:button√√--------------------input:submit√√--------------------input:password√√√√√--√----√√√input:text√√√√√√√仅ios√------其他控件------------------------proper属性numlineslinebreakmodeshadowcolorshadowoffsetontintcolorofftintcolorthumbtintcolorloopvelocityadjustsfontsizeminfontsizeinput:segment--------√------------input:switch--------√√√--------input:checkbox√√√√--------------input:radio√√√√--------------link--√------------------text:i√√√√------√√√√text:em√√√√------√√√√text:strong√√√√------√√√√text:b√√√√------√√√√text:label√√√√------√√√√其他控件----------------------

2 控件支持样式对照表

下面的表格为具体控件对样式的支持情况：

stylecolorleftrighttopbottomwidthheightfont-sizefont-weightdiv√√√√√√√√√img--√√√√√√----input:button√√√√√√√√√input:submit√√√√√√√√√input:segment--√√√√√√√√input:switch--√√√√√√----input:checkbox√√√√√√√√√input:radio√√√√√√√√√input:text√√√√√√√√√input:password--√√√√√√√--link:a√√√√√√√√√select√√√√√√√√√select:option√------------√√text:i√√√√√√√√√text:em√√√√√√√√√text:strong√√√√√√√√--text:b√√√√√√√√--text:label√√√√√√√√√table:table√√√√√√√√√table:tr√----------√√√table:td√--------√√√√table:th√--------√√√√styledisplaypositionfiltertext-alignbackground-colorbackground-imagediv√√√--√√img√√仅支持透明度------input:button√√√--√√input:submit√√√--√√input:segment√√--------input:switch√√--------input:checkbox√√√--√√input:radio√√√--√√input:text√√√√√√input:password√√√√√√link:a√√√√√--select√√√√√√select:option------√----text:i√√√√√--text:em√√√√√--text:strong√√√√√--text:b√√√√√--text:label√√√√√--table:table√√√--√√table:tr√--√--√√table:td----√--√√table:th----√--√√stylefont-styleinline-blockvisibilityborderborder-radiusdiv√√√√√img----√----input:button√--√√√input:submit√--√√√input:segment√--√----input:switch----√----input:checkbox√--√----input:radio√--√----input:text√--√√√input:password----√√√link:a√--√----select√--√√√select:option√--------text:i----√----text:em----√----text:strong√--√----text:b√--√----text:label√--√----table:table√--√√√table:tr√--------table:td√--------table:th√--------

3 关于Lua中可以操作的样式及属性

在界面标签支持的Lua接口一章中详细说明了lua对标签的操作函数,其中setStyleByName和setPropertyByName函数详细说明了Lua对控件的样式及属性的操作.

Link

功能说明
属性
- enable
- href
- linebreakmode
样式
- background-color
- color
- filter
- font-size
- font-weight
- height
- text-align
- width
伪类
- color
- background-color
- font-size
事件
- onclick
Examples
- position
- linebreakmode
- hide dispaly visibility
- color font 相关
- enable
- href onclick
- 无指定宽度
- 伪类
- 其他

1 功能说明

<a> 标签定义超链接，用于从一个页面链接到另一个页面。
<a> 元素最重要的属性是 href 属性，它指定链接的目标。

其默认外观是：

未被访问的链接带有下划线而且是蓝色的
活动链接带有下划线而且是红色的

注：

因Android平台的特殊性，无法实现活动链接带有下划线而且是红色的功能。
iOS 6.0以下系统不支持下划线功能。

示例代码：

<a href="http://www.w3school.com.cn">W3School</a>

2 属性

2.1 enable

指定控件是否可用，即是否响应用户操作
@value string true/false
true 表示接受用户操作
false 表示不接受用户操作
@default true

2.2 href

指定链接的目标的URL
@value string url字符串
@see 属性

2.3 linebreakmode

指定文字省略的模式
@value string类型 head/tail/middle/none
head：表示文字开始部分省略，用'...'代替
tail：表示文字结尾部分省略，用'...'代替
middle：表示文字中间部分省略，用'...'代替
none：不使用'...'代替文字.
@default none

3 样式

3.1 background-color

指定控件背景色

3.2 color

指定控件文本颜色

3.3 filter

指定控件的渐变色背景色样式

3.4 font-size

指定控件文本的字体大小

3.5 font-weight

指定控件文本是否加粗显示

3.6 height

指定控件高度
@default 根据文字内容计算

3.7 text-align

指定控件文字显示位置

3.8 width

指定控件宽度
@default 根据文字内容计算，但宽度不可超出父控件显示范围

4 伪类

支持:active,:inactive样式

4.1 color

按钮上文本颜色，即按钮上显示的文字颜色，支持色值格式#RGB(#FF00FF)。

4.2 background-color

指定按钮背景色。如果按钮有边框则背景色不应该超出边框的显示区域。

4.3 font-size

设置字体大小

5 事件

5.1 onclick

针对用户的点击事件,并且控件在可用状态下,触发此事件。
注：当onclick和href属性同时存在时：链接的 onclick 事件被先执行， href 属性下的动作不执行。

6 Examples

示例Link.xml

6.1 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 -->    <a class='father,positionFixed'> positon:fixed body第一个控件 </a>    ...    其他控件代码    ...    <!-- positon:toplevel -->    <a class='father,positionToplevel' > positon:toplevel 不随页面滚动 </a>    ...    其他控件代码    ...    <!-- positon:fixed -->    <a class='father,positionFixed'> positon:fixed body最后一个控件 </a></body>

效果图

说明

声明positon:fixes的样式的控件，将定位于页面顶部或底部，且不随页面滚动而滚动。且样式top或者bottom失效，但是left或者right有效。声明position:toplevel样式的控件，不随页面滚动而滚动。且定位布局有效。

6.2 linebreakmode

css样式：

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

页面布局

<body>    <!-- linebreakmode -->    <a class="father,linebreakmode" linebreakmode="head">linebreakmode="head",文字开始部分省略,用'...'代替.</a>    <a class="father,linebreakmode" linebreakmode="tail">linebreakmode="tail",文字结尾部分省略,用'...'代替.</a>    <a class="father,linebreakmode" linebreakmode="middle">linebreakmode="middle",文字中间部分省略,用'...'代替.</a>    <a class="father,linebreakmode" linebreakmode="none">linebreakmode="none",不使用'...'代替.增加文字超过一行。</a>    <a class="father,linebreakmode" numlines="1">numlines="1",linebreakmode未设置,此时在末尾省略。</a></body>

效果图

6.3 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 -->    <a hide='false' class='father' > hide=false，下方有hide=true的a控件 </a>    <a hide='true' class='father' > hide=true的a控件,不应该显示出来 </a>    <a hide='false' class='father' > hide=false，上方有hide=true的a控件 </a>    <!-- diaplay -->    <a class='father,display2' > display=block，下方有display=none的a控件 </a>    <a class='father,display1' > display=none，不应该显示出来 </a>    <a class='father,display2' > display=block，上方有display=none的a控件 </a>    <!-- visibility -->    <a class='father,visibility1' > visibility:visible 下方有visibility=hidden的a控件 </a>    <a class='father,visibility2' > visibility:hidden 不应该显示 </a>    <a class='father,visibility1' > visibility:visible 上方有visibility=hidden的a控件 </a></body>

效果图

说明

由所附截图可以看出，不论是属性hide='false'或者是样式display:none都将对控件起到隐藏的效果，且控件隐藏后不占布局。而通过visibility:hidden设置隐藏的控件隐藏后将占布局。

6.4 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 -->    <a class='father,background_color' > background-color </a>    <!-- color -->    <a class='father,textColor' > color </a>    <!-- filter -->    <a class='father,filter' > filter </a>    <!-- font-weight -->    <a class='father,fontWeight' > font-weight:bold </a>    <!-- font-style -->    <a class='father,fontStyle' > font-style:italic iOS7中文不斜体 </a>    <!-- font-size -->    <a class='father,fontSize' > font-size:30px </a>    <!-- text-align -->    <a class='father,textAlignLeft'> text-align:left </a>    <a class='father,textAlignCenter'> text-align:center </a>    <a class='father,textAlignRight'> text-align:right </a></body>

效果图

6.5 enable

css样式：

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

页面布局

<body>    <!-- enable -->    <a class="father" href="tel://4008888888" enable="true">客服电话(测试enable="true") 点击可访问</a><br/>    <a class="father" href="tel://4008888888" enable="false">客服电话(测试enable="false")</a><br/></body>

效果图

说明

当属性enable="true"时，点击会有相应。如当点击客服电话时，会根据设备的实际情况做出响应，如下图（iOS端显示效果，各平台不统一）：

6.6 href onclick

css样式：

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

页面布局

<body>    <!-- href -->    <a class="father" href="http://wap.baidu.com">wap.baidu.com 点击可访问</a><br/>    <a class="father" href="local://TEST.txt">读取本地内容 点击可访问</a><br/>    <a class="father" href="sms://8888888888">客服信息 点击可访问</a><br/>    <a class="father" href="mailto://a.bc@rytong.com">客服邮件 点击可访问</a>    <!-- onclick -->    <a class="father" onclick="click()">onclick 点击可访问</a><br/><br/></body>

效果图

说明

当指明href或者onclick属性时，点击控件会响应用户操作。比如点击客服邮件，会根据设备的实际情况做出响应，如下图（iOS端显示效果，各平台不统一）：

6.7 无指定宽度

css样式：

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

页面布局

<body>    <!-- 无指定宽度 -->    <a> 不指定控件样式的情况</a><br/>    <a> 不指定控件样式且长度超过一行显示的情况</a><br/><br/></body>

效果图

说明

当不指定a标签样式时，显示的宽度是根据a标签自身字符串计算得出的。

6.8 伪类

css样式：

<style>    .father{width:300px;height:30px;left:10px;font-size:15px;background-color:#CCCCCC;}    .a_color{color:#00ff00;}    .a_fontsize{font-size:10px;}    .a:active{background-color:#550066;}    .a_color:active{color:#0000ff;}    .a_fontsize:inactive{font-size: 15px;}</style>

页面布局

<body>    <!-- 伪类 -->    <a class="father,a_color">http://www.baidu.com/</a>    <a class="father,a_fontsize">http://www.baidu.com/</a></body>

效果图

图一：没有点击链接

图二：点击第一个链接

图三：点击第二个链接

说明

当点击第一个链接后，background-color:#550066,color:#0000ff;当点击第二个链接后,background-color:#550066,样式a_fontsize的font-size:15px, 但是因为样式a_fontsize的后缀是inactive,所以字体大小没有改变.
注：链接字体默认颜色为蓝色，点击后默认为红色。

6.9 其他

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 -->    <a class="fontWeight,fontStyle,father">bold+italic 加粗并倾斜显示</a>    <!--  hide display  -->    <a hide="true" class="father,display2">display=block hide=true 样式>属性应显示</a>    <a hide="false" class="father,display1">display=none hide=false 样式>属性不显示</a>    <a hide="true" class="father,display2">display=block hide=true 样式>属性应显示</a>    <!--  hide visibility  -->    <a hide="true" class="father,visibility1">visibility:visible hide=true 样式>属性应显示</a>    <a hide="false" class="father,visibility2">visibility:hidden hide=false 样式>属性占位不显示</a>    <a hide="true" class="father,visibility1">visibility:visible hide=true 样式>属性应显示</a>    <!--  display visibility  -->    <a class="father,display1,visibility1">visibility:visible display=none 应显示</a>    <a class="father,display2,visibility2">visibility:hidden display=block 占位不显示</a>    <a class="father,display1,visibility1">visibility:visible display=none 应显示</a></body>

效果图

说明

此测试用例主要用于测试控件支持的属性和控件支持的样式的组合测试。针对上述，我们做如下说明：

font-weight和 font-style 样式的组合使用，可以支持字体的多种形式。注：iOS6中，中文支持粗体加斜体的样式，IP平台受系统限制，中文文字设置为粗体斜体加下划线时，中文文字不会应用斜体的样式。
因为样式优先的原则，当hide属性和diaplay、visibility样式共同作用于控件时，样式将起决定作用。
我们规定，visibility样式将覆盖display样式。

DateNoteModifier2014-12-18href onclick 逻辑调整yu.jianfeng2015-01-14iOS 6.0一下不支持下划线lin.jitao2015-04-08增加属性linebreakmode,支持样式伪类lin.jitao2015-08-17增加属性linebreakmode示例，以及伪类示例liu.zhipeng2015-12-23补充默认宽高说明zhou.changjin

B & Strong

功能说明
属性
- adjustsfontsize
- linebreakmode
- loop
- minfontsize
- numlines
- shadowcolor
- shadowoffset
- velocity
样式
- background-color
- color
- filter
- font-size
- height
- text-align
- width
Examples
- position
- loop
- numlines
- linebreakmode
- velocity
- shadowcolor
- shadowoffset
- hide dispaly visibility
- color font 相关
- 其他

1 功能说明

 和  标签显示粗体文本效果。
它告诉控件将包含其中的文本以粗体字显示。

示例代码

<b>粗体字体</b><strong>粗体文字</strong>

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

指定文字省略的模式
@value string类型 head/tail/middle/none.
head:表示文字开始部分省略,用'...'代替.
tail:表示文字结尾部分省略,用'...'代替.
middle:表示文字中间部分省略,用'...'代替.
none:不使用'...'代替文字. 默认为none.

2.3 loop

指定是否以跑马灯的方式循环展示
@value true(以跑马灯方式循环展示)/false(不以跑马灯方式循环展示)

2.4 minfontsize

指定最小字号.该属性和adjustsfontsize组合使用，当adjustsfontsize为true时,文字会自动调整大小. minfontsize用来限制最小字体.以防止文字太小造成阅读障碍. @value int

2.5 numlines

指定固定文字显示的行数
@value 0(代表没有行数限制.)

2.6 shadowcolor

指定文字阴影效果的颜色
@value 格式为#RRGGBB.
@see shadowoffset

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 height

指定控件高度
@default 根据文字内容计算

3.6 text-align

指定控件文字显示位置.

3.7 width

指定控件宽度
@default 根据文字内容计算，但宽度不可超出父控件显示范围

4 Examples

示例b.xml
示例strong.xml

注：因为b标签和strong标签除了标签名，控件支持的属性、样式和显示效果一样，因此此处只针对b标签详细说明。

4.1 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 -->        <b class='father,positionFixed'> positon:fixed body第一个控件 </b>        ...        其他控件代码        ...        <!-- positon:toplevel -->        <b class='father,positionToplevel' > positon:toplevel 不随页面滚动 </b>        ...        其他控件代码        ...        <!-- positon:fixed -->        <b class='father,positionFixed'> positon:fixed body最后一个控件 </b>    </body>

效果图

说明

4.2 loop

css样式：

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

页面布局

    <body>        <!-- loop -->        <b class="father" loop="false">loop="false" 无跑马灯效果</b>        <b class="father" loop="true">loop="true" 跑马灯效果</b>    </body>

效果图

说明

声明loop="true"的属性的控件，将呈现出跑马灯效果，所附截图为跑马灯效果触发后。

4.3 numlines

css样式：

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

页面布局

    <body>        <!-- numlines -->        <b class="numberlines" numlines="3">显示三行，无法显示完整时以“...”结尾。显示三行，无法显示完整时以“...”结尾。显示三行，无法显示完整时以“...”结尾。显示三行，无法显示完整时以“...”结尾。显示三行，无法显示完整时以“...”结尾。显示三行，无法显示完整时以“...”结尾。显示三行，无法显示完整时以“...”结尾。</b>    </b>

效果图

4.4 linebreakmode

css样式：

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

页面布局

    <body>    <!-- linebreakmode -->    <b class="father,linebreakmode" linebreakmode="head">linebreakmode="head",文字开始部分省略,    用'...'代替.</b>    <b class="father,linebreakmode" linebreakmode="tail">linebreakmode="tail",文字结尾部分省略,    用'...'代替.</b>    <b class="father,linebreakmode" linebreakmode="middle">linebreakmode="middle",文字中间部分省略,    用'...'代替.</b>    <b class="father,linebreakmode" linebreakmode="none">linebreakmode="none",不使用'...'代替.    增加文字超过一行。</b>    <b class="father,linebreakmode" numlines="1">linebreakmode未设置,numlines="1",此时在末尾省略.</b>    </body>

效果图

4.5 velocity

css样式：

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

页面布局

    <body>    <!-- velocity -->    <b class="father" loop="true" velocity="5">velocity="5",指定跑马灯的移动速度为    每秒5个像素点</b>    <b class="father" loop="true" velocity="15">velocity="5",指定跑马灯的移动速度为    每秒15个像素点</b>    </body>

效果图

说明

由所附截图可以看出，属性velocity='5'的b标签中的文字，要比velocity='15'的b标签中的文字移动的速度慢。

4.6 shadowcolor

css样式：

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

页面布局

    <body>    <!-- shadowcolor -->        <b class="father,shadowcolor" >不指定文字阴影效果的颜色</b>        <b class="father,shadowcolor"shadowcolor="#FF0000">shadowcolor="#FF0000"，        指定文字阴影效果的颜色为红色</b>    </body>

效果图

说明

由所附截图可以看出下方b标签中的文字阴影效果的颜色为红色。

4.7 shadowoffset

css样式：

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

页面布局

    <body>    <!-- shadowoffset -->          <b class="father,shadowoffset" shdowOffset="(9,9)">不指定文字阴影效果的颜色</b>          <b class="father,shadowoffset" shadowcolor="#FF0000">指定文字阴影偏移量为默认</b>          <b class="father,shadowoffset" shadowcolor="#FF0000" shadowoffset="(9,0)">指定文字阴影偏移量为(9,0)</b>          <b class="father,shadowoffset" shadowcolor="#FF0000" shadowoffset="(0,9)">指定文字阴影偏移量为(0,9)</b>          <b class="father,shadowoffset" shadowcolor="#FF0000" shadowoffset="(9,9)">指定文字阴影偏移量为(9,9)</b>          <b class="father,shadowoffset" shadowcolor="#FF0000" shadowoffset="(9,15)">指定文字阴影偏移量为(9,15)</b>    </body>

效果图

说明

所附截图显示了效果,第二个b标签的文字阴影偏移量为默认.并且,偏移量x最大值不可以超过当前文字的宽度,否则出现异常; 当偏移量y超过当前字体的高度时,偏移量无效.

4.8 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 -->        <b hide='false' class='father' > hide=false，下方有hide=true的b标签 </b>        <b hide='true' class='father' > hide=true的b标签,不应该显示出来 </b>        <b hide='false' class='father' > hide=false，上方有hide=true的b标签 </b>        <!-- diaplay -->        <b class='father,display2' > display=block，下方有display=none的b标签 </b>        <b class='father,display1' > display=none，不应该显示出来 </b>        <b class='father,display2' > display=block，上方有display=none的b标签 </b>        <!-- visibility -->        <b class='father,visibility1' loop="true"> visibility:visible下方有visibility=hidden的b标签 </b>        <b class='father,visibility2' > visibility:hidden 不应该显示 </b>        <b class='father,visibility1' loop="true"> visibility:visible上方有visibility=hidden的b标签 </b>    </body>

效果图

说明

4.9 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');}            .fontSize{font-size:30px;}            .fontStyle{font-style:italic;}            .textAlignLeft{text-align:left;}            .textAlignCenter{text-align:center;}            .textAlignRight{text-align:right;}        </style>

页面布局

    <body>        <!-- background-color -->        <b class='father,background_color' > 背景色 ：background-color </b>        <!-- color -->        <b class='father,textColor' > 字体颜色：color </b>        <!-- filter -->        <b class='father,filter' > 渐变色：filter </b>        <!-- font-size -->        <b class='father,fontSize' > font-size:30px </b>        <!-- text-align -->        <b class='father,textAlignLeft'> text-align:left </b>        <b class='father,textAlignCenter'> text-align:center </b>        <b class='father,textAlignRight'> text-align:right </b>    </body>

效果图

4.10 其他

css样式：

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

页面布局

    <body>        <!-- 组合测试 -->        <!-- hide display -->        <b hide='true' class='father,display2'> display=block hide=true 样式>属性应显示 </b>        <b hide='false' class='father,display1' > display=none hide=false 样式>属性不显示 </b>        <b hide='true' class='father,display2'> display=block hide=true 样式>属性应显示 </b>        <!-- hide visibility -->        <b hide='true' class='father,visibility1'> visibility:visible hide=true 样式>属性应显示</b>        <b hide='false' class='father,visibility2' > visibility:hidden hide=false 样式>属性占位不显示 </b>        <b hide='true' class='father,visibility1'> visibility:visible hide=true 样式>属性应显示</b>        <!-- display visibility -->        <b class='father,display1,visibility1'> visibility:visible display=none 应显示</b>        <b class='father,display2,visibility2' > visibility:hidden display=block 占位不显示 </b>        <b class='father,display1,visibility1'> visibility:visible display=none 应显示</b>    </body>

效果图

说明

此测试用例主要用于测试控件支持的属性和控件支持的样式的组合测试。针对上述，我们做如下说明：

因为样式优先的原则，当hide属性和diaplay、visibility样式共同作用于控件时，样式将起决定作用。
我们规定，visibility样式将覆盖display样式。

DateNoteModifier2015-08-17增加新属性示例liu.zhipeng2015-12-23补充默认宽高说明zhou.changjin

Body

功能说明
特殊属性
- minscrolllimit
样式
- background-color
- background-image
- filter
- width
- height
Examples
- background-color
- filter-透明度
- filter-渐变色
- background-image
- body不支持设置width、height,body默认填满整个屏幕
- child_fixed

1 功能说明

body是页面的根节点。

body可以滑动（即当body的内容高度超过body的height会有滚动条）。当body有设置了position=fixed的子控件时，body可以滚动的范围为除去fixed的子控件的范围。具体参见本节示例#child_fixed

例:

<content>    <head>    ...    </head>    <body>    ...    </body></content>

2 特殊属性

2.1 minscrolllimit

设置滚动视图支持滑动的最小限制，当手指移动距离小于此值时，不认为是滚动。
@value number 滑动最小距离限制数值（320*480标准模板下），为0表示不处理
@default 0

注：除Android系统，其他平台不需要处理此属性。

3 样式

body只支持下面列出的样式

3.1 background-color

设置背景色
@format #RRGGBB(如#FFFFFF)
@default transparent(透明)

注意：如果页面并非恰好需要透明背景，请务必指定body背景样式

3.2 background-image

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

3.3 filter

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

3.4 width

body不支持设置width，body默认填满整个屏幕
可以通过getStyleByName("width")获取body宽，该值是屏幕基数宽，可在客户端配置，需要与服务器端协商一致
计算公式为：获取的宽度 = 屏幕默认基数宽

3.5 height

body不支持设置height，body默认填满整个屏幕
可以通过getStyleByName("height")获取body高，获取的body高度与屏幕基数宽和屏幕高度有关
计算公式为：获取的高度 =（屏幕基数宽 / 屏幕实际像素宽）* 屏幕实际像素高

body具体适配方式参见 * body的适配

4 Examples

示例代码地址：
body1.xml
body2.xml
body3.xml
body4.xml
body5.xml

body_fix_child.xml

4.1 background-color

代码片段1:css

<style>    .body{background-color:#000fff;}    .close_but{bottom:10px;width:310px;height:30px;left:5px;font-size:20px;color:#000000;background-color:#ffff00;}</style>

代码片段2:页面

<body>    <!-- 关闭按钮 -->    <input type="button" border="1" class="close_but" value="关闭" onclick="close()"/></body>

效果图:

4.2 filter-透明度

代码片段1:css

<style>    .body {filter:progid(alpha='0.5'); background-color: #FFFF00;}    .close_but {bottom:10px;width:310px;height:30px;left:5px;font-size:20px;color:#000000;background-color:#ffff00;}</style>

代码片段2:页面

<body>    <!-- 关闭按钮 -->    <input type="button" border="1" class="close_but" value="关闭" onclick="close()"/></body>

效果图:

4.3 filter-渐变色

代码片段1:css

<style>    .body{filter:progid(startColorStr='#FFFF00',endColorStr='#ff0000',gradientType='1',alpha='0.5'}    .close_but{bottom:10px;width:310px;height:30px;left:5px;font-size:20px;color:#000000;background-color:#ffff00;}</style>

代码片段2:页面

<body>    <!-- 关闭按钮 -->    <input type="button" border="1" class="close_but" value="关闭" onclick="close()"/></body>

效果图:

4.4 background-image

代码片段1:css

<style>    .body{background-image:url(loading_ryt.png);}    .close_but{bottom:10px;width:310px;height:30px;left:5px;font-size:20px;color:#000000;background-color:#ffff00;}</style>

代码片段2:页面

<body>    <!-- 关闭按钮 -->    <input type="button" border="1" class="close_but" value="关闭" onclick="close()"/></body>

效果图:

4.5 body不支持设置width、height,body默认填满整个屏幕

代码片段1:css

<style>    .body{width: 100px;height: 200px;background-color:#00FF00;}    .close_but{bottom:10px;width:310px;height:30px;left:5px;font-size:20px;color:#000000;background-color:#ffff00;}</style>

代码片段2:页面

<body>    <!-- 关闭按钮 -->    <input type="button" border="1" class="close_but" value="关闭" onclick="close()"/></body>

效果图:

4.6 child_fixed

代码片段1:css

<style>    .body{background-color:#f0f0f0;}    .fix{left:10px;position:fixed;width:300px;height:30px;filter:progid(alpha='0.5'); background-color:#000fff;}    .normal{left:5px;width:310px;height:100px;filter:progid(alpha='0.5'); background-color: #FFFF00;}    .close_but{bottom:35px;width:310px;height:30px;left:5px;font-size:20px;color:#000000;background-color:#ffff00;}</style>

代码片段2:页面

<body>    <div class="fix">        <label>first-fixed</label>    </div>    <div class="normal">        <label>normal div in body</label>    </div>    <div class="normal">        <label>normal div in body</label>    </div>    <div class="normal">        <label>normal div in body</label>    </div>    <div class="normal">        <label>normal div in body</label>    </div>    <div class="normal">        <label>normal div in body</label>    </div>    <!-- 关闭按钮 -->    <input type="button" border="1" class="close_but" value="关闭" onclick="close()"/>    <div class="fix">        <label>last-fixed</label>    </div></body>

效果图:

DateNoteModifier2015-11-12增加特殊属性minscrolllimitzhou.changjin

Br

功能说明
规则说明
Examples

1 功能说明

可插入一个简单的换行符。

例:  

2 规则说明

 换行遵循以下规则：

如果 标签的previousSibling（上一个同级节点）为块级元素,则会在其previousSibling之下插入一些垂直的间距，间距大小由各平台配置实现，默认为35px。
- iOS 配置文件参见iOS配置
- Andriod 配置文件参见Andriod配置
- WinPhone 配置文件参见WinPhone配置
如果 标签的previousSibling（上一个同级节点）为行内元素，则  标签只是简单地开始新的一行。

注：块级元素含有：

table
br
div

详细的Br布局规则请参见：布局算法

3 Examples

示例Br.xml

运行效果图：

Div

功能说明
属性
- align
- border
- delay
- enable
- valign
特殊属性
- minscrolllimit
样式
- background-color
- background-image
- border
- border-radius
- color
- filter
- font-size
- font-style
- font-weight
- height
- inline-block
- width
事件
- onclick
Examples
- position
- display&hide&visibility
- enable&onclick
- align & valign
- border属性
- border样式
- border-radius
- inline-block
- background-color&background-image&filter
- font系列
- other

1 功能说明

我们把div标签作为一个可显示的容器控件来实现，即div内可以包含其他控件，一般可在div中直接嵌套我们定义的任意可单独使用的标签，如label，img，table等，div本身也可以多次嵌套。默认宽高统一为根据子控件内容计算，但宽度不可超出父控件显示范围

div可以滑动（即当div的内容高度超过div的height会有滚动条）。

我们的div默认是一个块级元素，所以div的前后都会自动换行，即div会独占一行。可以通过设置inline-block:inline这一样式来改变div为内联元素，这时它就不会独占一行了。

例:

<div>    <div class="line">        <label>123</label>    </div>    <label>1234567</label>    ...</div>

2 属性

全局属性以及具体说明参见 * 属性介绍

2.1 align

指定该div的子控件的水平居中方式
@value string left/right/center
@default left
@see 对齐算法

2.2 border

指定控件是否有边框
@value string 0/1
@default 1

注意：border是内边框，对于有边框的div,设置子控件宽度时请考虑边框宽度。如div宽度设置为了100，border的宽度为2，则子控件的总宽最好控制在96以内，且最左侧的子控件的left值至少设置为2，否则子控件可能被边框盖住。

2.3 delay

指定按钮点击的延时时间

2.4 enable

指定控件是否可以点击
@value string true/false
@default true

2.5 valign

指定该div的子控件的垂直居中方式
@value string top/bottom/middle
@default top
@see 对齐算法

注：当子控件自定义了left、right样式来控制布局，align失效。同理，当子控件自定义了top、bottom，则valign失效。

3 特殊属性

3.1 minscrolllimit

注：除Android系统，其他平台不需要处理此属性。

4 样式

全局样式以及具体说明参见 * 样式介绍

注：以下字体相关的样式将作用到div的子控件上，如果子控件本身也定义了同一项样式，则以子控件自己的为准。相关可以参考样式继承。且由于这个原因，div的字体样式不做默认值处理。

4.1 background-color

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

4.2 background-image

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

4.3 border

设置控件边框的样式（宽度，线型，颜色）
@format1 25px solid #fff000
@format2 只写以上三项的任意一项或两项
@default 1px solid #d4d5d9

4.4 border-radius

设置控件四个边的圆角属性
@format1 25px 10px 0px 10px
@format2 10px
@default 各平台有差异（目前均为圆角，但角度大小不一致）

4.5 color

设置字体颜色
@format #RGB(如#000000)

4.6 filter

设置渐变背景色或者透明度
@format1 progid(startColorStr='#FFFFFF',endColorStr='#000000',gradientType='0',alpha='0.5')
@format2 progid(alpha='0.5')

4.7 font-size

设置字体大小
@format 10px

4.8 font-style

设置字体样式
@value normal/italic

4.9 font-weight

设置字体类型
@value normal/bold

4.10 height

指定控件高度
@default 根据子控件内容计算

4.11 inline-block

指定div是否为块级元素
@value inline/block
@default block

4.12 width

指定控件宽度
@default 根据子控件内容计算，但宽度不可超出父控件显示范围

5 事件

5.1 onclick

指定div的点击事件

6 Examples

示例代码地址：div.xml

6.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的第一个控件 -->    <div class='father,positionFixed'>        <label>我在div中，div有:positionFixed</label>    </div>    <!-- positon:toplevel -->    <div class='father,positionToplevel'>        <label>我在透明的div中，div有:positionToplevel</label>    </div>    ...    <!-- positon:fixed，这是body的最后一个控件 -->    <div class='father,positionFixed'>        <label>我在div中，div有:positionFixed</label>    </div><body>

效果图:

6.2 display&hide&visibility

代码片段1:css

<style>    .father_lit{width:300px;height:10px;left:10px;}    .label{font-size:12px;}    .display1{display:none;}    .display2{display:block;}    .visibility1{visibility:visible;}    .visibility2{visibility:hidden;}    ...</style>

代码片段2:页面

<body>    <b>测试div对hide/display/visibility的支持</b><br/>    <!-- hide -->    <label>下面的div有:hide=false</label><br/>    <div class='father_lit' hide="false">    </div>    <label>下面的div有:hide=true</label><br/>    <div class='father_lit' hide="true">    </div>    <!-- diaplay -->    <label>下面的div有:display=block</label><br/>    <div class='father_lit,display2' >    </div>    <label>下面的div有:display=none</label><br/>    <div class='father_lit,display1' >    </div>    <!-- visibility -->    <label>下面的div有:visibility=visible</label><br/>    <div class='father_lit,visibility1' >    </div>    <label>下面的div有:visibility=hidden</label><br/>    <div class='father_lit,visibility2' >    </div>    <!-- hide&display display优先 -->    <label>下面的div有:hide=false,display=none</label><br/>    <div class='father_lit,display1' hide="false" >    </div>    <label>下面的div有:hide=true,display=block</label><br/>    <div class='father_lit,display2' hide="true" >    </div>    <!-- visibility&display visibility优先 -->    <label>下面的div有:visibility=visible,display=none</label><br/>    <div class='father_lit,visibility1,display1' >    </div>    <label>下面的div有:visibility=hidden,display=none</label><br/>    <div class='father_lit,visibility2,display1' >    </div>    <label>下面的div有:visibility=hidden,display=block</label><br/>    <div class='father_lit,visibility2,display2' >    </div><body>

效果图:

6.3 enable&onclick

代码片段1:css

<style>    .father{width:300px;height:30px;left:10px;}    .label{font-size:12px;}    .div1{width:300px;height:30px;left:10px;background-color:#00ff00;}    .div2{width:200px;height:20px;left:50px;top:5px;background-color:#00ffff;}    .div3{width:100px;height:10px;left:50px;top:5px;background-color:#ffff00;}    ...</style>

代码片段2:lua

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

代码片段3:页面

<body>    <!-- enable and onclick事件 -->    <b>测试div对enable的支持</b><br/>    <div class='father,background_color' enable="true" onclick="click('enable=true')">        <label>---点击我---enable=true</label>    </div>    <div class='father,background_color' enable="false" onclick="click('enable=false')">        <label>---点击我---enable=false</label>    </div>    <label>下面的div多层嵌套，div1在最外层：enable=false，div2在中间enable=true，div3在最里层enable=false</label><br/>    <div class='div1' enable="false" onclick="click('div1:enable=false')">        <div class='div2' enable="true" onclick="click('div2:enable=true')">            <div class='div3' enable="false" onclick="click('div3:enable=false')">            </div>        </div>    </div>    <label>下面的div多层嵌套，div1在最外层：enable=true，div2在中间enable=false，div3在最里层enable=true</label><br/>    <div class='div1' enable="true" onclick="click('div1:enable=true')">        <div class='div2' enable="false" onclick="click('div2:enable=false')">            <div class='div3' enable="true" onclick="click('div3:enable=true')">            </div>        </div>    </div><body>

效果图:

6.4 align & valign

代码片段1:css

<style>    .father{width:300px;height:30px;left:10px;}    .label{font-size:12px;}    .i{width:150px;font-size:12px;height:15px;background-color:#00ff00;}    .top{top:3px;}    .left{left:3px;}    ...</style>

代码片段2:页面

<!-- div的align/valign属性 --><b>测试div对align/valign属性的支持</b><br/><div align="left" class='father' border="1">    <i>in div align=left</i></div><div align="center" class='father' border="1">    <i>in div align=center</i></div><div align="right" class='father' border="1">    <i>in div align=right</i></div><div valign="top" class='father' border="1">    <i>in div valign=top</i></div><div valign="middle" class='father' border="1">    <i>in div valign=middle</i></div><div valign="bottom" class='father' border="1">    <i>in div valign=bottom</i></div><label>当指定了子控件的left/right,align应当失效</label><div align="right" class='father' border="1">    <i class="left">in div align=right;left=3</i></div><label>当指定了子控件的top/bottom,valign应当失效</label><div valign="bottom" class='father' border="1">    <i class="top">in div valign=bottom;top=3</i></div>

效果图:

6.5 border属性

代码片段1:css

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

代码片段2:页面

<body>    <b>测试div对border属性的支持</b><br/>    <div class='father'>        <label>div没有指定border=?默认为1</label>    </div>    <div class='father' border='0'>        <label>div指定border=0</label>    </div>    <div class='father' border='1'>        <label>div指定border=1</label>    </div>    <div class='father,background_color' border="1">        <label class="has_border">div有:background-color,border=1</label>    </div>    <div class='father,background_image' border="1">        <label class="has_border">div有:background-image,border=1</label>    </div>    ...<body>

效果图:

6.6 border样式

代码片段1:css

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

代码片段2:页面

<body>    <b>测试div对border样式的支持</b><br/>    <div class='father,border' border="0">          <label class="has_border">div有:border=0,border样式不起作用</label>    </div>    <div class='father,border' border="1">          <label class="has_border">div有:border:3px solid #00ff00</label>    </div>    <div class='father,background_color,border' border="1">        <label class="has_border">div有:background-color,border:3px solid #00ff00</label>    </div>    <div class='father,background_image,border' border="1">        <label class="has_border">div有:background-image,border:3px solid #00ff00</label>    </div>    ...<body>

效果图:

6.7 border-radius

代码片段1:css

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

代码片段2:页面

<body>    <b>测试div对border-radius的支持</b><br/>    <div class='father,borderRadiusOne,background_color' border="0">        <label>div有:border=0,border-radius不起作用</label>    </div>    <div class='father,borderRadiusOne' border="1">        <label>div有:border=1和border-radius:10</label>    </div>    <div class='father,borderRadiusOne,background_color' border="1">        <label>div有:border-radius:10,background-color</label>    </div>    <div class='father,borderRadiusOne,background_image' border="1">        <label>div有:border-radius:10,background-image</label>    </div>    <div class='father,borderRadiusFour' border="1">        <label>div有:border-radius:0 10 15 20</label>    </div>    <div class='father,borderRadiusFour,background_color' border="1">        <label>div有:border-radius:0 10 15 20,background-color</label>    </div>    <div class='father,borderRadiusFour,background_image' border="1">        <label>div有:border-radius:0 5 10 15,background-image</label>    </div>    ...<body>

效果图:

6.8 inline-block

代码片段1:css

<style>    .father_short{width:130px;left:10px;}    .label{font-size:12px;}    .inline_block1{inline-block:block;}    .inline_block2{inline-block:inline;}    ...</style>

代码片段2:页面

<body>    ...    <!-- inline-block-->    <b>测试div对inline-block的支持</b><br/>    <div class='father_short,inline_block1' >        <label>div设置inline-block为block，总是独占一行，跟在其后的元素换行显示</label>    </div>    <label>跟在block的div后，换行显示</label>    <div class='father_short,inline_block2' >        <label>div设置inline-block为inline，变为内联元素，跟在其后的元素不换行显示</label>    </div>    <label>跟在inline的div后，不换行显示</label>    ...<body>

效果图:

6.9 background-color&background-image&filter

代码片段1:css

<style>    .father{width:300px;height:30px;left:10px;}    .label{font-size:12px;}    .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>测试div对filter/background-color/background-image的支持</b><br/>    <!-- filter -->    <div class='father,filter1' >        <label>div有:filter渐变</label>    </div>    <div class='father,filter2' >        <label>div有:filter透明度</label>    </div>    <!-- background-color -->    <div class='father,background_color' >        <label>div有:background-color</label>    </div>    <!-- background-image -->    <div class='father,background_image' >        <label>div有:background-image</label>    </div>    <!-- background-color,background-image -->    <div class='father,background_image,background_color' >        <label>div有:background-image,background-color</label>    </div>    <!-- background-color,filter -->    <div class='father,background_color,filter1' >        <label>div有:background_color，渐变</label>    </div>    <!-- background-image,filter -->    <div class='father,background_image,filter1' >        <label>div有:background-image，渐变</label>    </div>    ...<body>

效果图:

6.10 font系列

代码片段1:css

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

代码片段2:页面

<body>    <!-- color/font-size/font-wight-->    <b>测试div对color/font-size/font-wight/font-style的支持</b><br/>    <!--color-->    <div class='father_free,textColor' >        <input type="button" value="in div:有color" />    </div>    <!--fontSize-->    <div class='father_free,fontSize' >        <input type="button" value="in div:有font-size:25" />    </div>    <!--fontWeight-->    <div class='father_free,fontWeight' >        <input type="button" value="in div:有fontWeight" />    </div>    <!--fontStyle-->    <div class='father_free,fontStyle' >        <input type="button" value="in div:有fontStyle" />    </div>    ...<body>

效果图:

6.11 other

代码片段1:css

<style>    .father_big{width:300px;height:100px;left:10px;}    .label{font-size:12px;}    .line{left:10px;width:280px;height:1px;background-color:#ff00ff;}    .child{left:10px;width:250px;height:30px;background-color:#00ff00;}    ...</style>

代码片段2:页面

<body>    <!-- 综合测试 -->    <b>测试div作为容器,盛放一些控件</b><br/>    <label>下面的div有固定宽高300,100</label><br/>    <div class='father_big' >        <br/>        <label class="child">我是label</label>        <input class="child" type="text" border="0" value="我是input-text" />        <input class="child" type="button" border="0" value="我是button" />        <div class="child" border="0">            <label>我是label,在div中</label>        </div>        <br/>    </div>    <b>测试高度为1的div</b><br/>    <label>我的下边有两条用div画的线，第一条有border,第二条没有border</label>    <div class='line' border="1"></div>    <div class='line' border="0"></div>    <label>我的上边有两条用div画的线,第一条有border,第二条没有border</label>    ......<body>

效果图:

DateNoteModifier2015-08-07增加inline-block样式示例bi.jiao2015-11-12增加特殊属性minscrolllimitzhou.changjin2015-11-30增加delay属性支持zhou.changjin2015-12-23补充默认宽高说明zhou.changjin

Form

功能说明
Examples

1 功能说明

Form 表单用于搜集不同类型的用户输入。
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等）输入信息的元素。

Form只是虚拟的容器控件，不存在边框，只是包含了提交表单所需要的控件。

支持的表单元素：

input(Type:button,submit,checkbox,radio,hidden,text,password,segment,switch)
select

示例代码：

<form method='post' action="/ebank_s/check_form" name="form_test">...input 元素</form>

Form表单提交时，是否显示加载页应该可由项目人员配置，灵活处理需求。

iOS 推荐方案:

/** * 是否存在加载页面 */#define Load/** * 加载页面内容 */#ifdef Load    #define LoadPage @"FullSLoading.xml"#endif

Android 推荐方案

/**请求过程中是否showLoading,目前包括:1.提交form表单**/private boolean showLoading=true;/**请求过程中加载loading的路径**/private String loadingPath="local:FullSLoading1.xml";/**请求过程中加载loading的tag**/private int loadingTag=31415929;

form标记的属性解释如下：

name:表单的名称;
action：用来定义表单处理程序的位置(将与EWP服务器地址进行拼装).此属性只有在使用sumbit按钮提交时才会自动调用(如EWP服务器地址为http://192.168.64.128:4004,则拼装后的处理程序的位置为http://192.168.64.128:4004/ebank_s/check_form)。

form标记的说明事项如下：

表单元素需要指明name属性;
当表单元素为隐藏域时，name/value同样需要上传服务器;
因checkbox支持若干选项，因此checkbox的name属性不同;而radio、segment、switch、select选择是互斥的，同一组别的name属性必须相同。
通过form表单提交时,表单元素的value值为选中项的value值,form表单请求的HTTP协议的Body为name=value形式的字符串，且各表单元素的提交结果由&连接。

2 Examples

示例form.xml

点击submit按钮提交后界面(此xml文件不支持因为涉及网络请求，因此不支持本地调试)

I & Em

功能说明
属性
- adjustsfontsize
- linebreakmode
- loop
- minfontsize
- numlines
- shadowcolor
- shadowoffset
- velocity
样式
- background-color
- color
- filter
- font-size
- font-weight
- height
- text-align
- width
Examples
- position
- loop
- numlines
- linebreakmode
- velocity
- shadowcolor
- shadowoffset
- hide dispaly visibility
- color font 相关
- 其他

1 功能说明

 和  标签显示斜体文本效果。
它告诉控件将包含其中的文本以斜体字（italic）显示。
但是在某些平台显示会有差异：如iOS7.0之后，系统不能显示中文斜体，而是以加粗的效果显示

例：

 <i>斜体文字</i> <em>斜体文字</em>

2 属性

2.1 adjustsfontsize

2.2 linebreakmode

2.3 loop

指定是否以跑马灯的方式循环展示
@value true(以跑马灯方式循环展示)/false(不以跑马灯方式循环展示)

2.4 minfontsize

2.5 numlines

指定固定文字显示的行数
@value 0(代表没有行数限制.)

2.6 shadowcolor

指定文字阴影效果的颜色
@value 格式为#RRGGBB.
@see shadowoffset

2.7 shadowoffset

2.8 velocity

指定跑马灯移动的速度.属性值代表每秒文字移动的像素数或坐标点数.

3 样式

3.1 background-color

指定控件背景色.

3.2 color

指定控件文本颜色.

3.3 filter

指定控件的渐变色背景色样式.

3.4 font-size

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

3.5 font-weight

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

3.6 height

指定控件高度
@default 根据文字内容计算

3.7 text-align

指定控件文字显示位置.

3.8 width

指定控件宽度
@default 根据文字内容计算，但宽度不可超出父控件显示范围

4 Examples

示例i.xml
示例em.xml

注：因为i标签和em标签除了标签名，控件支持的属性、样式和显示效果一样，因此此处只针对em标签详细说明。

4.1 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 -->        <em class='father,positionFixed'> positon:fixed body第一个控件 </em>        ...        其他控件代码        ...        <!-- positon:toplevel -->        <em class='father,positionToplevel' > positon:toplevel 不随页面滚动 </em>        ...        其他控件代码        ...        <!-- positon:fixed -->        <em class='father,positionFixed'> positon:fixed body最后一个控件 </em>    </body>

效果图

说明

4.2 loop

css样式：

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

页面布局

    <body>        <!-- loop -->        <em class="father" loop="false">loop="false" 无跑马灯效果</em>        <em class="father" loop="true">loop="true" 跑马灯效果</em>    </body>

效果图

说明

声明loop="true"的属性的控件，将呈现出跑马灯效果，所附截图为跑马灯效果触发后。

4.3 numlines

css样式：

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

页面布局

    <body>        <!-- numlines -->        <em class="numberlines" numlines="3">显示三行，无法显示完整时以“...”结尾。显示三行，无法显示完整时以“...”结尾。显示三行，无法显示完整时以“...”结尾。显示三行，无法显示完整时以“...”结尾。显示三行，无法显示完整时以“...”结尾。显示三行，无法显示完整时以“...”结尾。显示三行，无法显示完整时以“...”结尾。</em>    </body>

效果图

4.4 linebreakmode

css样式：

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

页面布局

    <body>      <!-- linebreakmode -->      <em class="father,linebreakmode" linebreakmode="head">linebreakmode="head",文字开始部分省略,      用'...'代替.</em>      <em class="father,linebreakmode" linebreakmode="tail">linebreakmode="tail",文字结尾部分省略,      用'...'代替.</em>      <em class="father,linebreakmode" linebreakmode="middle">linebreakmode="middle",文字中间部分      省略,用'...'代替.</em>      <em class="father,linebreakmode" linebreakmode="none">linebreakmode="none",不使用'...'代替.      增加文字超过一行。</em>      <em class="father,linebreakmode" numlines="1">linebreakmode未设置,numlines="1",此时在末尾省略.</em>    </body>

效果图

4.5 velocity

css样式：

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

页面布局

    <body>    <!-- velocity -->    <em class="father" loop="true" velocity="5">velocity="5",指定跑马灯的移动速度为    每秒5个像素点</em>    <em class="father" loop="true" velocity="15">velocity="5",指定跑马灯的移动速度为    每秒15个像素点</em>    </body>

效果图

说明

由所附截图可以看出，属性velocity='5'的em中的文字，要比velocity='15'的em中的文字移动的速度慢。

4.6 shadowcolor

css样式：

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

页面布局

    <body>    <!-- shadowcolor -->        <em class="father,shadowcolor" >不指定文字阴影效果的颜色</em>        <em class="father,shadowcolor"shadowcolor="#FF0000">shadowcolor="#FF0000"，        指定文字阴影效果的颜色为红色</em>    </body>

效果图

说明

由所附截图可以看出下方em标签中的文字阴影效果的颜色为红色。

4.7 shadowoffset

css样式：

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

页面布局

    <body>    <!-- shadowoffset -->          <em class="father,shadowoffset" shdowOffset="(9,9)">不指定文字阴影效果的颜色</em>          <em class="father,shadowoffset" shadowcolor="#FF0000">指定文字阴影偏移量为默认</em>          <em class="father,shadowoffset" shadowcolor="#FF0000" shadowoffset="(9,0)">指定文字阴影偏移量为(9,0)</em>          <em class="father,shadowoffset" shadowcolor="#FF0000" shadowoffset="(0,9)">指定文字阴影偏移量为(0,9)</em>          <em class="father,shadowoffset" shadowcolor="#FF0000" shadowoffset="(9,9)">指定文字阴影偏移量为(9,9)</em>          <em class="father,shadowoffset" shadowcolor="#FF0000" shadowoffset="(9,15)">指定文字阴影偏移量为(9,15)</em>    </body>

效果图

说明

所附截图显示了效果,第二个em的文字阴影偏移量为默认.并且,偏移量x最大值不可以超过当前文字的宽度,否则出现异常; 当偏移量y超过当前字体的高度时,偏移量无效.

4.8 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 -->        <em hide='false' class='father' > hide=false，下方有hide=true的em控件 </em>        <em hide='true' class='father' > hide=true的em,不应该显示出来 </em>        <em hide='false' class='father' > hide=false，上方有hide=true的em控件 </em>        <!-- diaplay -->        <em class='father,display2' > display=block，下方有display=none的em控件 </em>        <em class='father,display1' > display=none，不应该显示出来 </em>        <em class='father,display2' > display=block，上方有display=none的em控件 </em>        <!-- visibility -->        <em class='father,visibility1'> visibility:visible下方有visibility=hidden的em控件 </em>        <em class='father,visibility2'> visibility:hidden 不应该显示 </em>        <em class='father,visibility1'> visibility:visible上方有visibility=hidden的em控件 </em>    </body>

效果图

说明

4.9 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;}            .textAlignLeft{text-align:left;}            .textAlignCenter{text-align:center;}            .textAlignRight{text-align:right;}        </style>

页面布局

    <body>        <!-- background-color -->        <em class='father,background_color' > 背景色 ：background-color </em>        <!-- color -->        <em class='father,textColor' > 字体颜色：color </em>        <!-- filter -->        <em class='father,filter' > 渐变色：filter </em>        <!-- font-weight -->        <em class='father,fontWeight' > font-weight:bold </em>        <!-- font-size -->        <em class='father,fontSize' > font-size:30px </em>        <!-- text-align -->        <em class='father,textAlignLeft'> text-align:left </em>        <em class='father,textAlignCenter'> text-align:center </em>        <em class='father,textAlignRight'> text-align:right </em>    </body>

效果图

4.10 其他

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 display -->        <em hide='true' class='father,display2'> display=block hide=true 样式>属性应显示 </em>        <em hide='false' class='father,display1' > display=none hide=false 样式>属性不显示 </em>        <em hide='true' class='father,display2'> display=block hide=true 样式>属性应显示 </em>        <!-- hide visibility -->        <em hide='true' class='father,visibility1'> visibility:visible hide=true 样式>属性应显示</em>        <em hide='false' class='father,visibility2' > visibility:hidden hide=false 样式>属性占位不显示 </em>        <em hide='true' class='father,visibility1'> visibility:visible hide=true 样式>属性应显示</em>        <!-- display visibility -->        <em class='father,display1,visibility1'> visibility:visible display=none 应显示</em>        <em class='father,display2,visibility2' > visibility:hidden display=block 占位不显示 </em>        <em class='father,display1,visibility1'> visibility:visible display=none 应显示</em>    </body>

效果图

说明

此测试用例主要用于测试控件支持的属性和控件支持的样式的组合测试。针对上述，我们做如下说明：

因为样式优先的原则，当hide属性和diaplay、visibility样式共同作用于控件时，样式将起决定作用。
我们规定，visibility样式将覆盖display样式。

DateNoteModifier2015-08-17增加新属性示例liu.zhipeng2015-12-23补充默认宽高说明zhou.changjin

0 0