當前位置:首頁 » 數據倉庫 » 動態面板如何配置兩種state
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

動態面板如何配置兩種state

發布時間: 2023-04-04 12:10:51

⑴ 使用Axure實現切換一級菜單效果

axure版本 :8.0

實現效果


原型查看

https://u7k6gc.axshare.com/#c=2

實現思路

       通過動態面板實現菜單選中與未選中的不同效果,在頁面爛帶載入時,將指定菜單的動態面板狀態設置為選中狀態。由於菜物嫌單一般會涉及多個頁面,可以通過母版來減少重復工作。

       本示例只講解了橫放的菜單實現,豎放的菜單與此實現一致,各位童鞋們可以舉一反三。

製作步驟

1、製作一個未選中的菜單。添加一個文本框,填寫好菜單的名稱,設置好樣式。


2、將其轉換為動態面板。並用State1復制一個狀態。


3、雙擊編輯State2,修改該文本的顏色,並添加一個選中的標記條。(各位可根據UI實現效果,添加其中的圖標或者圖片)


4、復制該動態面板,並修改相關文字,製作其他幾個菜單,分別為每個動態面板取上對應的名字。


5、選中剛才製作的所有菜單的動態面板,點擊右鍵,「轉換為母版」,將此母版命名為「頂部菜單」。



6、分別為每個菜單製作相應的頁面,並在頁面頂部同樣的位置插入該母版。



7、分別設置每個頁面的頁面載入時事件,動作添加為「設置面板狀態」。


公司介紹頁面,將動態面板「公司介紹」的狀態設置為State2,其他動態面板的狀態設置為state1;

產品方案頁面,將動態面板「產品方案」的狀態設置為State2,其他動態面板的狀態設置為state1;

聯系我們頁面,將動態面板「聯系我們」的狀態設置為State2,其他動態面板的狀態設置為state1;


8、添加菜單點擊事件。

雙擊剛才創建的母版,進入母版編輯界面。


分別選中創建的菜單動態面板,添加「滑鼠單擊時」事件


公司介紹菜單,滑鼠單擊時在當前窗口打開公司介紹頁面;

產品方案菜單,滑鼠單擊時飢螞蘆在當前窗口打開產品方案頁面;

聯系我們菜單,滑鼠單擊時在當前窗口打開聯系我們頁面;


至此,一級菜單的效果已經實現。

⑵ Axure RP8 | 動態面板-多狀態

動態面板:能夠在一個固定的區域切換顯示的內容。能實現很多動態效果。
其本身是一個透明的元件。一個動態面板里有若干個【狀態】。「若動態面板是幻燈片的放映機,而狀態則是幻燈片。」 打開狀態的編輯界面,即可放置各種各樣的元件,組成內容。
有幾種特性:容器、 多狀模飢態 、拖動、循環、適應寬度、相對固定。

動態面板-多狀態: 動態面板里的多個狀態。可以通過鍵襪添加交互,讓某個狀態的順序切換到首位。

製作搜索框、標簽欄(填充為白色或透明,字體為橙色)

三個標簽欄都要設置好【選中】狀態的樣式(填充為橙色,字體為白色),且其中一個標簽欄的默認狀態為【選中】;然後【設置選項組名稱】為相同的,這里是「SearchTab」
設置相同的選項組名稱: 為了切換標簽時,實現唯一選中的效果)

選中需要變化的區域,右鍵,轉換為動態面板

動態面板命名為SearchPanel,並雙擊,選中State1,並復制兩個

雙擊每個狀態,修改每個狀態的內容,這里修改了文本框的提示文字和框框的顏色

為每個標簽添加兩個用例
一是【滑鼠單擊時】-【選中】-【當前元件】

二是【設置面板狀態】-【動態面板】-【選擇對應的狀態旦亮返】

搞定!

⑶ axure動態面板不同狀態怎麼切換

首先設置一個全局變數aX的單擊事件產生的動作如下:(1)設置a=1,(2)頁面跳轉到B;Y的單擊事件產生的動作如下:(1)設嘩敏置a=2,(2)頁面跳轉到B設置B頁面的「頁面載入時」事件,在產生結果之前進行一個判斷。(1)ifa=1,動態面板切換到State1,(2)elseifa=2,動態面亂仿枝板切換大茄到State2。

⑷ Axure:教你10步用動態面板實現移動端上下滾動屏幕

本文章主要是為需要的人提供教程以及為自我學習的一種復盤方式。

1.從元件庫中拖入一個手機模板。

2.在導航欄和標簽欄之間拖乎殲搭入一個動態面板,並將面板名稱命名為:外改散層動態面板。

3.雙擊 【外層動態面板】,將state1改為:state1-外層動態面板,並雙擊進入  state1-外層動態面板裡面

4.在【 state1外層動態面板】里,拖入一個動態面板,並命名為:內層動態面板。 內層動態面板的長度為所要展示的內容的長度。

5.同理,雙擊【內層動態面板】後,將state1命名為:state1-內層動態面板,並雙擊進入【state1-內層動態面板】裡面。並拖入自己要展示的內容

6.返回至主頁面,單擊【外層動態面板】,給它添加「拖動時」用例

7.雙擊「拖動時」後,點擊「移動」,要移動的元件選擇【內層動態面板】,移動選為:垂直移動

8.點擊「添加邊界」,添加2個邊界:(1)頂部<=0(2)頂部>=0。當頂部>=0時,需要為其添加函數,點擊>=0時的 fx

9.設置變數,點擊「添加局部變數」,panel1=元件 外層動態面板;panel2=元件 內層動態面板。panel1,panel2可按自己喜好命名

10.設置函數,設置函數為:[[panel1.height-panel2.height]]  。設置完成後,按f5預覽,如果不能實現效果,請務必檢查每一個變數名和函數(特別歲拿易錯,我錯了三次)。

註:本教程參考: 阿阿小蘭蘭  發布的(Axure之上下滑動屏幕實現,原文網址 https://www.jianshu.com/p/dd44f5229c32 。ps:阿阿小蘭蘭寫得特別清楚,從她的教程中本人受益良多)

⑸ axure點擊下拉列表,滑鼠懸浮A選項時候,顯示子列表A1,A2...,如何做到

設置A為悄鋒動態伏慎面板1
設置動態1滑鼠移入時為state1,移出時為state2
在子列表的位置上放動態面板2,隱藏
在動態2state1里放子列表
設置動態1滑鼠移入時顯示動態2
設置啟廳晌動態2滑鼠移出時隱藏動態2且設置動態1為state2
再設置BCD選項滑鼠移入時隱藏動態2且設置動態1為state2
可能有點麻煩,我一直這么做的

⑹ axure8.0 動態面板的上下級怎麼設置

打開Axure8(axure7也一樣),默認是新創建的孝扒項目,找到 「動態面板」元件,如下圖:

拖動元件到工作區,按照圖指示的任意一個地方給動態面板命名:測試面板

雙擊動態面板元件,出現狀態state1,雙擊進入到state1的編輯:

拖放一個圖像元件到state1內,雙擊並找到准備的圖片(紅旗),這樣第一個狀態就編輯好了。

下面編輯亂陸第二個狀態,注意看圖,在右下方的 「概要」欄目內 找到state1右鍵「復制狀態」,這樣裡面的元件大小、位置不會發生改變。復製成功後為便於下面的交互用例,將狀態分別命名為:紅旗、藍旗巧陪昌。
然後點擊藍旗狀態,將圖片替換。

以上步驟完成後,開始編輯交互用例。雙擊紅旗圖片,出現如下圖所示的交互用例,找到:滑鼠單擊時,並雙擊出現用例編輯面板。

選擇 元件-->設置面板狀態 ,然後按照圖示選中 「測試面板」,並為其設置選擇狀態為:藍旗。同時設定動畫效果。

紅旗狀態編輯完成後,點擊確定,按照下圖所示在 case1下郵件復制用例,並粘貼到藍旗狀態下。然後按上一步的操作,將藍旗點擊是的選擇狀態設置為:紅旗。

最後F5預覽,並點擊圖像測試效果

⑺ Axure實現兩個下拉框的嵌套

要求:需要設計兩個下拉框,第一個顯示省份的名稱,第二個根據鍵御選擇的省份顯示某省的城市。

如第一個中有浙江省、江蘇省、福建省;第二個中有杭州市和寧波市、南京市和蘇州市、福州市和廈門市;若選擇江蘇省,則第二個下拉框只能選擇南京市和蘇州市。

首先創建省份的下拉框,並設置三個省份

然後利用動態面板,設置三個state,分別對應這三個省份。

state1-浙江省;state2-江蘇省;state3-福建省

然後在每個state中放入下拉框:

添加完成後,回到主頁面,在省份的那個下拉框上稿知岩設置交互:選項改變時的交互

點擊 新增條件,這里需要先表示選擇下拉框中選中浙江省,才能設置動態面板的狀態為state1

同樣處理狀猛塌態2和3