EMP界面开发规范（3）

最新推荐文章于 2021-07-07 22:13:18 发布
最新推荐文章于 2021-07-07 22:13:18 发布
阅读量4k 收藏
点赞数
分类专栏： 其他汇总
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gxf_ming/article/details/68942501
版权
Checkbox功能说明属性checkedenablelinebreakmodenumlinesshadowcolorshadowoffsettextvalignalignvalue样式background-colorbackground-imagecolorfilterfont-sizefont-stylefont-weightheightwidth事件o
摘要由CSDN通过智能技术生成

Checkbox

1 功能说明

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

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

    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

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

代码片段2：页面

<body>
    <!-- positon:fixed 这是body第一个控件-->
    <input type="checkbox" class="father,positionFixed">position:fixed,body第一个控件</input>
    <!-- positon:toplevel -->
    <input type="checkbox" class="father,positionToplevel">position:toplevel,不随页面滚动</input>
    <!-- positon:fixed 这是body最后一个控件-->
    <input type="checkbox" class="father,positionFixed">position:fixed,body最后一个控件</input>
</body>

效果图：

5.2 display&visibility&hide

代码片段1：css

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

代码片段2：页面

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

效果图：

5.3 background-color&background-image&filter

代码片段1：css

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

代码片段2：页面

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

效果图：

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

代码片段1：css

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

代码片段2：页面

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

效果图：

5.5 enable&checked

代码片段1：css

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

代码片段2：页面

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

效果图：

5.6 value&text

代码片段1：css

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

代码片段2：页面

<body>
    <!-- value text-->
    <input type="checkbox" class="father" value="checkbox"></input>
    <input type="checkbox" class="father">text文字</input>
    <input type="checkbox" class="father" value="checkbox">设置value属性,显示的是标签间的text</input>
</body>

效果图：

5.7 numlines & linebreakmode

代码片段1：css

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

代码片段2：页面

<body>
    <!-- numlines -->
    <input type="checkbox" class="father,heigthStyle" numlines="2">若将numlinese属性值设置为“2”，那么指定的固定文字便会显示为2行。如下图所示：</input>
    <!-- linebreakmode -->
    <input type="checkbox" class="father" linebreakmode="middle">linebreakmode指定文字被截取时省略号的位置.</input>
    <!-- numlines、linebreakmode -->
    <input type="checkbox" class="father,heigthStyle" numlines="2"linebreakmode="middle">当numlines与linebreakmode同时设置时，linebreakmode的优先级高于numlines的！</input>
</body>

效果图：

5.8 valign

代码片段1：css

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

代码片段2：页面

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

效果图：

5.9 shadowcolor & shadowoffset

代码片段1：css

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

代码片段2：页面

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

效果图：


Hidden

1 功能说明

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

例: <input type='hidden'/>

2 属性

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

3 Examples

示例hidden.xml

3.1 value

页面报文:

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

效果图:

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



Password

1 功能说明

Password 控件为密码输入框, 供用户输入密码时使用, 其输入的文本内容不可见 (不同平台的显示效果有差异), 并可以设定encryptmode属性对其内容进行加密。它是由input标签加type="password"属性实现的。

例: <input type="password"/>

2 属性

2.1 border

表示是否有边框, 1表示有边框, 0表示无边框
@default 1.

2.2 enable

指定控件是否可用, 即是否响应用户事件.
@value string true/false
@default true.

2.3 encryptmode

定义当前输入框内容的加密方式. 指定加密方式后，通过submit按钮完成form表单提交时,会自动做加密处理.
@value string 既定的加密方式.
支持的加密方式:
00(不加密)
01(一次一密,使用AES加密)
A0(证书加密,加密算法RSA)
A1(先证书加密后一次一密).
以上所有结果最后都会做uri编码.

2.4 hold

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

2.5 isorder

指定密码键盘是否按照正常的键盘顺序显示.
@value string true/false.
@default false.

2.6 substitute

指定密码框中的密码代替字符.
考虑到兼容性问题,默认效果不做统一要求.
iOS平台默认效果: "●".
AD平台效果: "*".

2.7 value

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

3 样式

3.1 background-color

设置背景色.

3.2 background-image

设置背景图片.

3.3 border

设置控件的边框样式。

3.4 border-radius

设置文本域四个边的圆角属性。

3.5 filter

设置渐变背景色或透明度

3.6 font-size

设置字体大小

3.7 height

指定控件高度
@default 24

3.8 text-align

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

3.9 width

指定控件宽度
@default 300

4 事件

4.1 onfocus

当输入框获得焦点时触发此事件.

4.2 onblur

当输入框失去焦点时触发此事件.

4.3 onchange

当输入框内容改变时触发此事件.

5 Examples

示例password.xml

5.1 position

代码片段1:css

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

代码片段2:页面

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

效果图:

5.2 display&visibility&hide

代码片段1:css

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

代码片段2:页面

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

效果图:

5.3 background-color&background-image&filter

代码片段1:css

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

代码片段2:页面

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

效果图:

5.4 font-size&text-align

代码片段1:css

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

代码片段2:页面

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

效果图:

5.5 border

代码片段1:css

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

代码片段2:页面

<body>
    ...
    <!-- border属性 -->
    <label>border=1，有边框:</label>
    <input type="password" class="father" border="1" value="password"/>
    <label>border=0，无边框:</label>
    <input type="password" class="father" border="0" value="password"/>
    <label>默认有边框:</label>
    <input type="password" class="father" value="password"/>
    <!-- border样式 -->
    <label>border(#FF0000):</label>
    <input type="password" class="father,borderOne" value="password"/>
    <label>border(10px #FF0000):</label>
    <input type="password" class="father,height_40,borderTwo" value="password"/>
    <label>border(10px solid #FF0000):</label>
    <input type="password" class="father,height_40,borderThree" value="password"/>
    ...
<body>

效果图:

5.6 border-radius

代码片段1:css

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

代码片段2:页面

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

效果图:

5.7 hold&enable

代码片段1:css

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

代码片段2:页面

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

效果图:

5.8 onfocus&onchange&onblur事件测试

代码片段1:css

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

代码片段2:lua

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

代码片段3:页面

<body>
    ...
    <!-- 事件响应测试 -->
    <label>onfocus事件:</label>
    <input type="password" class="father" value="password" onfocus="alert('onfocus')"/>
    <label>onchange事件:</label>
    <input type="password" class="father" value="password" onchange="alert('onchange')"/>
    <label>onblur事件:</label>
    <input type="password" class="father" value="password" onblur="alert('onblur')"/>
    <label>事件组合测试:</label>
    <input type="password" class="father" value="password" onfocus="alert('onfocus')" onchange="alert('onchange')" onblur="alert('onblur')"/>
    ...
<body>

效果图:

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

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

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

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

5.9 substitute

代码片段1:css

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

代码片段2:页面

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

效果图:

5.10 isorder

代码片段1:css

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

代码片段2:页面

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

效果图:

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

Radio

1 功能说明

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

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

name相同的radio控件构成一组，所有未指定name的radio被分为一组。同一组的radio选项之间是互斥的，即该组中只能有一个选项被选中。一个页面中可以有多组radio控件，不同组的选项可以被同时选中。

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

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

2 属性

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

2.1 checked

指定控件选项是否默认选中
@value string checked/true
若未指定checked/true的选项，默认该组中所有选项的初始状态为不被选中。

2.2 enable

指定控件是否可用，即是否响应用户事件
@value string true/false
@default true
可点击(enable="true")和不可点击(enable="false")两种状态下的显示样式效果可配置。

2.3 linebreakmode

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

2.4 numlines

指定固定文字显示的行数

2.5 text

指定显示在界面上的radio选项的文本。
@value string 任意的字符串
注：这里text属性的值被写在开闭两个标签之间，例：value123，其中"value123"为显示的文本，不能写作text="value123"格式。

2.6 shadowcolor

指定文本阴影的颜色
注：默认偏移量：(0,-1)。阴影无默认颜色，如果不给颜色则无阴影。

2.7 shadowoffset

指定文本阴影的偏移量
@default (0,-1)
注：Android平台不支持shadowoffset为一正一负。

2.8 valign

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

2.9 value

指定radio控件的value值
@value string 任意的字符串
注：value值不作为显示内容，仅作为上传服务器的参数值。

3 样式

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

3.1 background-color

设置背景色

3.2 background-image

设置背景图片

3.3 color

设置文本颜色

3.4 filter

设置渐变背景色或透明度

3.5 font-size

设置字体大小

3.6 font-style

指定文本的字体样式

3.7 font-weight

设置字体是否加粗显示

3.8 height

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

3.9 width

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

4 事件

4.1 onclick

针对用户的点击事件，并且控件在可用状态下，触发此事件。
注：radio的点击事件只有在用户切换选择控件时才触发。若用户点击了已被选择的控件，不需要触发点击事件。

5 Examples

示例radio.xml

5.1 position

代码片段1：css

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

代码片段2：页面

<body>
    <!-- positon:fixed 这是body第一个控件 -->
    <input type="radio" name="radio1" class="father,positionFixed">position:fixed,body第一个控件</input>
    <!-- positon:toplevel -->
    <input type="radio" name="radio1" class="father,positionToplevel">position:toplevel,不随页面滚动</input>
    <input type="radio" class="father,positionFixed">position:fixed,body最后一个控件</input>
</body>

效果图：

5.2 display & visibility & hide

代码片段1：css

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

代码片段2：页面

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

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

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

    <!-- hide && display -->
    <input type="radio" name="radio1" hide="true" class="father,display2">display=block,hide=true,应显示</input>
    <label>下方有display=none,hide=false的radio</label>
    <input type="
最低0.47元/天 解锁文章
gxf_style
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
EMP界面开发规范-界面标签
gxf_ming的博客
04-01 1294
控件支持属性和样式对照表 这里整理了控件支持的属性和样式，用于方便查阅及对照; 在各个控件的定义中有对其支持属性和样式的详细描述。 控件支持属性对照表控件支持样式对照表关于Lua中可以操作的样式及属性 1 控件支持属性对照表 下面的表格为具体控件对属性的支持情况： proper属性 name value text tagName hide focus e
EMP IDE开发
05-14
EMPIDE开发，介绍了EMP IDE的使用及相关技术
宇信易诚EMP入门开发指南.rar
09-12
新手入门参考文档，辅助入门。请结合[EMP&IDE; 交易开发实战手册]一起使用。
EMP前端页面组件开发文档
05-14
EMP前端页面组件开发，金融软件开发必备
从青铜到王者的路线，java编程从入门到实践
m0_57473261的博客
07-07 314
应聘求职 每年这个时候，都是应届生求职以及在职人员跳槽的高峰期。对于即将成为程序员的应届毕业生们。在求职过程中怎样确定目标公司和目标职位，大家在求职过程中要注意哪些细节?这些都是大家所关心的话题。 ①应聘渠道： ⑴学校招聘会； ⑵社会招聘渠道：Boss，企业官网等等。 ②应聘流程： 编写简历→投递简历→筛选简历→电话面试→（笔试）→面试→确定薪酬→入职→后续流程 简历书写 据统计，80%的简历都是不合格的。不少人事管理者抱怨收到的许多简历在格式上很精权。简历应该如何做到在格式上简洁明了，重点突出?求职信应该
eMP开发环境配置说明
仙剑的专栏
07-04 2548
安装配置JDK下载JDK1.8下载地址：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 安装过程此处从略。配置JDK环境JDK开发环境需要配置环境变量，主要是两个环境变量JAVA_HOME和CLASS_PATH。 1. 添加一个系统变量 JAVA_HOME ，路径为JDK的
EMP开发后台业务逻辑总结.doc
09-20
EMP Explorer作为开发工具，提供了图形化的界面来支持数据字典的编辑、服务定义的创建以及节点定义的管理，使得开发者能更直观地进行业务逻辑的构建和维护。 总结来说，EMP开发的后台业务逻辑涉及数据字典的规划与...
emp.rar_个人信息
09-23
2. **用户界面设计**：VB提供了丰富的控件库，如TextBox、ComboBox、ListBox、DataGridView等，用于构建用户交互界面。查阅员工信息可能通过ListBox或DataGridView显示，而修改和添加则可能涉及文本框和对话框。 3....
emp-react-project-template:EMP React 应用模板工程
05-27
React是由Facebook开发的开源JavaScript库，用于构建用户界面，尤其是单页应用（SPA）。它的核心理念是使用组件化的方式来组织代码，每个组件都是独立且可重用的，这使得代码结构清晰，易于维护。React通过虚拟DOM...
jdbc+servlet+jsp员工信息管理(emp表)
01-12
【jdbc】：全称Java Database Connectivity，是Java编程语言中用来规范客户端程序如何访问数据库的应用程序接口，提供了诸如查询和更新数据库中数据的方法。在本项目中，jdbc被用来连接和操作MySQL数据库，进行员工...
Eclipse Emp 详细介绍
01-18
EMF是Eclipse Modeling Framework的缩写，它是Eclipse的一个重要的子项目，如果翻译成中文就是“Eclipse建模框架”。
emp技术原理专业版
01-01
详细阐述了emp工作原理，触发过程及作用范围，时合爱好此类的人员阅览
jsp+javaBean实现的对Oracle数据库的emp表的增，删，改，查。
08-18
在这个项目中，JSP被用来创建用户界面，接收用户输入，并调用后台JavaBean进行数据处理。 2. **JavaBean**：JavaBean是符合特定规范的Java类，主要用于封装业务逻辑。在这个项目中，JavaBean包含了对Oracle数据库的...
eMP 服务开发说明
仙剑的专栏
03-21 2625
本文描述了开发 eMP 服务应用程序的通用步骤，本文的前提是 eMP 开发环境已经配置完成，请参考上一篇博文 “eMP 开发环境配置说明”。 环境确认 JDK 环境，需要JDK1.8及以上版本，Path变量已经添加JDK主目录。 Maven 环境，需要 Maven3 及以上版本，Path 变量已经添加 Maven 主目录，并且明确私服的地址，可以部署模块到私服上。 Git 环境，安装了 ...
如何在EMP2.2版本的前端列表组件中处理单、复选框
慢慢跟党学
04-12 904
目前在一些项目组中已经开始采用EMP2.2版本中的部分内容，其中就包括了前端页面的组件。在使用前端页面中的列表组件中，疑问比较多的是如何在列表中使用单、复选框以及单、复选框与列表组件原有的各种事件如何匹配。下面举个具体的复选框例子介绍如何使用：1、在列表中定义某个列采用复选框展现(emp:checkbox)，其中checkValue属性用于定义在哪些情况下该复选框被选中(例子中说明的是当id的值为
关于EasyUI多选，easyui datagrid 分页并保持checkbox选中状态
weixin_34290631的博客
12-24 598
2019独角兽企业重金招聘Python工程师标准>>> ...
关于用户批量操作checkbox选项的若干实际问题解决
不抛弃、不放弃：Aaron莫言
08-02 644
在实际的项目中,我们的项目有可能会需要我们完成这样的功能,就是对用户密码进行充值
java开发框架emp入门教程，实战解析
m0_56252652的博客
06-21 1248
咱先来聊聊Redis 像Redis的基础入门，掌握下图这几个列出来的知识点足以了。 进阶的话，就得下点功夫了，事务、主从复制、哨兵、集群等等之类的搞不明白你就上不去呀。 再看美团亿级流量Redis实战，Redis分布式锁、session、缓存与数据库一致性问题、缓存雪崩等之类的都是重中之重的技术点，必须掌握，没得商量。 看了这些个技术点，那么我现在就来考考你一些Redis面试问题（准备好，接招吧）： 为什么要用redis？ /为什么要用缓存？ 为什么要用redis而不用map/guava做缓存? 如
详情页返回列表页时保持原来的位置
gxf_ming的博客
06-14 8538
3种方法去实现, 1.设置锚点锚点1 锚点 锚点5 1111111 --> --> 2.缓存历史数据,包括cookies,sessionstorage sessionStorage.setItem("ke
分页查询EMP，每页3条
最新发布
09-02
要实现分页查询EMP表，每页显示3条记录，可以使用LIMIT语句来实现。具体的查询语句如下所示： SELECT * FROM EMP LIMIT 0,3; 这条查询语句中的LIMIT关键字用于指定从第0条记录开始，取3条记录。这样就可以实现每页显示3条记录的分页效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [详解SQLServer和Oracle的分页查询](https://download.csdn.net/download/weixin_38660918/14834660)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [SQL55 分页查询employees表，每5行一页，返回第2页的数据](https://blog.csdn.net/qq_28841515/article/details/123208498)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值