axure商城

6、靈活使用中繼器(2) —— Axure實用交互

寫在開頭:

承接上一周的教程,最近不少朋友吐槽我文章寫得越來越慢,與其說是更新速度慢,實則卻是平臺審核時間跨度長。

一篇文章從提審到上線少則需要等待2、3天,多則快一周都杳無音訊、石沉大海,不禁產生懷疑:運營人員是不是在挑我的錯別字???

吐槽結束,進入本章正題。

本篇教程主要圍繞以下三部分:

1、增添數據到中繼器中

2、批量操作數據

3、模糊搜索

作為重點內容,由淺入深講解各部分操作交互如何實現,并針對上一篇教程進行延伸學習。

? ? ?預覽效果如下:

案例演示

開始原型設計

1、增添數據到中繼器中

(1)?首先,打開我們上一周做到一半的Axure文件 【詳見上一篇文章,靈活使用中繼器(1)

(2) 在中繼器外部添加一個命名為“添加”的按鈕,設置按鈕的鼠標點擊的動作為:添加行到中繼器,并填入需要添加的信息內容。

教程中添加信息為:Apple 蘋果 臺式機 128GB 512MB 12999;

 

2、批量操作數據

(1)在中繼器內部添加一個50*40的矩形框,并在矩形框內部添加一個復選框,位置在展示內容最前面,并命名為choose;

 

設置復選框選中時的動作為標記中繼器中的目標行this;

 

(2) 在中繼器外部創建三個按鈕,分別為全選、反選和刪除,并依次命名。

設置“全選”按鈕的鼠標點擊的動作為:設置中繼器里的復選框的選中狀態為true

 

設置“反選”按鈕的鼠標點擊的動作為:設置中繼器里的復選框的選中狀態為toggle

 

設置“刪除”按鈕的鼠標點擊的動作為:設置刪除中繼器里的已標記行

 

3、模糊搜索

(1) 在中繼器外面的上部創建一個150*35的矩形框,并在其內部創建一個143*30的文本框命名為check,之后設置文本框隱藏邊框。

然后創建一個“查詢”按鈕;

(2) 設置“查詢”按鈕的鼠標點擊的動作為:中繼器添加篩選,條件為[[item.brand.indexof(lvar1)>-1||item.name.indexof(lvar1)>-1]];

 

 

注:該模糊篩選的條件為 只要輸入的文字包含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管理員
    暫無討論,說說你的看法吧
?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo