logo

iMAG移动应用开发指南

Icon

图标控件,显示资源图片或手机本地图片

标签

标签名 描述 说明
icon 图标标签 显示资源图片或手机本地图片

属性

属性名 取值 描述
id String id编码
style String
icon样式,包括:
src String 资源图片的src为文件名,手机本地图片的src为文件绝对路径
badge String 图标右上角的提示信息
effect String 给图片加上效果:effect="round"用来显示圆形图标
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 设置多个样式

控件详解

注意:Icon只用来显示资源图片,显示网络图片用Image控件。

● 显示图标

<icon src="icon_tv.png"/>

效果:

说明:显示资源图片时src为文件名,显示手机本地图片时src为文件绝对路径。
如:<icon src="icon_tv.png"/>显示的是资源图片 <icon src="/sdcard/images/icon_tv.png"/>则显示的是手机sd卡中的某一张图片

资源图片有两种:
1.客户端安装包里的打包好的图片。
2.客户端第一次启动时从服务器端下载的图片。
如果两者有重名,则会优先取服务器端的图片,这样可以动态替换已经打包好的图片。

● 设置图标大小

<icon src="icon_tv.png" style="width:100;height:50"/>

效果:

说明:icon默认会显示成图片本来的大小,也可以通过width和height样式来设置icon的大小,但这样会导致图片缩放变形

注意:多数情况下需要给icon设置一个宽度,如果不设置宽度图片将以本来像素大小显示,这样在不同屏幕下显示大小会有差异。而高度不用设置,图片默认会按高宽等比显示。

● 透明图标

<icon src="icon_tv.png" style="alpha:0.3"/>

效果:

说明:给图标加上alpha透明值

● GIF动画图标

<icon src="icon_gif.gif"/>

效果:

说明:icon可以播放gif动画

● 带提示图标

<icon src="icon_email.png" badge="25"/>

效果:

说明:图标的右上角带提示信息

● 圆形图标效果

<icon src="portrait.png" effect="round"/>

效果:

说明:让原本方形的图标显示成圆形(支持png和jpg,对gif图片无效)

脚本示例

● 修改图标内容

$('test_icon').src = 'icon_tv.png'
$('test_icon').src = '/sdcard/images/icon_tv.png'

说明:icon可以是手机SD卡上的图片

● 修改图标样式

$('test_icon').css('width:100;height:100');

● 隐藏图标

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

● 显示图标

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

● 动态创建图标

var icon = $C('<icon id="test_icon" src="head_normal.png"/>');
$('test_row').add(icon);

● 点击图标

<icon src="head_normal.png" onclick="hint('点击测试')/>

示例下载

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