完整word版使用Axure实现电商产品列表复杂原型Word下载.docx
- 文档编号:19272583
- 上传时间:2023-01-04
- 格式:DOCX
- 页数:16
- 大小:871.18KB
完整word版使用Axure实现电商产品列表复杂原型Word下载.docx
《完整word版使用Axure实现电商产品列表复杂原型Word下载.docx》由会员分享,可在线阅读,更多相关《完整word版使用Axure实现电商产品列表复杂原型Word下载.docx(16页珍藏版)》请在冰豆网上搜索。
向页操作区拖入中继器元件,在右侧的属性栏中增加了一项中继器独有的“每项加载时"
事件及中继器数据表,如图4.3所示。
3中继器的独有事件
双击进入中继器面板,此时面板中只有一个矩形元件(无用途,直接删去),如图4.4所示。
4中继器内部样式
向面板中添加所需要的元件(文本元件设置为“只读”)。
由上向下命名为name、price、Pro、img。
其中,name、price为单行文本元件(单行文本元件不能对文本进行换行),Pro为多行文本元件,如图4。
5所示.
5中继器中的排版样式
在软件右侧的中继器数据表中新增列,并为新增列命名(中继器中的列名不可以使用中文字符,否则会使设置无效),同时填入所需的数据值,如图4.6所示。
图4.6列名及数据
其中,img列的图片采用右击导入方式实现,如图4.7所示。
7图片的导入
数据插入完成后,为中继器添加“每项加载时"
事件。
设置文本,选中“name(文本框)”复选框,设置文本框的值为Item.name。
设置文本,选中“price(文本框)"
复选框,设置文本框的值为Item。
price。
设置文本,选中“Pro(文本框)”复选框,设置文本框的值为Item。
Pro.设置图片,选中“pic(图片)"
复选框,设置Default值为Iitem。
img(注:
Item函数返回指定集中的元组),如图4。
8所示。
8设置加载时事件
文本值的设置方法:
以“name(文本框)”为例。
单击
图标,弹出“编辑文本”对话框.单击“插入变量或函数”,单击“中继器/数据集"
,选择Item.name。
单击“确定”按钮,完成文字值的设置,如图4.9所示。
图4.9文字值函数的设置
文本值设定后对各项数据的页面总体排列样式进行设置,主要是对布局、是否分页、间距进行设置,如图4.10所示。
10样式设置
设置完成后即可在页面中看到产品列表效果,如图4。
11所示。
11数据的页面展示样式
步骤2:
产品的新增
制作数据输入的文本输入框,分别命名为z_name、z_price、z_pro、z_img,选中4个输入框和对应文本,右击转换为动态面板,命名为“数据”,设置为隐藏。
制作“新增”按钮,右击转换为动态面板,命名为“新增"
。
添加状态2,制作同样式的按钮“保存”。
新增模块的样式如图4.12所示。
12数据新增的样式
设置交互事件。
在录入商品信息时,名称和价格不能为空。
设置文本提示,命名为“提示1”。
将提示内容“产品名称和价格不能为空”设置为隐藏.
添加名称文本框的失去焦点时事件,设置判断条件为“如果文字元件为空时"
,设置新态面板“增动"
中按钮“保存"
的状态为“禁用”.显示提示,等待1000毫秒,隐藏提示,设置动态面板“新增"
中按钮“保存”的状态为“启动"
,如图4.13所示(价格文本框的设置方法与此相同)。
13文本元件为空时的设置
图片文本框的设置。
在属性栏中将图片文本框的类型设置为文件.
设置动态面板“新增”的交互事件。
为状态1中的按钮“新增”添加鼠标单击时事件,显示动态面板“数据"
设置动态面板“新增”的状态为状态2,如图4。
14所示。
图4.14按钮“新增”的状态设置
为状态2中的按钮“保存”设置鼠标单击时事件。
如果文本元件z_name与z_price为空,禁用动态面板“新增”中的按钮“保存”。
显示提示文字,等待1000毫秒,隐藏提示文字,启用动态面板“新增”中的按钮“保存”,如图4。
15所示。
图4.15文本元件为空时的设置
如果文本元件z_name与z_price都不为空,设置添加行1为中继器,隐藏动态面板“数据"
设置动态面板“新增”为状态1,如图4。
16所示。
16文字元件都不为空时的设置
其中,添加行1为中继器的设置如图4。
17所示。
单击“中继器>
数据集〉添加行”选中“(中继器)”复选框。
单击“添加行"
按钮,弹出“添加行到中继器”对话框。
单击
弹出变量“编辑值"
对话框。
添加局部变量LVAR1,为文字元件z_name的值。
插入局部变量LVAR1,单击“确定”按钮。
图4.17文本变量的添加
Price列与Pro列的添加方式同name列,为img列选择导入图片,单击“确定”按钮完成添加。
最终效果,如图4.18所示.
18数据添加的最终效果
步骤3:
产品信息的修改
在中继器内部添加单行文字元作为新价格输入框,命名为price_n。
添加多行文字元件作为商品简介输入框,命名为pro_n。
添加单行文字作为提示语,元件命名为提示2,文字内容为“商品价格必填,不能为空”。
添加一个按钮,转换为动态面板,命名为“修改”(页面效果如图4。
19所示)。
双击动态面板“修改”,新增状态2,进入状态2,添加两个按钮:
保存,取消。
19修改界面制作。
设置文本元件price_n、pro_n、提示2为隐藏.
为动态面板“修改”状态1中的“修改"
按钮添加鼠标单击时事件:
显示文本元件price_n与pro_n,设置动态面板“修改"
的状态为状态2。
为动态面板“修改"
状态2中的“保存"
按钮添加鼠标单击时事件:
如果文字元件price_n的值为空,设置动态面板“修改”中“保存”按钮为禁用状态.显示文本元件“提示2"
,等待1000毫秒,隐藏文本元件“提示2”,设置动态面板“修改”中“保存”按钮的状态为启用,隐藏文本元件“提示2”,如图4.20所示.
图4.20当文字元件price_n为空时“保存"
按钮的设置
如果文字元件price_n不为空,标记行,选中中继器复选框,选中This单选按钮。
更新行,选中中继器复选框,选中“已标记"
单选按钮,选择列price,Value函数设为局部变量“LVAR1”(声明局部变量LVAR1为文本元件price_n)。
更新行,选中中继器复选框,选中“已标记”单选按钮,选择列pro,Value函数设为局部变量“LVAR1”(声明局部变量LVAR1为文本元件pro_n)。
取消标记,选中“中继器”复选框,选中This单选按钮.设置动态面板“修改”的状态为状态1,如图4。
21所示。
图4.21当文字元件price_n不为空时“保存”按钮的设置
为动态面板“修改”状态2中的“取消”按钮添加鼠标单击时事件:
设置文本元件pro_n与price_n为隐藏,设置动态面板“修改"
为状态1,如图4。
22所示.
图4.22单击“取消”按钮时的交互设置
最终效果图如图4。
23所示。
图4.23修改功能最终效果
步骤4:
产品信息的删除
在中继器页面右下角添加删除按钮,设置鼠标单击时交互事件:
删除行,选中“中继器”复选框,选择“This”单选按钮,如图4。
24所示。
24删除按钮的交互设置
步骤5:
产品信息的查询
在产品列表右上部应用文本元件制作文本输入框“查找”(提示内容为:
请输入产品名称)和按钮“搜索”。
设置“搜索”按钮的单击交互事件:
如文本元件“查找”不为空时,如图4。
25所示。
25文本元件“查找"
不为空
添加筛选,选中中继器和移除其他筛选复选框,设置名称为“产品”,设置条件为:
中继器中的产品名与查找框中的文字相同,如图4。
26所示。
图4.26查找框不为空时搜索”按钮“的交互设置
设置条件:
如文本元件“查找"
为空时。
设置交互为移除筛选,选中“中继器”和“移除全部筛选"
复选框,如图4。
27所示.
27查找框为空时“搜索”按钮的交互设置
通过步骤5的设置即可完成查找功能的实现.
步骤6:
产品信息的排序
制作两个按钮:
默认排序,价格从低到高.将“价格从低到高”按钮转化为动态面板,命名为“排序”,双击动态面板,添加状态2,再添加按钮“价格从高到低"
到状态2。
设置“默认排序”按钮的鼠标单击时事件,移除筛选,选中“中继器"
和“移除全部排序"
复选框,如图4.28所示。
图4.28按钮“默认排序”的交互设置
进入动态面板“排序”状态1页面,设置“价格从高到低"
按钮的鼠标单击事件为:
添加排序,选中“中继器”复选框,设置名称为“降序排列"
,属性为price,排序类型为Number,顺序为“降序”.设置动态面板“排序”的状态为“状态2”,如图4。
29所示。
29“价格从高到低”按钮的交互事件
进入动态面板“排序”的状态2页面,设置“价格从低到高”按钮的鼠标单击事件为:
添加排序,选中“中继器”复选框,设置名称为“升序”,属性为price,排序类型为Number,顺序为“升序”。
设置动态面板“排序”的状态为“状态1"
,如图4.30所示。
图4.30“价格从低到高”按钮的交互事件
步骤7:
产品信息的翻页
制作两个按钮“上一页”和“下一页”。
为“上一页”按钮添加鼠标单击时事件:
设置当前显示页面,选中“中继器”复选框,选择页面为Previous(Previous翻译为“以前的”),如图4。
31所示.
31“上一页”按钮的交互
为“下一页”按钮添加鼠标单击时事件:
设置当前显示页面,选中“中继器”复选框,选择页面为Next(Next翻译为“下一个”),如图4。
32所示.
图4.32“下一页"
按钮的交互
通过本案例制作,讲解了中继器的功能和应用。
要注意中继器使用时,列名不是直接显示的,需要其他元件来实现。
中继器有一个默认的行序号索引项,只需要增加一列序号列,绑定信息函数[[item。
index]],就可自动给每一行添加序号。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 完整 word 使用 Axure 实现 产品 列表 复杂 原型