Repeater 添加图片至表格
2015-12-11 16:51
176 查看
学习Repeater,在网上看到一篇帖子:http://www.yixieshi.com/ucd/19980.html。按照帖子中的方法添加文字是可以的,但是添加图片是不能实现的。帖子中关于添加图片部分没有写完整。
参考资料:
1. http://wenda.axure.com.cn/question/181
2. http://www.iaxure.com/1281.html
通过参考上面两个帖子实现repeater添加图片。同时感谢网友“释然”。
知识点:
1. 因为安全性限制,不支持发布到网站后打开本地图片
2. 中继器中使用的图像生成原型后的默认位置是原型目录下的images目录的页面名称目录下面
以上两点尤为重要!
前奏说完了,开始操刀!
要实现的效果(动态添加中继器数据和图片):
Step1. 拖入repeater,并命名为:defaultRepeater
Step2. 设置repeater内部部件。
双击刚才拖入的deafultRepeater,按照下图设置内部部件,并给每个部件都分别命名
命名方法如下:
Step3. 设置repeater的数据集
点击下方的Repeater Dataset,按照下图设置数据集。
设置时注意:
1. 列名只可以为英文或字母,不可设置为中文。
2. 图片设置方法如下
右键点击image列中的某一项,选择“Import Image”,然后选择要添加的图片即可。
Step4. 设置 Repeater动作
(1) 设置文本
需要设置的文本包括:活动名称、活动状态、开始时间、结束时间。
设置完毕如下图所示:
设置文本的方法:
”Set text to“选择:rich text ,再点击“Edit text"
以活动名称的设置为例:
选择item.name。其他几项用同样的方法设置,依次选择item.state,item.start,item.end。
(2) 设置图片动作
需要注意的是,这里选择的是”value“
然后点击”fx“,选择item.image
Step5. 设置Repeater格式
我们把Repeater设置为水平布局,行间距为10,每页50项。
Step6. 添加文本和图片
这一步是最关键的步骤。我们需要给”添加“按钮设置动作,完成文本和图片的添加效果。
选中”添加“按钮,设置onclick事件,选择Repeater-->Datasets-->Add Rows
点击上图下方的”Add Rows“,会弹出:
在这里分别设置name,state,start,end,image。
这里name,state,start,end的设置方法是一样的。点击name中的fx,按照下图所示进行设置
这里的设置其实就是将输入的文本和Repeater中的列分别进行绑定和对应起来,使得添加的中继器数据和输入的文本内容一致。
name的设置:
state的设置:
start的设置:
end的设置:
image的设置:
这里尤其注意,Insert Variable Function中的设置的文件路径为:
images/repeater/[[img.substring(img.lastindexof('\\')+1)]]
之所以这么设置,原因就是上面知识点提到的2点。我们需要在工程下面的image/repeater目录(这个目录只要在axure的工程中按F8即可,在生成工程的文件路径下会找到)下放置要添加的图片才能正确的添加图片,并显示在本地预览中。我折腾了很久就是不显示图片的原因就是这一点没有搞明白,花费了很多精力。
以上设置完毕,点击F5预览,然后尝试添加数据和图片看看。
未添加前:
添加新的活动后:
资源下载:http://download.csdn.net/detail/songqingxi/9350775
参考资料:
1. http://wenda.axure.com.cn/question/181
2. http://www.iaxure.com/1281.html
通过参考上面两个帖子实现repeater添加图片。同时感谢网友“释然”。
知识点:
1. 因为安全性限制,不支持发布到网站后打开本地图片
2. 中继器中使用的图像生成原型后的默认位置是原型目录下的images目录的页面名称目录下面
以上两点尤为重要!
前奏说完了,开始操刀!
要实现的效果(动态添加中继器数据和图片):
Step1. 拖入repeater,并命名为:defaultRepeater
Step2. 设置repeater内部部件。
双击刚才拖入的deafultRepeater,按照下图设置内部部件,并给每个部件都分别命名
命名方法如下:
Step3. 设置repeater的数据集
点击下方的Repeater Dataset,按照下图设置数据集。
设置时注意:
1. 列名只可以为英文或字母,不可设置为中文。
2. 图片设置方法如下
右键点击image列中的某一项,选择“Import Image”,然后选择要添加的图片即可。
Step4. 设置 Repeater动作
(1) 设置文本
需要设置的文本包括:活动名称、活动状态、开始时间、结束时间。
设置完毕如下图所示:
设置文本的方法:
”Set text to“选择:rich text ,再点击“Edit text"
以活动名称的设置为例:
选择item.name。其他几项用同样的方法设置,依次选择item.state,item.start,item.end。
(2) 设置图片动作
需要注意的是,这里选择的是”value“
然后点击”fx“,选择item.image
Step5. 设置Repeater格式
我们把Repeater设置为水平布局,行间距为10,每页50项。
Step6. 添加文本和图片
这一步是最关键的步骤。我们需要给”添加“按钮设置动作,完成文本和图片的添加效果。
选中”添加“按钮,设置onclick事件,选择Repeater-->Datasets-->Add Rows
点击上图下方的”Add Rows“,会弹出:
在这里分别设置name,state,start,end,image。
这里name,state,start,end的设置方法是一样的。点击name中的fx,按照下图所示进行设置
这里的设置其实就是将输入的文本和Repeater中的列分别进行绑定和对应起来,使得添加的中继器数据和输入的文本内容一致。
name的设置:
state的设置:
start的设置:
end的设置:
image的设置:
这里尤其注意,Insert Variable Function中的设置的文件路径为:
images/repeater/[[img.substring(img.lastindexof('\\')+1)]]
之所以这么设置,原因就是上面知识点提到的2点。我们需要在工程下面的image/repeater目录(这个目录只要在axure的工程中按F8即可,在生成工程的文件路径下会找到)下放置要添加的图片才能正确的添加图片,并显示在本地预览中。我折腾了很久就是不显示图片的原因就是这一点没有搞明白,花费了很多精力。
以上设置完毕,点击F5预览,然后尝试添加数据和图片看看。
未添加前:
添加新的活动后:
资源下载:http://download.csdn.net/detail/songqingxi/9350775
相关文章推荐
- http协议
- 智能开发框架 JEECG 作者张代浩专访
- 《格局逆袭》读书笔记
- UVa 11463 - Commandos
- Beta版本冲刺第三天
- 1118 实验三 有限自动机的构造与识别
- 年末盛典-点亮你心中的CSDN 2015博客之星
- linux下基于TCP协议的多线程聊天室的搭建
- 【Codeforces Round 273 (Div 2)B】【贪心】 Random Teams n人分m组,可形成的最小朋友数和最大朋友数
- 机器学习技法作业7
- 浅析Java中的final关键字
- mysql设置编码
- 5.2.3、SSAS-维度-日期维度
- 5.2.2、SSAS-维度-父子维度
- iOS开发多线程篇—线程间的通信
- MondoDB介绍 Python与MongoDB用法,安装PyMongo
- Summary Ranges
- iOS8:把这些七招APP哭
- ECharts使用心得
- php解析json数组