中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

在工具類產(chǎn)品中，自定義編輯是一個很受歡迎的功能。但這個功能在Axure中實現(xiàn)的話會比較復雜，這篇文章，我們就來看看具體怎么操作。

自定義編輯頁面是一種非常常見的功能，因為它允許用戶根據(jù)自己的需求和偏好來自定義頁面內(nèi)容的布局和展示。例如，在同一個頁面中，不同的用戶可能有著不同的需求和關注點。

一些用戶可能希望展示實時數(shù)據(jù)圖表，以便能夠快速查看關鍵業(yè)務指標的變化趨勢，而另一些用戶可能更傾向于展示統(tǒng)計數(shù)據(jù)的報表或列表形式，方便他們獲取詳細的信息分析。自定義頁面編輯功能的核心在于提供靈活性和可擴展性，讓用戶能夠根據(jù)自己的工作流程和偏好調(diào)整頁面的布局、內(nèi)容和交互方式。

所以今天我們就來學習怎么在Axure中制作自定義編輯頁面的效果，我們動態(tài)編輯可視化分析頁面為案例，具體包括：

一、效果展示

1、可以拖動左側圖片，松開鼠標后，圖表會添加到鼠標所在為止的方框中；

2、可以刪除不需要的方框，鼠標移入方框后按delete鍵即可；

3、可以添加新的方框，點擊右上角添加按鈕添加即可；

原型地址：https://wcjx68.axshare.com/#c=1

二、制作教程

1、材料準備

這里我們主要分開3部分內(nèi)容制作，分別是左側圖表選擇欄，右側方框，以及拖動時圖表回顯的元件

1.1 左側圖表選擇欄

我們主要用中繼器來制作，在中繼器內(nèi)部添加圖片元件和文本標簽，如下圖所示擺放

然后我們將他們組合后轉(zhuǎn)為動態(tài)面板，因為只有動態(tài)面板才有拖動時的交互事件

中繼器表格我們需要增加3列內(nèi)容，分別是pic、pic1和text，pic和text分別對應上面圖片（小圖標）和文本標簽，pic1對應該圖標所對應的統(tǒng)計圖表的圖片。

鼠標右鍵就可以導入對應的圖片，填寫完中繼器表格后，我們要將pic列的圖片設置到圖片元件里、將text列的文本值設置到文本標簽元件里。如果是Axure10或以上的，我們點擊中繼器里的鏈接按鈕，選擇對應的元件，就自動關聯(lián)上了；如果是axure9及以下的，我們就要在中繼器每項加載時用設置圖片和設置文本的交互將圖片和文本值設置到對應元件上。

這樣左側選擇工具欄的材料就準備完成了，如果中繼器里添加的元件比較多，整體高度會太長，這時我們可以通過將整個中繼器轉(zhuǎn)為動態(tài)面板，然后調(diào)出垂直滾動條，然后調(diào)整面板顯示尺寸，這樣就可以通過鼠標滾動查看更多，如果不想看到滾動條，可以再次轉(zhuǎn)為動態(tài)面板，通過外面板遮擋內(nèi)面板的方式，隱藏滾動條，但仍然有滾動效果。

1.2 右側方框

右側方框我們也是用中繼器來制作，在中繼器里添加方框的素材和圖片元件，，如下圖所示擺放

中繼器表格里我們添加一列，pic列對應方框內(nèi)顯示的圖片元件，如果默認需要顯示圖片，我們就右鍵導入對應圖片或者填寫圖片的線上鏈接地址；如果默認不顯示圖片，就填寫空即可，需要幾個方框就填寫幾行。

然后我們要將pic列的圖片值設置到圖片元件中，這里和前面一樣，如果是Axure10或以上的，我們點擊中繼器里的鏈接按鈕，選擇圖片元件，就自動關聯(lián)上了；如果是axure9及以下的，我們就要在中繼器每項加載時用設置圖片的交互，將pic列的值設置到圖片元件里。

在中繼器每項加載時，如果pic列的值為空，就是沒有圖片的情況下，我們就用隱藏的交互，將圖片隱藏，這樣就只會顯示方框。

1.3 拖動時圖表回顯元件

這里我們只需要一個圖片元件即可，圖片大小和方框里的圖片一致，可以將圖片轉(zhuǎn)為動態(tài)面板，面板默認隱藏，后續(xù)作為拖動顯示圖片的彈窗。

1.4 其他元件

最后我們還需要一個添加按鈕，用于后續(xù)增加方框。

2、交互制作

2.1 添加方框

鼠標點擊添加按鈕時，我們用添加行的交互，對方框中繼器添加一行空行，這樣就會增加增加一個方框。

2.2 刪除方框

首先我們要知道需要刪除的是哪個方框，所以我們在鼠標移入方框組合時，用標記行的交互，將鼠標當前所在的方框的所在行標記起來，然后如果鍵盤按下delete鍵時，我們就用刪除行的交互，將已標記的行刪除。如果鼠標移出了方框，我們就要用取消標記的交互，將標記取消，不然刪除時，就會把鼠標經(jīng)過的所有方框都刪除

2.3 拖動工具欄的元件

拖動工具欄里中繼器里的動態(tài)面板，在開始拖動時，我們先用設置圖片的交互，將拖動動態(tài)面板里所在行的pic1列的圖片值設置到動態(tài)面板里對應的圖片元件，然后用顯示的交互，將彈窗顯示，然后用移動的交互，將彈窗的中心點移動到鼠標的指針位置，這里用cursor.x或y函數(shù)可以獲取指針的x和y坐標值。

在拖動的過程中，我們用移動的交互，讓彈窗的中心點移動到鼠標的指針位置，這樣彈窗就會跟隨鼠標移動了，這里移動的交互跟上面的交互是一樣的

2.4 將圖表放入指定方框

在拖動結束松開鼠標時，我們要做一個判斷，首先判斷判斷彈窗是否在方框中繼器里，如果不在，我們用隱藏的交互將彈窗隱藏就可以了；如果在中繼器的范圍里，我們就用更新行的交互，將左側工具欄拖動元件對應行的pic1列的值更新到方框中繼器對應行的pic列值

這樣我們就完成了拖動擺放自定義編輯頁面的制作，后續(xù)使用也很方便，默認的元件在左側工具欄的中繼器表格里導入，預覽后即可自動生交互效果。

那以上就是本期教程的全部內(nèi)容，感興趣的同學們可以動手試試哦，感謝您的閱讀，我們下期見。