<acronym id="p33pj"><strong id="p33pj"></strong></acronym>
  • <p id="p33pj"><strong id="p33pj"></strong></p>
    <track id="p33pj"></track><td id="p33pj"></td>
    <p id="p33pj"></p>
  • <pre id="p33pj"><ruby id="p33pj"></ruby></pre>

      1. <p id="p33pj"></p>
        axure商城

        如何利用中繼器和動態面板制作一個可以自動化菜單?

        本教程通過在中繼器中導入頁面,實現在二級菜單中自動新增頁面對應的菜單,減少重復工作,提高效率。

        一、目標

        通過在中繼器中導入頁面,實現在二級菜單中自動新增頁面對應的菜單,減少重復工作,提高效率。

        二、技能要求

        本教程涉及到動態面板、中繼器函數函數和axure條件判斷的使用,因此建議大家看教程之前先做以下準備:

        • 掌握動態面板使用方法
        • 掌握中繼器使用方法
        • 掌握函數使用方法
        • axure事件情形使用方法

        當然,如果你不會上面這幾項,也不妨礙你繼續往下看

        三、目的

        我設計這個菜單的目的

        • 第一目的:當然是偷懶啊,小學老師說過,偷懶才是創造的原動力
        • 第二目的:解決痛點,讓自己爽

        于是呢,本著能偷懶絕不多干活的美好愿景,經過本落的努力,終于用axure實現了比較便捷的自動化添加菜單。需要的話拿走不謝!

        四、背景

        本落之前一直是一個C端產品經理,主要做移動端比較多,后臺稍微少一些。今年換工作后,最近比較多的時候都在做web端,管理后臺。由于是從0開始,所以,管理后臺的菜單越來越多越來越豐富,做原型的時候就有點奔潰。我之前是根據教程做的二級菜單,然后遇到新增一個菜單的時候呢,就比較麻煩了。一天天沒完沒了的加菜單,一個個加,一個個改菜單名字,一個個的設置鏈接,然后調整位置層級,真的是煩死了。要是直接在最后一個菜單加還好,在二級菜單加也還勉強忍一忍,但是在中間插入一個新的一級菜單,就得把后面所有的菜單位置都得調整一邊,真的是要煩死了?。?!不知道有沒有戳到大家的痛點。

        五、教程

        準備事項

        1.建好頁面,備用

        2. 拖1個中繼器到畫布里,選中中繼器,然后在樣式-數據里,編輯好一級菜單;一級菜單只做二級菜單的展開收起用,所有直接錄入菜單名字就行。二級菜單,對應的列,選擇單元格,然后右鍵引入頁面,選擇要打開的頁面就行

        第 1 步 設置二級菜單+交互事件

        1.1 雙擊中繼器,進入中繼器里面,選中矩形,給矩形命名:一級菜單

        1.2 再拖1個新的矩形進入中繼器,命名:二級菜單1,設置單擊事件,選擇單擊時打開鏈接(如果需要的話,你可以設置成在內聯框架中打開鏈接,我就是設置的內聯框架中打開,此處請根據個人喜好酌情設置事件類型)。這個時候不用選打開哪個頁面,后面用函數設置??聪聢D,選擇【鏈接到URL或文件路徑】

        1.3 設置打開當前菜單名稱對應的頁面
        選擇函數fx,按下圖操作選擇元件函數中繼器里的函數變量,我的中繼器數據排列方式是從左往右,一級菜單,二級菜單1、二級菜單2…這樣排列的,所以二級菜單的第一個菜單就選擇第二列的表頭變量名字那個就行。解釋一下,這個事件設置的意思,是希望在單擊時打開菜單文本對應的頁面,也就是說,你的菜單顯示的是二級菜單,點擊時就會自動打開二級菜單這個頁面。

        1.4 接下來,再設置一個載入時事件,載入時,隱藏當前元件。然后啟用情形,添加一個判斷條件,條件設置成下圖所示即可。這里是要解決中繼器的一個體驗問題。因為實際情況中,二級菜單的數量不一定是相同的。但是中繼器有一個毛病,它只按行數展示數據,不管你列里面有沒有內容,只要有行,即使是空的也會展示,所以就會出現很多紅白列的情況。此處對應的二級菜單少的地方,會展示空白的二級菜單。所以這一步的操作,是要隱藏這些空白菜單

        按照以上步驟設置完,這個按鈕就可以打開對應的頁面了。

        1.5 設置完以上事件,按照你需要的二級菜單數量,進行復制粘貼。注意,要按照二級菜單數量的上線復制粘貼。粘貼完記得改一下矩形名字。

        1.6 復制粘貼完后,選擇所有的二級菜單,設置成動態面板,給動態面板命名,然后隱藏動態面板。選擇一級菜單,建一個單擊事件,單擊是切換二級菜單的動態面板的可見性,效果選擇推動和拉動元件。這個菜單不會的,自行百度一下二級菜單怎么做。

        第 2 步 數據綁定

        2.1.數據綁定,將中繼器里的菜單內容,跟一級菜單、二級菜單設置綁定管理。選中中繼器(直接新建頁面載入時事件也行),新建交互事件,選擇載入時事件,載入時設置文本,找到矩形,一級菜單,選擇一級菜單后設置文本內容,在文本【值】的下方刪掉原來的文本,點擊右側的函數【fx】,設置動態的菜單名字。添加函數的方法跟上面的一樣,就不啰嗦了,不會的,往上翻找找,或者自己找一個中繼器的教程看看怎么綁定數據。這個時候,去看看你中繼器的數據表格里,一級菜單對應的是哪一列,在函數選擇是,選對應的表頭那列就行。

        第 3 步 新增菜單怎么辦?

        3.1 新增菜單的話,二級菜單數量不增多的情況下,直接在中繼器的數據里添加對應的菜單就行。如果二級菜單的數量要新增,按上面的步驟,多復制粘貼幾個二級菜單,設置載入事件綁定好數據,就可以了
        剩下的,大家可以自行發揮了

        最后附上最開始的axure教程示例&原型示例

        給TA打賞
        共{{data.count}}人
        人已打賞
        高級教程

        AXURE繪制餅狀圖教程

        2021-9-15 14:37:26

        高級教程

        Axure教程:通過引用前端JS代碼實現瀏覽器全屏效果

        2021-11-13 19:10:24

        axure商城
        17 條回復 A文章作者 M管理員
        1. 小雪童鞋

          求rp文件么??
          制作總是不成功

        2. 產品大師傅

          一個動態面板就搞定了??

        3. 嵐吧

          感謝分享,自動化關聯很好用。
          交互上我存在一個問題想請教一下,后臺系統中存在一級菜單就是一個模塊的情況,例如“首頁”,點擊后我想選中一級菜單,但是無法實現,這個有什么解決方法么。
          下面是我設置函數條件(圖片不能上傳),理論上可行,但預覽后并沒有對應的效果。??

          頁面載入
          ①case1
          設置 一級菜單 文本=[[Item.Column0]]
          ②case2
          if [[Item.Column0]]=[[This.text]] 并且 [[PageName]]=[[This.text]]
          設置選中 一級菜單 為 true

        4. 羅羅諾亞

          第一步我就開始沒看懂

        5. 袁xX

          請教一個問題,單擊二級菜單后跳轉到對應的頁面時,怎么保證菜單欄不會收起

          • 單吊

            需要做一個內聯框架 所有的連接在內聯框架中打開

          • 袁xX

            漂亮,實現了,謝謝指導

        6. olioli

          隱藏空白二級菜單時,用這個條件“如果 文字于 當前==”””實現不了隱藏,可判斷菜單值是否為空,如:if “[[Item.Column4]]” == “” 進行實現

          • 落落同學

            不加空格,就是判空,可以隱藏的,你的評論了,你加了空格了,所以應該是判斷不了的,你可以看我的示例。你說的方式應該也可以實現,其實本質上用的是一樣的原理來判空。我是判斷當前這個元件有沒有賦值,你是判斷元件被賦值的值內容。判斷的節點不太一樣,一個在前,一個在后,但是判斷的都是同一個值。

          • olioli

            感謝回復。重新嘗試后,確實是可以的。還想請問下,Axure自帶的樹狀菜單,是否也可以解決您在“四、背景”中說的痛點?

          • 落落同學

            我試了下,交互上達不到我要得菜單效果

        ?
        個人中心
        購物車
        優惠劵
        今日簽到
        有新私信 私信列表
        搜索
        国产亚洲日韩在线a不卡
        <acronym id="p33pj"><strong id="p33pj"></strong></acronym>
      2. <p id="p33pj"><strong id="p33pj"></strong></p>
        <track id="p33pj"></track><td id="p33pj"></td>
        <p id="p33pj"></p>
      3. <pre id="p33pj"><ruby id="p33pj"></ruby></pre>

          1. <p id="p33pj"></p>