Checkbox
1 功能说明
-
Checkbox 控件用来表示复选框,即选项之间不互斥,用户可以同时选中多个选项。它是由input标签加
type="checkbox"
属性实现的。例:
<input type="checkbox">text</input>
checkbox中内容默认垂直居中水平居左,图片与文字部分,垂直方向中心点对齐。根据文字内容自 动计算换行。
- 在没有样式的情况下,控件大小由内容及title图片计算获得,最宽不应超过父控件宽度减去左右 边距。当文字内容不能在一行完全显示时,需要换行显示。
- 样式指定高度。当大于title图片高度,图片按照原始大小显示,当小于title图片高度,图片会 适当缩放,以显示完整图片。
- 样式指定宽度。当文字内容在一行不能完全显示时,需要换行显示。
- 样式指定宽度和高度。当设定区域不足以显示所有文字时,文字将会被截取。
-
水平对齐说明
text-align样式里处理left、center、right这三个值,其他值都无效,如果是其他值,则不生 效,然后去判断属性align的值,也是这三个值,如果属性也不是这三个值,就按默认的水平左对齐
2 属性
全局属性以及具体说明参见属性介绍
2.1 checked
指定控件选项是否默认选中。
@value string checked/true/false
2.2 enable
指定控件是否可用,即是否响应用户事件。
@value string true/false
@default true
可点击(enable="true")和不可点击(enable="false")两种状态下的显示样式效果可配置。
注:默认值为true,除了true和false外其他值都按默认值处理。
2.3 linebreakmode
指定文字被截取时省略号的位置。
@value string head/middle/tail/none
@default none
2.4 numlines
指定固定文字显示的行数。
2.5 shadowcolor
指定文本阴影的颜色。
注意:默认偏移量:(0,-1)。阴影无默认颜色,如果不给颜色则无阴影。
2.6 shadowoffset
指定文本阴影的偏移量。
@default (0,-1)
注:Android平台不支持shadowoffset为一正一负。
2.7 text
指定显示在界面上的checkbox选项的文本。
@value string 任意的字符串
注:这里text属性的值被写在开闭两个标签之间,例:value123
,其中"value123"为显示的文本,不能写作text="value123"
格式。
2.8 valign
指定文本的垂直居中方式。
@value string top/middle/bottom
@default middle
2.9 align
指定文本的水平居左方式。
@value string left/center/right
@default left
2.10 value
指定checkbox控件的value值。
@value string 任意的字符串
注:value值不作为显示内容,仅作为上传服务器的参数值。
3 样式
全局样式以及具体说明参见样式介绍
3.1 background-color
设置背景色。
3.2 background-image
设置背景图片。
3.3 color
设置字体颜色。
3.4 filter
设置渐变背景色或透明度。
3.5 font-size
设置字体大小。
3.6 font-style
指定文本的字体样式。
3.7 font-weight
设置字体是否加粗显示。
3.8 height
指定控件高度
@default 根据文字内容计算
3.9 width
指定控件宽度
@default 根据文字内容计算,但宽度不可超出父控件显示范围
4 事件
4.1 onclick
针对用户的点击事件,并且控件在可用状态下,触发此事件。
checkbox点击时会切换选中状态,因此再次点击也需要触发onclick事件。
5 Examples
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
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
5.1 position
代码片段1:css
<style>
.father{left:20px;width:280px;height:30px;font-size:15px;}
.positionFixed{position:fixed;}
.positionToplevel{position:toplevel;left:20px;top:32px;}
...
</style>
代码片段2:页面
<body>
<!-- positon:fixed 这是body第一个控件-->
<input type="password" class="father,positionFixed" value="password"/>
<!-- positon:toplevel-->
<input type="password" class="father,positionToplevel" value="password"/>
...
<!-- positon:fixed 这是body最后一个控件-->
<input type="password" class="father,positionFixed" value="password"/>
<body>
效果图:
5.2 display&visibility&hide
代码片段1:css
<style>
.label {font-size:12px;height:20px;left:20px;width:280px;color:#0000FF;}
.father{left:20px;width:280px;height:30px;font-size:15px;}
.display1{display:none;}
.display2{display:block;}
.visibility1{visibility:visible;}
.visibility2{visibility:hidden;}
...
</style>
代码片段2:页面
<body>
...
<!-- display -->
<label>display=block,显示:</label>
<input type="password" class="father,display2" value="password"/>
<label>下方有display=none的input,不显示不占位:</label>
<input type="password" class="father,display1" value="password"/>
<!-- visibility -->
<label>visibility=visible,显示:</label>
<input type="password" class="father,visibility1" value="password"/>
<label>下方有visibility=hidden的input,不显示占位:</label>
<input type="password" class="father,visibility2" value="password"/>
<!-- hide -->
<label>hide=false,显示:</label>
<input type="password" hide="false" class="father" value="password"/>
<label>下方有hide=true的input,不显示不占位:</label>
<input type="password" hide="true" class="father" value="password"/>
<!-- hide display -->
<label>display=block+hide=true,应显示:</label>
<input type="password" hide="true" class="father,display2" value="password"/>
<label>下方有display=none+hide=false的input:</label>
<input type="password" hide="false" class="father,display1" value="password"/>
<!-- hide visibility -->
<label>visibility=visible+hide=true,显示:</label>
<input type="password" class="father,visibility1" hide="true" value="password"/>
<label>下方有visibility=hidden+hide=false的input:</label>
<input type="password" class="father,visibility2" hide="false" value="password"/>
<!-- display visibility -->
<label>visibility=visible+display=none,显示:</label>
<input type="password" class="father,display1,visibility1" value="password"/>
<label>下方有visibility=hidden+display=block的input:</label>
<input type="password" class="father,display2,visibility2" value="password"/>
...
<body>
效果图:
5.3 background-color&background-image&filter
代码片段1:css
<style>
.label{font-size:12px;height:20px;left:20px;width:280px;color:#0000FF;}
.father{left:20px;width:280px;height:30px;font-size:15px;}
.background_color {background-color:#FFFF00;}
.background_image {background-image:url(bg_img.png);}
.filter1 {filter:progid(startColorStr='#FFFF00',endColorStr='#ff0000',gradientType='1',alpha='0.5');}
.filter2 {filter:progid(alpha='0.5'); background-color:#FFFF00;}
...
</style>
代码片段2:页面
<body>
...
<!-- background-color -->
<label>背景色background-color:</label>
<input type="password" class="father,background_color" value="password"/>
<!-- background-image -->
<label>背景图background-image:</label>
<input type="password" class="father,background_image" value="password"/>
<!-- filter -->
<label>filter渐变色:</label>
<input type="password" class="father,filter1" value="password"/>
<label>filter透明度:</label>
<input type="password" class="father,filter2" value="password"/>
...
<body>
效果图:
5.4 font-size&text-align
代码片段1:css
<style>
.label {font-size:12px;height:20px;left:20px;width:280px;color:#0000FF;}
.father{left:20px;width:280px;height:30px;font-size:15px;}
.fontSize{font-size:30px;}
.textAlignLeft{text-align:left;}
.textAlignCenter{text-align:center;}
.textAlignRight{text-align:right;}
...
</style>
代码片段2:页面
<body>
...
<!-- font-size -->
<label>font-size=30px</label>
<input type="password" class="father,fontSize" value="password"/>
<!-- text-align -->
<label>text-align居左:</label>
<input type="password" class="father,textAlignLeft" value="password"/>
<label>text-align居中:</label>
<input type="password" class="father,textAlignCenter" value="password"/>
<label>text-align居右:</label>
<input type="password" class="father,textAlignRight" value="password"/>
...
<body>
效果图:
5.5 border
代码片段1:css
<style>
.label{font-size:12px;height:20px;left:20px;width:280px;color:#0000FF;}
.father{left:20px;width:280px;height:30px;font-size:15px;}
.borderOne{border:#FF0000;}
.borderTwo{border:10px #FF0000;}
.borderThree {border:10px solid #FF0000;}
.height_40{height:40px;}
...
</style>
代码片段2:页面
<body>
...
<!-- border属性 -->
<label>border=1,有边框:</label>
<input type="password" class="father" border="1" value="password"/>
<label>border=0,无边框:</label>
<input type="password" class="father" border="0" value="password"/>
<label>默认有边框:</label>
<input type="password" class="father" value="password"/>
<!-- border样式 -->
<label>border(#FF0000):</label>
<input type="password" class="father,borderOne" value="password"/>
<label>border(10px #FF0000):</label>
<input type="password" class="father,height_40,borderTwo" value="password"/>
<label>border(10px solid #FF0000):</label>
<input type="password" class="father,height_40,borderThree" value="password"/>
...
<body>
效果图:
5.6 border-radius
代码片段1:css
<style>
.father{left:20px;width:280px;height:30px;font-size:15px;}
.background_color{background-color:#FFFF00;}
.background_image{background-image:url(bg_img.png);}
.filter1{filter:progid(startColorStr='#FFFF00',endColorStr='#FF0000',gradientType='1',alpha='0.5');}
.filter2{filter:progid(alpha='0.5'); background-color: #FFFF00;}
.textAlignLeft{text-align:left;}
.textAlignCenter{text-align:center;}
.textAlignRight{text-align:right;}
.borderRadiusFour{border-radius: 35px 20px 0px 10px;}
.borderRadiusOne{border-radius:10px;}
...
</style>
代码片段2:页面
<body>
...
<!-- border-radius -->
<label>borderRadius(35px 20px 0px 10px):</label>
<input type="password" class="father,borderRadiusFour" value="password"/>
<label>borderRadius(10px):</label>
<input type="password" class="father,borderRadiusOne" value="password"/>
<!-- border-radius background-color-->
<label>背景色+border-radius(35px 20px 0px 10px):</label>
<input type="password" class="father,borderRadiusFour,background_color" value="password"/>
<label>背景色+border-radius:(10px):</label>
<input type="password" class="father,borderRadiusOne,background_color" value="password"/>
<!-- border-radius background-image-->
<label>背景图+border-radius(35px 20px 0px 10px):</label>
<input type="password" class="father,borderRadiusFour,background_image" value="password"/>
<label>背景图+border-radius(10px):</label>
<input type="password" class="father,borderRadiusOne,background_image" value="password"/>
<!-- border-radius filter -->
<label>渐变色+borderRadius(35px 20px 0px 10px):</label>
<input type="password" class="father,filter1,borderRadiusFour" value="password"/>
<label>alpha+borderRadius(35px 20px 0px 10px):</label>
<input type="password" class="father,filter2,borderRadiusFour" value="password"/>
<!-- border-radius text-align-->
<label>border-radius(35px 20px 0px 10px)+居左:</label>
<input type="password" class="father,textAlignLeft,background_color,borderRadiusFour" value="password"/>
<label>border-radius(35px 20px 0px 10px)+居中:</label>
<input type="password" class="father,textAlignCenter,background_color,borderRadiusFour" value="password"/>
<label>border-radius(35px 20px 0px 10px)+居右:</label>
<input type="password" class="father,textAlignRight,background_color,borderRadiusFour" value="password"/>
...
<body>
效果图:
5.7 hold&enable
代码片段1:css
<style>
.label{font-size:12px;height:20px;left:20px;width:280px;color:#0000FF;}
.father{left:20px;width:280px;height:30px;font-size:15px;}
...
</style>
代码片段2:页面
<body>
...
<!-- hold -->
<label>hold属性,显示输入提示文字:</label>
<input type="password" hold="hold:输入提示文字" class="father"/>
<!-- enable -->
<label>enable=true,控件可用:</label>
<input type="password" enable="true" class="father" value="password"/>
<label>enable=false,控件不可用:</label>
<input type="password" enable="false" class="father" value="password"/>
...
<body>
效果图:
5.8 onfocus&onchange&onblur事件测试
代码片段1:css
<style>
.label {font-size:12px;height:20px;left:20px;width:280px;color:#0000FF;}
.father{left:20px;width:280px;height:30px;font-size:15px;}
...
</style>
代码片段2:lua
<script type="text/x-lua">
function alert(eventName)
window:alert("这是".. eventName .."事件!");
end;
</script>
代码片段3:页面
<body>
...
<!-- 事件响应测试 -->
<label>onfocus事件:</label>
<input type="password" class="father" value="password" onfocus="alert('onfocus')"/>
<label>onchange事件:</label>
<input type="password" class="father" value="password" onchange="alert('onchange')"/>
<label>onblur事件:</label>
<input type="password" class="father" value="password" onblur="alert('onblur')"/>
<label>事件组合测试:</label>
<input type="password" class="father" value="password" onfocus="alert('onfocus')" onchange="alert('onchange')" onblur="alert('onblur')"/>
...
<body>
效果图:
将光标放入"onfocus事件"的密码框中,alert函数响应,如下图:
改变"onchange事件"密码框中的文字内容,alert函数响应,如下图:
将光标放入"onblur事件"的密码框中再移出,alert函数响应,如下图:
"事件组合测试"密码框可以响应onfocus、onchange、onblur三种事件。
5.9 substitute
代码片段1:css
<style>
.label{font-size:12px;height:20px;left:20px;width:280px;color:#0000FF;}
.father{left:20px;width:280px;height:30px;font-size:15px;}
...
</style>
代码片段2:页面
<body>
...
<!-- substitute -->
<label>substitute="●":</label>
<input type="password" class="father" value="password" substitute="●"/>
<label>substitute="*":</label>
<input type="password" class="father" value="password" substitute="*"/>
...
<body>
效果图:
5.10 isorder
代码片段1:css
<style>
.label{font-size:12px;height:20px;left:20px;width:280px;color:#0000FF;}
.father{left:20px;width:280px;height:30px;font-size:15px;}
...
</style>
代码片段2:页面
<body>
...
<!-- isorder -->
<label>isorder=true:</label>
<input type="password" class="father" isorder="true" value="password"/>
<label>isorder=false:</label>
<input type="password" class="father" isorder="false" value="password"/>
...
<body>
效果图:
- isorder=true,密码键盘按正常顺序显示,效果如下图:
- isorder=false,密码键盘不按正常顺序显示,效果如下图:
Radio
1 功能说明
Radio 控件用来表示单选按钮。单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中,之前选中的按钮就变为非选中的。它是由input标签加type="radio"
属性实现的。
例:<input type="radio">text</input>
name相同的radio控件构成一组,所有未指定name的radio被分为一组。同一组的radio选项之间是互斥的,即该组中只能有一个选项被选中。一个页面中可以有多组radio控件,不同组的选项可以被同时选中。
radio中内容默认垂直居中水平居左,图片与文字部分,垂直方向中心点对齐。根据文字内容自动计算换行。
- 在没有样式的情况下,控件大小由内容及title图片计算获得,最宽不应超过父控件宽度减去左右边距。当文字内容不能在一行完全显示时,需要换行显示。
- 样式指定高度。当大于title图片高度,图片按照原始大小显示,当小于title图片高度,图片会适当缩放,以显示完整图片。
- 样式指定宽度。当文字内容在一行不能完全显示时,需要换行显示。
- 样式指定宽度和高度。当设定区域不足以显示所有文字时,文字将会被截取。
2 属性
全局属性以及具体说明参见属性介绍
2.1 checked
指定控件选项是否默认选中
@value string checked/true
若未指定checked/true的选项,默认该组中所有选项的初始状态为不被选中。
2.2 enable
指定控件是否可用,即是否响应用户事件
@value string true/false
@default true
可点击(enable="true")和不可点击(enable="false")两种状态下的显示样式效果可配置。
2.3 linebreakmode
指定文字被截取时省略号的位置
@value string head/middle/tail/none
@default none
2.4 numlines
指定固定文字显示的行数
2.5 text
指定显示在界面上的radio选项的文本。
@value string 任意的字符串
注:这里text属性的值被写在开闭两个标签之间,例:value123
,其中"value123"为显示的文本,不能写作text="value123"
格式。
2.6 shadowcolor
指定文本阴影的颜色
注:默认偏移量:(0,-1)。阴影无默认颜色,如果不给颜色则无阴影。
2.7 shadowoffset
指定文本阴影的偏移量
@default (0,-1)
注:Android平台不支持shadowoffset为一正一负。
2.8 valign
指定文本的垂直居中方式
@value string top/middle
@default middle
2.9 value
指定radio控件的value值
@value string 任意的字符串
注:value值不作为显示内容,仅作为上传服务器的参数值。
3 样式
全局样式以及具体说明参见 * 样式介绍
3.1 background-color
设置背景色
3.2 background-image
设置背景图片
3.3 color
设置文本颜色
3.4 filter
设置渐变背景色或透明度
3.5 font-size
设置字体大小
3.6 font-style
指定文本的字体样式
3.7 font-weight
设置字体是否加粗显示
3.8 height
指定控件高度
@default 根据文字内容计算
3.9 width
指定控件宽度
@default 根据文字内容计算,但宽度不可超出父控件显示范围
4 事件
4.1 onclick
针对用户的点击事件,并且控件在可用状态下,触发此事件。
注:radio的点击事件只有在用户切换选择控件时才触发。若用户点击了已被选择的控件,不需要触发点击事件。
5 Examples
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="