axure商城

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

寫在開頭:

最近一陣在自學MySQL數據庫的使用以及php語言,學得我真的是xxxx腦子發懵眼睛發直的。

這幾天空閑時間也看了許多在平臺上發表的新文章或者新教程,

但總感覺自從平臺升級換代后——

 

賣源文件的賣家多了,十有八九都標注了“資源下載”的字樣

 

于是我也蠢蠢欲動,追個時髦湊個熱鬧打算插上一足。

哪位原型交互愛好者要是對我的高保真原型感興趣的話,可以加我QQ購買,號碼在上一篇文章的評論處。

詳見上一篇文章實戰高保真demo

 

書歸正題

當然,寫這篇文章的側重點還是針對中繼器的使用方法進行基礎教學

預覽效果如下:

靈活使用中繼器

 

開始原型設計

1、準備材料

(1) 首先,打開我們萬能的Axure軟件,在畫板上創建一個中繼器,并命名為shopping;雙擊中繼器進入其內部,并刪除內部已存在附帶的矩形框。

(2) 在頁面里創建6個100*40的矩形框,依次排列(邊框重合)在一行,并分別命名為brand、name、style、memory、video、price

(3) 為了能讓在座的各位以最直觀的方式觀察數據,同時不花費你寶貴的時間。于是我細心的手動打了(應該有掌聲吧)許多數據,為你省去不必要的繁瑣時間。

鏈接在此:數據內容

 

首先需要復制Excel的數據,接著按照下圖所示,左鍵點擊“1”的位置按Ctrl+v進行復制操作(注意是點擊一次,而不是雙擊!不是把數據復制在1的文本框內,而是以1作為復制數據的原點),然后你就能發現中繼器中的數據出現了(鵝妹zing)!

 

(4) 接著需要修改數據列名稱,6種數據和6列名稱一一對應好。

 

(5) 最后設置中繼器的每項加載時動作為:設置文字到中繼器中

 

這里有個小竅門:先勾選第一個需要設置文字的,輸入好相應的[[item.xxxx]],然后再勾選第二個需要設置文字的,這時你會發現文本值自動呈現出來。

還有一點:左鍵雙擊[[item.xxxx]]的xxxx內容部分,即可直接修改定義名。

 

(6) 點擊中繼器的樣式一欄,選擇多頁展示,每頁項目數為8,起始頁為1;

 

(7) 中繼器數據展示圖

 

2、進入正題

(1) 在中繼器外部的下面創建兩個無邊框無背景的矩形框,尺寸為100*40,分別命名為“頁碼”和“數據數”;

(2) 然后設置中繼器每項加載時的動作增添設置文字于“頁碼”矩形框,值為“頁碼:[[lvar1.pageindex]] / [[lvar1.pagecount]]” , 還需要設置Fx為lvar1=元件 this

其中函數pageindex的含義為當前頁數,pagecount為總頁數。

 

(3) 接著需要在上述同樣的條件下,設置文字于“數據數”矩形框,值為“數據:[[lvar1.itemcount]]”,同樣需要設置Fx;

 

(4) 創建兩個按鈕,分別命名為“上一頁”和“下一頁”。設置點擊按鈕的動作分別為設置中繼器當前顯示頁面為previous和next

 

(5) 再在中繼器內部創建一個矩形框,矩形框100*40大小,內部加上一個“刪除”按鈕,設置刪除按鈕的鼠標點擊的動作為:刪除中繼器當前目標行

 

(6)最后在中繼器外面的頂部創建每列數據的名稱。

 

 

之后就可以點擊F5進行瀏覽了。

該教程主要是關于中繼器實用教學第一部分的內容


至此,靈活使用中繼器(1)講演結束,期待與您的交流溝通!

 

 

給TA買糖
共{{data.count}}人
人已贊賞
Axure教程

【元件庫】簡潔大氣后臺系統元件庫—Inspinia最新前端元件庫

2018-11-7 22:23:00

Axure教程

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

2018-11-23 20:37:50

axure商城
0 條回復 A文章作者 M管理員
    暫無討論,說說你的看法吧
?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo