axure商城

Axure中繼器教程:使用中繼器實現菜單及tab頁簽聯動的展示

一、效果

展示效果如下:

二、繪制元件

1、【中繼器1】:命名為“菜單”,將中繼器中的矩形命名為“菜單矩形”,矩形大小設置為230*184。備選數據的列:id,menu,url。

添加的備選數據如下:

2、【中繼器2】:命名為“頁簽”,將中繼器中的矩形為“頁簽矩形”,矩形大小設置為120*30。備選數據的列:id,menu。不設置備選數據。設置矩形“頁簽矩形”的交互樣式:選中設置為紫色背景,白色字體。

3、【形狀】:命名為“關閉”。大小設置為15*15。

4、【中繼器3】:命名為“頁面”,將中繼器中的矩形為“頁面矩形”,矩形大小設置為1200*800。備選數據的列:id,url,sort。不設置備選數據。

三、添加全局變量

添加三個全局變量sort、id、ids。中繼器交互時使用。

四、添加交互

1、為中繼器“菜單”【每項加載】事件添加動作,詳細動作見圖:

為中繼器“菜單”中的矩形“菜單矩形”【單擊時】事件添加動作,詳細動作見圖:

2、為中繼器“頁簽”【每項加載】事件添加動作,詳細動作見圖:

為中繼器“頁簽”中的矩形“頁簽矩形”【單擊時】事件添加動作,詳細動作見圖:

3、為形狀“關閉”【單擊時】事件添加動作,詳細動作見圖:

4、為中繼器“頁面”【載入時】、【每項加載】事件添加動作,詳細動作見圖:

 

 

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

Axure中繼器初級教程:用中繼器做一個漂亮的系統首頁展示內容

2020-11-3 10:42:16

案例教程

Axure學習筆記:自定義搜索,模擬真實網站搜索

2020-11-27 12:07:16

axure商城
4 條回復 A文章作者 M管理員
  1. Arvin呂

    老師,給個預覽網址

  2. 133****3204
  3. James2119
  4. 150****9576

    最后一步中,每項加載:框架中打開連接[[item.url]]在 頁面顯示頁

?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo