EMP界面开发规范（3）

Checkbox

• 功能说明
• 属性
  • checked
  • enable
  • linebreakmode
  • numlines
  • shadowcolor
  • shadowoffset
  • text
  • valign
  • align
  • value
• 样式
  • background-color
  • background-image
  • color
  • filter
  • font-size
  • font-style
  • font-weight
  • height
  • width
• 事件
  • onclick
• Examples
  • position
  • display&visibility&hide
  • background-color&background-image&filter
  • color&font-weight&font-style&font-size
  • enable&checked
  • value&text
  • numlines & linebreakmode
  • valign
  • shadowcolor & shadowoffset

1 功能说明

1. Checkbox 控件用来表示复选框，即选项之间不互斥，用户可以同时选中多个选项。它是由input标签加type="checkbox"属性实现的。

   例：text

   checkbox中内容默认垂直居中水平居左，图片与文字部分，垂直方向中心点对齐。根据文字内容自 动计算换行。

   • 在没有样式的情况下，控件大小由内容及title图片计算获得，最宽不应超过父控件宽度减去左右 边距。当文字内容不能在一行完全显示时，需要换行显示。
   • 样式指定高度。当大于title图片高度，图片按照原始大小显示，当小于title图片高度，图片会 适当缩放，以显示完整图片。
   • 样式指定宽度。当文字内容在一行不能完全显示时，需要换行显示。
   • 样式指定宽度和高度。当设定区域不足以显示所有文字时，文字将会被截取。

2. 水平对齐说明

   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

代码片段2：页面

    
    position:fixed,body第一个控件
    
    position:toplevel,不随页面滚动
    
    position:fixed,body最后一个控件

效果图：

---

5.2 display&visibility&hide

代码片段1：css

代码片段2：页面

    
    display=block,显示
    下方有display=none的checkbox,不显示不占位
    display=none不显示不占位
    
    visibility=visible,显示
    下方有visibility=hidden的checkbox,不显示占位
    visibility=hidden,不显示占位
    
    hide=false,显示
    下方有hide=true的checkbox,不显示不占位
    hide=true,不显示不占位
    
    display=block,hide=true,应显示
    下方有display=none,hide=false的checkbox
    display=none,hide=false,不显示不占位
    
    visibility=visible,hide=true,显示
    下方有visibility=hidden,hide=false的checkbox
    visibility=hidden,hide=false,不显示占位
    
    visibility=visible,display=none,显示
    下方有visibility=hidden,display=block的checkbox
    visibility=hidden,display=block,不显示占位

效果图：

---

5.3 background-color&background-image&filter

代码片段1：css

代码片段2：页面

    
    背景色background-color
    
    背景图background-image
    
    filter渐变色
    filter(alpha=0.5)

效果图：

---

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

代码片段1：css

代码片段2：页面

    
    字体颜色color
    
    font-weight:bold
    
    font-size:23px
    
    fontStyle:italic
    
    bold+italic,加粗斜体
    
    color,fontSize,bold,italic

效果图：

---

5.5 enable&checked

代码片段1：css

代码片段2：页面

    
    enable=true,控件可用
    enable=false,控件不可用
    
    checked="checked"
    
    enable=false,checked

效果图：

---

5.6 value&text

代码片段1：css

代码片段2：页面

    
    
    text文字
    设置value属性,显示的是标签间的text

效果图：

---

5.7 numlines & linebreakmode

代码片段1：css

代码片段2：页面

    
    若将numlinese属性值设置为“2”，那么指定的固定文字便会显示为2行。如下图所示：
    
    linebreakmode指定文字被截取时省略号的位置.
    
    当numlines与linebreakmode同时设置时，linebreakmode的优先级高于numlines的！

效果图：

---

5.8 valign

代码片段1：css

代码片段2：页面

    
    valign="top"
    默认valign="middle"
    valign="bottom"

效果图：

---

5.9 shadowcolor & shadowoffset

代码片段1：css

代码片段2：页面

    
    只有shadowcolor时
    只有shadowoffset时
    只有横向偏移
    只有纵向偏移
    正向的横向偏移+纵向偏移
    反向的横向偏移+纵向偏移

效果图：

Hidden

• 功能说明
• 属性
• Examples
  • value

1 功能说明

hidden控件叫做隐藏域, 该控件被用在form提交中, 不显示也不占位。它是由input标签加type='hidden'属性实现的。

例: 

2 属性

value
指定hidden控件的value值(上传服务器的参数).
@value string 任意的字符串.

3 Examples

示例hidden.xml

3.1 value

页面报文:

效果图:

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

Password

• 功能说明
• 属性
  • border
  • enable
  • encryptmode
  • hold
  • isorder
  • substitute
  • value
• 样式
  • background-color
  • background-image
  • border
  • border-radius
  • filter
  • font-size
  • height
  • text-align
  • width
• 事件
  • onfocus
  • onblur
  • onchange
• Examples
  • position
  • display&visibility&hide
  • background-color&background-image&filter
  • font-size&text-align
  • border
  • border-radius
  • hold&enable
  • onfocus&onchange&onblur事件测试
  • substitute
  • isorder

1 功能说明

Password 控件为密码输入框, 供用户输入密码时使用, 其输入的文本内容不可见 (不同平台的显示效果有差异), 并可以设定encryptmode属性对其内容进行加密。它是由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

代码片段2:页面

    
    
    
    
    ...
    
    

效果图:

---

5.2 display&visibility&hide

代码片段1:css

代码片段2:页面

    ...
    
    display=block,显示:
    
    下方有display=none的input,不显示不占位:
    
    
    visibility=visible,显示:
    
    下方有visibility=hidden的input,不显示占位:  
    
    
    hide=false,显示:
    
    下方有hide=true的input,不显示不占位:
    
    
    display=block+hide=true,应显示:
    
    下方有display=none+hide=false的input:
    
    
    visibility=visible+hide=true,显示:
    
    下方有visibility=hidden+hide=false的input:
      
    
    visibility=visible+display=none,显示:
    
    下方有visibility=hidden+display=block的input:
    
    ...

效果图:

---

5.3 background-color&background-image&filter

代码片段1:css

代码片段2:页面

    ...
    
    背景色background-color:
    
    
    背景图background-image:
    
    
    filter渐变色:
    
    filter透明度:
    
    ...

效果图:

---

5.4 font-size&text-align

代码片段1:css

代码片段2:页面

    ...
    
    font-size=30px
    
    
    text-align居左:
    
    text-align居中:
    
    text-align居右:
    
    ...

效果图:

---

5.5 border

代码片段1:css

代码片段2:页面

    ...
    
    border=1，有边框:
    
    border=0，无边框:
    
    默认有边框:
    
    
    border(#FF0000):
    
    border(10px #FF0000):
    
    border(10px solid #FF0000):
    
    ...

效果图:

---

5.6 border-radius

代码片段1:css

代码片段2:页面

    ...
    
    borderRadius(35px 20px 0px 10px):
    
    borderRadius(10px):
    
    
    背景色+border-radius(35px 20px 0px 10px):
    
    背景色+border-radius:(10px):
    
    
    背景图+border-radius(35px 20px 0px 10px):
    
    背景图+border-radius(10px):
    
    
    渐变色+borderRadius(35px 20px 0px 10px):
    
    alpha+borderRadius(35px 20px 0px 10px):
    
    
    border-radius(35px 20px 0px 10px)+居左:
    
    border-radius(35px 20px 0px 10px)+居中:
    
    border-radius(35px 20px 0px 10px)+居右:
    
    ...

效果图:

---

5.7 hold&enable

代码片段1:css

代码片段2:页面

    ...
    
  hold属性，显示输入提示文字:
  
  
  enable=true，控件可用:
  
  enable=false，控件不可用:
  
  ...

效果图:

5.8 onfocus&onchange&onblur事件测试

代码片段1:css

代码片段2:lua

代码片段3:页面

    ...
    
    onfocus事件:
    
    onchange事件:
    
    onblur事件:
    
    事件组合测试:
    
    ...

效果图:

将光标放入"onfocus事件"的密码框中，alert函数响应，如下图：

改变"onchange事件"密码框中的文字内容，alert函数响应，如下图：

将光标放入"onblur事件"的密码框中再移出，alert函数响应，如下图：

"事件组合测试"密码框可以响应onfocus、onchange、onblur三种事件。

5.9 substitute

代码片段1:css

代码片段2:页面

    ...
    
    substitute="●":
    
    substitute="*":
    
    ...

效果图:

5.10 isorder

代码片段1:css

代码片段2:页面

    ...
    
    isorder=true:
    
    isorder=false:
    
    ...

效果图:

1. isorder=true，密码键盘按正常顺序显示，效果如下图:
   
2. isorder=false，密码键盘不按正常顺序显示，效果如下图:
   

Radio

• 功能说明
• 属性
  • checked
  • enable
  • linebreakmode
  • numlines
  • text
  • shadowcolor
  • shadowoffset
  • valign
  • value
• 样式
  • background-color
  • background-image
  • color
  • filter
  • font-size
  • font-style
  • font-weight
  • height
  • width
• 事件
  • onclick
• Examples
  • position
  • display & visibility & hide
  • background-color & background-image & filter
  • color & font-weight & font-size & font-style
  • enable & checked
  • value & text
  • numlines & linebreakmode
  • valign
  • shadowcolor & shadowoffset

1 功能说明

Radio 控件用来表示单选按钮。单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。它是由input标签加type="radio"属性实现的。

例：text

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

代码片段2：页面

    
    position:fixed,body第一个控件
    
    position:toplevel,不随页面滚动
    position:fixed,body最后一个控件

效果图：

---

5.2 display & visibility & hide

代码片段1：css

代码片段2：页面

    
    display=block显示
    下方有display=none的radio,不显示不占位
    display=none不显示不占位

    
    visibility=visible,显示
    下方有visibility=hidden的radio,不显示占位
    visibility=hidden,不显示占位

    
    hide=false,显示
    下方有hide=true的radio,不显示不占位
    hide=true,不显示不占位

    
    display=block,hide=true,应显示
    下方有display=none,hide=false的radio
    display=none,hide=false,不显示不占位

    
    visibility=visible,hide=true,显示
    下方有visibility=hidden,hide=false的radio
    visibility=hidden,hide=false,不显示占位

    
    visibility=visible,display=none,显示
    下方有visibility=hidden,display=block的radio
    visibility=hidden,display=block,不显示占位
    以下为新的一组radio:

效果图：

---

5.3 background-color & background-image & filter

代码片段1：css

代码片段2：页面

    以下为新的一组radio:
    
    背景色background-color
    
    背景图background-image
    
    filter渐变色
    filter(alpha=0.5)

效果图：

---

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

代码片段1：css

代码片段2：页面

    
    字体颜色color
    
    font-weight:bold
    
    font-size:23px
    
    fontStyle:italic
    
    bold+italic,加粗斜体
    
    color,fontSize,bold,italic

效果图：

---

5.5 enable & checked

代码片段1：css

代码片段2：页面

    
    enable=true,控件可用enable=false,控件不可用
    checked="checked"以下为新的一组radio:
    enable=false+checked

效果图：

---

5.6 value & text

代码片段1：css

代码片段2：页面

    
    text文字设置value属性,显示的是标签间的text

效果图：

---

5.7 numlines & linebreakmode

代码片段1：css

代码片段2：页面

    
    若将numlinese属性值设置为“2”，那么指定的固定文字便会显示为2行。如下图所示：
    
    linebreakmode指定文字被截取时省略号的位置.
    
    当numlines与linebreakmode同时设置时，linebreakmode的优先级高于numlines的！

效果图：

---

5.8 valign

代码片段1：css

代码片段2：页面

    
    valign="top"
    默认valign="middle"
    valign="bottom"

效果图：

---

5.9 shadowcolor & shadowoffset

代码片段1：css

代码片段2：页面

    
    只有shadowcolor时
    只有shadowoffset时
    只有横向偏移
    只有纵向偏移
    正向的横向偏移+纵向偏移
    反向的横向偏移+纵向偏移

效果图：

Segment

• 功能说明
• 属性
  • checked
  • cornerradius
  • enable
  • hide
  • name
  • ontintcolor
  • titleimg
  • type
  • value
• 样式
  • background-color
  • color
  • display
  • font-size
  • font-style
  • font-weight
  • height
  • position
  • visibility
  • width
• 伪类
  • background-color
  • color
• 事件
  • onclick
• Examples
  • position
  • size
  • hide/display/visibility
  • font-size/font-weight/font-style
  • checked
  • onclick
  • enable
  • titleimg
  • ontintcolor
  • cornerradius
• iOS重构segment使用说明

1 功能说明

search
find
look

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属性的标签。即如下所示，

one
two
three

虽然显示效果按第一个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

代码片段2：页面

    
    search
    find
    look

效果图：

---

6.2 size

代码片段1：css

代码片段2：页面

    
    size 测试
    默认size
    search
    find
    look
    修改size
    search
    find
    look
    说明：后面都采用默认size.

效果图：

当宽度不足显示整个title时，则以中间三个点代替显示不全的内容

---

6.3 hide/display/visibility

代码片段1：css

代码片段2：页面

    
     hide 测试
    hide = 'true',不显示
    search
    find
    look
    hide = 'false',显示
    search
    find
    look

    
     display 测试
    diplay='none',不显示,不占位
    search
    find
    look
    diplay='block',显示
    search
    find
    look
    
     visibility 测试
    visibility='hidden',不显示,占位
    search
    find
    look
    visibility='visible',显示
    search
    seg2
    seg3

效果图：

---

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

代码片段1：css

代码片段2：页面

    
     font-weight font-size font-style测试
     size=13px,正常
    search
    find
    look
     size=13px,粗体
    search
    find
    look
     size=13px,斜体
    search
    find
    look

效果图：

---

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：页面

    
     checked 测试
    yes
    segment第三个为选中
    search
    find
    look

效果图：

---

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：页面

    
     onclick 测试
     文档实例1:onclick实现
    search
    find
    look
     文档实例2:onclick实现
    search
    find
    look

效果图：

---

6.7 enable

代码片段1：lua

function onclickfalse()
    window:alert("enable=false,能点击，错误");
end;

代码片段2：页面

    
     enbale 测试
     enbale='false' 不能点击
    search
    find
    look

效果图：

---

6.8 titleimg

注：该属性的优先级大于标签间文本显示内容，若标签同时写了titleimg属性和标签间文本，则标签间文本不显示。

代码片段1：页面

    
     titleimg 测试
    
    find
    look

效果图：

---

6.9 ontintcolor

代码片段1：页面

    
     ontintcolor 测试
    search
    find
    look

效果图：

---

6.10 cornerradius

代码片段1：页面

    
     cornerradius 测试
    search
    find
    look

效果图：

---

7 iOS重构segment使用说明

1. iOS使用segment新功能需要在class.xml里修改配置，即RYTCustomSegmentControl替换RYTSegmentControl