EMP界面开发规范（2）

Image

• 功能说明
• 属性
  • autoplay
  • delay
  • enable
  • failed
  • istap
  • loading
  • src
• 样式
  • filter
  • height
  • width
• 事件
  • onclick
• Examples
  • position
  • display&hide&visibilidy
  • enable&onclick
  • filter-alpha
  • 不支持background-image&background-color&渐变色
  • 加载网络图片：src格式
  • width&height
  • loading&failed

1 功能说明

该标签主要用于展示图片。

注意：在使用该标签的时候样式中最好指定width&height,详情参见测试用例#width&height部分。

例：

2 属性

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

2.1 autoplay

指定gif图片是否自动播放
@value string true/false
@default true

2.2 delay

指定按钮点击的延时时间

2.3 enable

指定控件是否可以点击
@value string true/false
@default true

2.4 failed

指定img控件图片加载失败时的显示图片
@value string 图片路径,value格式同img的src属性.
@see loading

2.5 istap

指定是否需要支持点击暂停或播放
@value string true/false
@default true

注:

1. 如果设置了初始化后不默认播放,即autoplay=false,那此时设置istap无效,istap恒等于true,否则无法启动gif动画,gif将变得没有意义.
   
2. 如果设置了istap=true,那将不会响应img控件的onclick属性.
   
3. 如果所选gif图片本身无loopCount,则设置loopCount为0,循环播放,否则以实际loopCount属性设置.

2.6 loading

指定img控件图片加载过程中的加载图片
@value string 图片路径,value格式同img的src属性
@see failed

2.7 src

指定资源链接地址
@format1 local:image.png（加载本地资源，这里兼容没有local关键字的情况）
@format2 http:// | https:// | ewp_local://（加载网络资源）
@format3 format2?w=100&h=30（加载网络资源时可以另外指定w,h两个参数）
@format4 gif图片,格式同上三种,如果设置图片为gif图片的话,可以通过设置class.xml里面的属性autoplay(是否设置默认播放)及istap(是否支持点击暂停或继续).也可通过lua报文中img标签的属性来设置.

3 样式

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

3.1 filter

不支持渐变背景色，只支持透明度
@format progid(alpha='0.5')

3.2 height

指定控件高度
@default 30px

3.3 width

指定控件宽度
@default 30px

4 事件

4.1 onclick

指定图片的点击事件

5 Examples

示例代码地址：image.xml

5.1 position

代码片段1:css

代码片段2:页面

    
    

    
    
    ...
    
    

效果图:

---

5.2 display&hide&visibilidy

代码片段1:css

代码片段2:页面

    image对hide/display/visibility的支持

    
    下面的image有:hide=false

    
    下面的image有:hide=true

    

     
    下面的image有:display=block

    
    下面的image有:display=none

    

    
    下面的image有:visibility=visible

    
    下面的image有:visibility=hidden

    
    ...

效果图:

---

5.3 enable&onclick

代码片段1:css

代码片段2:lua

function click()
    window:alert("可以点击！！！")
end;

代码片段3:页面

    
    image对点击事件和enable的支持

    下面的image有:enable=true

    
    下面的image有:enable=false

    

效果图:

---

5.4 filter-alpha

代码片段1:css

代码片段2:页面

    
    image对filter:progid(alpha=...)的支持

    下面的image有:alpha=0.5

    
    下面的image有:alpha=0.1

    

效果图:

---

5.5 不支持background-image&background-color&渐变色

代码片段1:css

代码片段2:页面

    
    image不支持背景色，背景图，渐变色，下面三张应该显示图片a.png,第三张透明度不起作用

    
    
    

效果图:

---

5.6 加载网络图片：src格式

代码片段1:css

代码片段1:页面

    下面测试的是src加载网络图片，需要联网调试
    

    
    
    
    

    
    
    
    

效果图:

---

5.7 width&height

代码片段1:页面

    下面测试的是src加载两张没有给定宽高的图片
    

    

    

效果图:

在使用该标签的时候样式中最好指定width,height。
如果没有指定width,height
1.对于网络图片，如果src包含参数，则取参数w,h作为图片的显示宽高 。
2.对于本地图片或者src中未包含w,h参数的图片，取图片的原像素作为图片显示的宽高

对于上述的两种情况
情况1只是客户端做的兼容，这种写法并不被鼓励。更规范的写法是css中指定width,height。
情况2时，由于图片加载和控件绘制是异步的，如果控件绘制时图片仍未加载成功，会导致图片宽高为Image控件配置的宽高(参见#各平台对控件默认宽高的配置)而不是图片本身的宽高。

所以有时上面未指定宽高的图片会显示如下，而不是按照图片本身大小显示。这种情况多发生在第一次加载该图片的时候。

5.8 loading&failed

代码片段1:css

代码片段2:页面

    下面是张网络图片，图片存在能正确加载，先显示指定的正在加载图片，最后显示加载到的图片
    

    
    

    下面这张网络图片路径不正确，不能正确加载，先显示指定的正在加载图片，最后显示指定的加载失败图片
    

    

效果图:

1. 第一个img控件效果如下:
   先显示指定的加载图片:
   
   最后显示加载到的网络图片:
   
2. 第二个img控件效果如下:
   先显示指定的加载图片:
   
   最后显示指定的加载失败的图片:
   

---

Date	Note	Modifier
2015-04-08	增加属性loading,failed	lin.jitao
2015-04-09	增加src为gif图片的说明	lv.teyan
2015-08-05	增加loading,failed示例	bi.jiao
2015-11-30	增加delay属性支持	zhou.changjin
2015-12-23	补充默认宽高说明	zhou.changjin