axure商城

Axure教程:使用中繼器和動態面板制作自定義下拉框(一)

本文由人隱江湖 投稿,獲得100金幣獎勵。

本系列教程主要介紹如何使用中繼器和動態面板制作自定義下拉框,包括基礎下拉框、帶搜索下拉框、多級聯選框、時間選框等。因篇幅和時間關系,教程分為多個章節。

本章節介紹如何制作基礎下拉框,首先效果圖:

演示鏈接:http://cloud.axureshop.com/DXJ6HJ/

文章主要分為繪制元件、添加交互、文章小結三部分

一、繪制元件

1.? 【選框】:繪制一個文本框,命名為“Select”,屬性設置為“只讀”

設置文本框“Select”交互樣式:【獲取焦點】改變線段顏色(Axure9新增功能,其他版本可使用矩形的【選中】效果實現);

2.? 【標識】:繪制一個下拉的圖標,命名為“Icon”;

3.? 【滾動條】:??繪制一個動態面板,命名為“Panel”;屬性設置為“垂直滾動”,并隱藏

設置動態面板“Panel”的線段顏色(Axure9新增功能,其他版本可在動態面板中添加矩形實現);

4.??在動態面板“Panel”中繪制一個中繼器,命名為“Repeater”,將中繼器“Repeater”中的矩形命名為“Option”,在中繼器“Repeater”中添加備選數據;

設置矩形“Option”的交互樣式:【懸停】改變填充顏色;

二、添加交互

1.? 為文本框“Select”的【單擊時】事件添加動作:【顯示】動態面板“Panel”,效果為“置于頂層”、“燈箱效果”(必須設置燈箱效果,否則交互有問題)

2.? 為動態面板“Panel”的【顯示時】添加動作:【旋轉】圖標“Icon”,效果為“順時針180度”、“緩進緩出300ms”

為動態面板“Panel”的【隱藏時】添加動作:【旋轉】圖標“Icon”,效果為“逆時針180度”、“緩進緩出300ms”;

3.? 為矩形“Option”【單擊時】事件添加動作:【設置文本】 文本框“Select”為中繼器“Repeater”中的“[[Item.Option]]”;【隱藏】動態面板“Panel”

三、文章小結

1.? 使用文本框元件作為【選框】是為了后續交互中使用【文本改變時】事件,若沒有后續交互也可使用矩形元件;

2.? 在中繼器“Repeater”中添加輔助列可實現更多的自定義效果,如選中效果、禁用效果、默認效果等。

本教程源文件下載:https://www.pmyes.com/thread-35185.htm

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

Axure 9高級教程:Axure函數使用手冊

2020-1-11 11:38:40

高級教程

Axure中繼器實現APP中設置頁面的各種列表

2020-4-16 14:12:21

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

    非常好

  2. 152****6918

    已學習

  3. Yuan

    老師后續教程呢?不更新了嗎

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