axure商城

6、灵活使用中继器(2) —— Axure实用交互

写在开头:

承接上一周的教程,最近不少朋友吐槽我文章写得越来越慢,与其说是更新速度慢,实则却是平台审核时间跨度长。

一篇文章从提审到上线少则需要等待2、3天,多则快一周都杳无音讯、石沉大海,不禁产生怀疑:运营人员是不是在挑我的错别字???

吐槽结束,进入本章正题。

本篇教程主要围绕以下三部分:

1、增添数据到中继器中

2、批量操作数据

3、模糊搜索

作为重点内容,由浅入深讲解各部分操作交互如何实现,并针对上一篇教程进行延伸学习。

     预览效果如下:

案例演示

开始原型设计

1、增添数据到中继器中

(1) 首先,打开我们上一周做到一半的Axure文件 【详见上一篇文章,灵活使用中继器(1)

(2) 在中继器外部添加一个命名为“添加”的按钮,设置按钮的鼠标点击的动作为:添加行到中继器,并填入需要添加的信息内容。

教程中添加信息为:Apple 苹果 台式机 128GB 512MB 12999;

6、灵活使用中继器(2) —— Axure实用交互

 

2、批量操作数据

(1)在中继器内部添加一个50*40的矩形框,并在矩形框内部添加一个复选框,位置在展示内容最前面,并命名为choose;

6、灵活使用中继器(2) —— Axure实用交互

 

设置复选框选中时的动作为标记中继器中的目标行this;

6、灵活使用中继器(2) —— Axure实用交互

 

(2) 在中继器外部创建三个按钮,分别为全选、反选和删除,并依次命名。

设置“全选”按钮的鼠标点击的动作为:设置中继器里的复选框的选中状态为true

6、灵活使用中继器(2) —— Axure实用交互

 

设置“反选”按钮的鼠标点击的动作为:设置中继器里的复选框的选中状态为toggle

6、灵活使用中继器(2) —— Axure实用交互

 

设置“删除”按钮的鼠标点击的动作为:设置删除中继器里的已标记行

6、灵活使用中继器(2) —— Axure实用交互

 

3、模糊搜索

(1) 在中继器外面的上部创建一个150*35的矩形框,并在其内部创建一个143*30的文本框命名为check,之后设置文本框隐藏边框。

然后创建一个“查询”按钮;

(2) 设置“查询”按钮的鼠标点击的动作为:中继器添加筛选,条件为[[item.brand.indexof(lvar1)>-1||item.name.indexof(lvar1)>-1]];

6、灵活使用中继器(2) —— Axure实用交互

 

6、灵活使用中继器(2) —— Axure实用交互

 

注:该模糊筛选的条件为 只要输入的文字包含brand和name的内容即可完成筛选。

 

之后就可以点击F5进行浏览了。

该教程主要是关于中继器实用教学第二部分的内容

 

至此,灵活使用中继器(2)讲演结束,期待与您的交流沟通!

 

给TA打赏
共{{data.count}}人
人已打赏
Axure教程

6、灵活使用中继器(1) —— Axure实用交互

2018-11-21 22:35:49

Axure教程

【Axure电商案例】如何设计和真的后台一样给客户看

2018-12-3 14:49:55

axure商城
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索