• <acronym id="gvoe3"><meter id="gvoe3"><address id="gvoe3"></address></meter></acronym>
  • <pre id="gvoe3"></pre>
    <p id="gvoe3"><strong id="gvoe3"><small id="gvoe3"></small></strong></p>

  • <pre id="gvoe3"><label id="gvoe3"><xmp id="gvoe3">
      axure商城

      Axure案例:用中繼器做一個2級折疊菜單

      之前看到過很多介紹制作2級菜單的文章,大都是制作N個子菜單,隱藏后待適當時機(點擊)再顯示??粗苊苈槁榈腘個隱藏元件,實在頭大,是否有更簡潔清晰一些的原型呢?

      當然有了!

      今天就帶大家用中繼器來嘗試完成一個2級菜單,一起來看看吧。

      先看看效果

      第一階段:準備基本素材元件

      1、拖拽1個中繼器到主操作區域,如下圖

      2、雙擊中繼器,進入編輯中繼器內的元件

      2-1、刪除默認的矩形

      2-2、增加4個矩形,分別為:

      • 一級菜單項1個,填入文字:一級菜單。元件命名為一級菜單
      • 二級菜單項3個,填入文字及分別命名為二級菜單1、二級菜單2、二級菜單3。

      4個矩形之間的間距設為10像素(練習時可自行調整該值)。a、b完成之后的效果如下圖:

      樣例矩形的寬高為:300 * 40

      2-3、簡單樣式調整。

      設置二級菜單的x坐標設置為20,寬度比一級菜單小20像素。同時適當調整一二級菜單的樣式,以示一二級區別。調整后的效果如下圖:

      樣例一級菜單填充顏色:CCCCCC, 線寬為none,其他地方均為默認設置;二級線段顏色為E4E4E4,其他均為默認設置

      2-4、將二級菜單設置為一個整體

      將3個二級菜單矩形組合并命名為“二級菜單”,便于交互時一并展開/收縮(使用隱藏/顯示方法)

      注:也可以將其設置為動態面板

      此時回到主區域查看效果,如下圖

      可以看出,還有點問題,最后一個二級菜單與相鄰的一級菜單之間為緊靠著的,間距沒有體現出來。所以,我們還要做一步操作,以保證所有菜單都相鄰10像素

      3、設置中繼器的間距

      單擊中繼器,然后右側選擇中樣式,找到最底下的“間距”設置,如下圖

       

      在“行”后面的輸入框中,填入10 —— 表示行間距為10像素,效果立即就出來了,如下圖

      至此,完成了基本素材的所有準備,下面進行交互設置階段

      第二階段:設置交互效果

      1、設置二級菜單為隱藏 —— 默認情況下二級菜單是未展開的

      雙擊中繼器進行入編輯,選中二級菜單(組合),勾選隱藏

      選中之后

      回到主界面,效果如下圖

      已達成所有二級菜單默認收縮的效果

      下面就要增加展開的動作

      2、展開/收縮二級菜單

      預期的效果為:點擊一級菜單,展開/收藏二級菜單

      • 二級菜單收縮時,單擊一級菜單,展開二級菜單
      • 二級菜單展開時,單擊一級菜單,收縮二級菜單

      雙擊中繼器進行入編輯,點擊矩形“一級菜單”,(右側屬性)雙擊“鼠標單擊”

      設置動作為:切換“二級菜單(組合)”的可見性為“切換”

      至此,交互動作設置完成,點擊F5進入預覽效果,正常的效果如下圖。

      第一、第二階段完成之后,2級菜單的基本雛形已經有了。

      但是所有的一二級菜單數據都是一樣的,跟實際情況不符合,故接下來要使用中繼器的特性,給各個菜單的數據重新賦值。

      第三階段:設置數據

      1、添加數據。

      點擊中繼器,右側屬性,給中繼器添加相應數據,如下圖

      字段說明

      no1:一級菜單

      no2_1:二級菜單1

      no2_2:二級菜單2

      no2_3:二級菜單3

      2、賦值 —— 給各個矩形賦上相應的值

      點擊中繼器,右側屬性,雙擊“每項加載時”,選擇動作“設置文本”,給4個矩形依次賦值,如下圖操作:

      回到主操作區域,看一下,現在的效果,變成了這樣

      按下F5,看下預覽效果,如下:

      至此,二級菜單基本完成。是不是更簡潔清晰了一些?調整數據,或者其他文件中需要使用,是不是更方便一些了?!

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

      Axure案例:QQ音樂播放頁面

      2018-8-1 14:53:25

      案例教程

      Axure案例:電商購物車

      2018-8-21 15:35:50

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

        同問:
        沒個一級菜單下的二級菜單數量不一致,會出來很多空白的矩形,怎么辦

      2. 滴答滴答

        同問:
        沒個一級菜單下的二級菜單數量不一致,會出來很多空白的矩形,怎么辦?

      3. Panta

        請問,沒個一級菜單下的二級菜單數量不一致,會出來很多空白的矩形,怎么辦?

      4. 189****2098
      ?
      個人中心
      購物車
      優惠劵
      今日簽到
      有新私信 私信列表
      搜索
      俄罗斯videoxxxoo
    1. <acronym id="gvoe3"><meter id="gvoe3"><address id="gvoe3"></address></meter></acronym>
    2. <pre id="gvoe3"></pre>
      <p id="gvoe3"><strong id="gvoe3"><small id="gvoe3"></small></strong></p>

    3. <pre id="gvoe3"><label id="gvoe3"><xmp id="gvoe3">