logo

iMAG移动应用开发指南

Label

文本控件,用来显示文本内容

标签

标签名 描述 说明
label 文本标签 用来显示文本内容

属性

属性名 取值 描述
id String id编码
style String
label样式,包括:
text String label标签之间的文本内容
maxlines Integer >=0 设置文本的最大行数,超出部分将显示“...”。默认为0,表示不限制行数
copyable Boolean 文本是否可长按复制
true:可复制
false:不可复制
face Boolean 是否显示文字中的表情
true:显示表情
false:不显示表情,默认值
onclick Javascript 点击时触发的脚本

方法

方法名 参数 返回值 描述
css(name:String) name:样式名称 String 根据样式名称得到样式的值
css(name:String, value:String)
name:样式名称
value:样式值
None 设置单个样式
css(style:String) style:样式文本,多个样式用分号分隔 None 设置多个样式
css(style:Object) style:样式对象,键值对形式 None 设置多个样式

控件详解

区别于HTML,iMAG中文本内容必须包含在label标签之内。

● 设置文本颜色

<label style="color:red">红色字体</label>

效果:

● 设置字体大小

<label style="font-size:22">大字体</label>

效果:

● 设置字体粗细

<label style="font-weight:bold">粗体字</label>

效果:

● 设置斜体字

<label style="font-style:italic">斜体字</label>

效果:

● 设置下划线

<label style="text-decoration:underline">下划线</label>

效果:

● 设置删除线

<label style="text-decoration:line-through">删除线</label>

效果:

● 设置文字对齐方式

<label style="text-align:center;background:red;width:60;corner-radius:10;color:white">250</label>

效果:

当给Label设置宽度之后,Label中的文字默认是居左对齐的,设置样式text-align:center或text-align:right可以使文字居中或居右对齐。

● 使用CDATA标记

如果文本内容包含XML特殊符号<、&则需使用 CDATA来标记。如:

<label><![CDATA[D&G服装品牌。]]></label>

上面的例子因为含有&符号,需要使用CDATA括起来,否则会出现XML解析错误。
因此当数据是从后台数据库查询出来具体内容不能确定时需要统一使用CDATA来标记。

● 实现图文混排

label标签内可以嵌入简单的HTML,实现图文混排,这些标签包括:

<font face="" color="" size=""></font>
<a href=""></a>
<img src=""/>
<b></b>
<u></u>
<i></i>
<s></s>
<br/>
<p><p/>
<small></small>
<big></big>
&nbsp;

用法如下:

<label>
    <![CDATA[<a href="http://baike.baidu.com/view/1168245.htm">移动互联网</a>,
        就是将移动通信和互联网二者结合起来,成为一体。
        <img src="emoticon_ye.png"/><br/>
        在最近几年里,<font color="red">移动通信和互联网</font>
        成为当今世界发展最快、市场潜力最大、前景最诱人的两大业务,它们的增长速度都是
        <font color="#ABABAB"><i>任何预测家未曾预料到的</i></font>,
        所以<font color="green"><u>移动互联网</u></font>
        可以预见将会创造怎样的经济神话。
        <img src="emoticon_geili.png"/>]]>
</label>

效果:

说明
● 这里并不是真正的HTML,只是借用部分HTML标签来实现图文混排。所以只支持以上列出的HTML标签,未列出的标签不支持。
● 这里的标签是XHML格式,要符合XML规范,因此<br/>不能写成<br><img src=""/>不能写成<img src="">,要加斜杠"/",否则会解析出错。
● 因为含有特殊符号<、&,所以要加CDATA标记。
● Android版font不支持size属性,但可以用<small>和<big>来设置字体大小,如<small><small>文字</small></small>将字体缩小2个字号。
● a没有target属性,都是在新窗口中打开链接。
● a的href属性支持javascript脚本,如<a href="javascript:$page.open('index.xml');">打开页面</a>
● 这里的img是label内置的功能,不同于iMAG用来显示网络图片的Image控件。
● img支持资源图片和网络图片。只有文件名是资源图片,如<img src="icon.png"/>
带路径的是网络图片,如<img src="http://www.baidu.com/img/baidu_sylogo1.gif"/>
● Android版label内置的img可以显示GIF图片,但不支持播放GIF动画

● 设置文本超链接

<label><![CDATA[<a href="http://weibo.com">新浪微博</a>]]></label>

效果:

● 设置链接执行脚本

<label><![CDATA[<a href="javascript:$page.open('index.xml');">打开页面</a>]]></label>

● 限制文本行数

<label maxlines="1">移动互联网,就是将移动通信和互联网二者结合起来,成为一体。</label>

效果:

● 长按复制文本

<label copyable="true">
	<![CDATA[<a href="http://baike.baidu.com/view/1168245.htm">移动互联网</a>,
		就是将移动通信和互联网二者结合起来,成为一体。
		<img src="emoticon_ye.png"/><br/>
		在最近几年里,<font color="red">移动通信和互联网</font>
		成为当今世界发展最快、市场潜力最大、前景最诱人的两大业务,它们的增长速度都是
		<font color="#ABABAB"><i>任何预测家未曾预料到的</i></font>,
		所以<font color="green"><u>移动互联网</u></font>
		可以预见将会创造怎样的经济神话。
		<img src="emoticon_geili.png"/>]]>
</label>

效果:

● 切割拉伸背景

<label style="background:chatfrom_bg_normal.png 50% 60%;padding:10 10 15 20;">移动互联网,就是将移动通信和互联网二者结合起来,成为一体。</label>

效果:

上面这个例子背景会随着文本的多少而变大,但不会变形和失真,这是因为背景图片是先切割之后再拉伸的。
这个背景图片的原图如下,大小为93x80:

label的样式设置了background:chatfrom_bg_normal.png 50% 65%,其中50% 65%是分别设置竖线和横线对图片进行切割,背景切割完再拉伸不会有失真。50% 65%换算成像素则分别为93*50%=47px和80*65%=52px,切割位置距左边和顶部分别为47px和52px,用百分比表示是为了适配不同屏幕分辨率的图片。

● 修改文本内容

$('test_label').text = '修改后文本内容';
$('test_label').text = '修改后<font color="red">文本</font>内容';

说明:如果设置的文本含有简单html则需符合xml的格式,否则会提示格式错误。

● 修改文本样式

$('test_label').css('color:red; font-size:20; font-weight:bold');
$('test_label').css({'color':'white', 'background':'darkgray', 'corner-radius':'5'});

var label = $('test_label');
label.css('color', 'white');
label.css('background', 'gradient(gray)');

● 隐藏文本

$('test_label').css('display', 'none');
$('test_label').css('display', 'hidden');

说明:none和hidden的区别是hidden只隐藏控件,但会保留控件所占的位置。

● 显示文本

$('test_label').css('display', 'block');

● 动态创建文本

var label = $C('<label id="test_label" style="color:blue;font-size:14">文本内容</label>');
$('test_row').add(label);

● 文本点击事件

<label id="test_label" style="color:blue" onclick="hint(this.text)">测试文本(点我)</label>

示例下载

点此下载label相关的示例代码:imag-label.zip