Axure教程：文件上傳、自動(dòng)產(chǎn)生列表

Axure教程：文件上傳、自動(dòng)產(chǎn)生列表根據(jù)流行的前端視覺框架，制作了這個(gè)文件上傳的元件，重構(gòu)了交互關(guān)系，所以可定制化程度變高。Axure本身是帶一個(gè)文件上傳的文本框的，只要在頁面中放置一個(gè)文本框，并且把這個(gè)文本框的輸入類型變成“文件”，它就自動(dòng)變成了可以選擇文件上傳的表單元素，但是真的很簡陋，無法適應(yīng)視覺個(gè)性化定制，交互方式也有限?，F(xiàn)在前端視覺框架越來越成熟，很多公司會(huì)根據(jù)框架創(chuàng)建自己的視覺規(guī)范，并讓設(shè)計(jì)師在Axure當(dāng)中直接制作高保真原型，從而減少設(shè)計(jì)師與開發(fā)之間的溝通成本。所以我根據(jù)流行的前端視覺框架，制作了這個(gè)文件上傳的元件。在開始制作前，你可以看一下效果預(yù)覽：https://axhub.im/ax9/e354386a7e0f9a92/#g=1接下來我們一步一步的實(shí)現(xiàn)這個(gè)功能：第一步：放置元件首先在頁面上放置5個(gè)元件：1個(gè)文本框，3個(gè)矩形，1個(gè)中繼器。其中的文本框記得設(shè)置輸入類型為“文件”。第二步：設(shè)置ID給這幾個(gè)元件設(shè)定ID，分別是：fileButtonChose、fileButtonClick、fileButtonPath、fileButtonList。圖中藍(lán)色的按鈕是主要交互按鈕，默認(rèn)不需要設(shè)置ID。第三步：添加交互動(dòng)作接下來我們開始給每一個(gè)元件添加交互動(dòng)作1.fileButtonChose，文本框主要腳本代碼寫在了這個(gè)元件上，通過Javascript模擬了文件選擇動(dòng)作，并把文件名推送給過渡元件。選中文本框以后，添加一個(gè)“隱藏”交互動(dòng)作，當(dāng)隱藏時(shí)，打開鏈接到URL，然后把javascript代碼貼進(jìn)去。代碼在這里，可以直接拷貝粘貼如果你是用的是Axure8，可能會(huì)出bug，這時(shí)候嘗試修改children()[1]；files[0]；這兩個(gè)數(shù)組的序號(hào)，原因是Axure不同版本生成的HTML結(jié)構(gòu)有差異，導(dǎo)致javascript對象指針錯(cuò)誤。javascript:varfileButtonSelect=$("[data-label='[[T]]']").children()[1];$("[data-label='[[T]]']").change(function(){varfileButtonName=fileButtonSelect.files[0].name;$('[]pspan').html(fileButtonName);$("[data-label='fileButtonClick']").click();});2.fileButtonClick，矩形這是一個(gè)過渡的元件，因?yàn)閖avascript無法直接操作中繼器，所以使用一個(gè)元件來觸發(fā)中繼器的動(dòng)作。添加交互單擊時(shí)使中繼器fileButtonList添加一行數(shù)據(jù)。這里使用了一個(gè)局部變量[[LVAR1]]，變量值是fileButtonPath的元件文本3.fileButtonPath，矩形這是一個(gè)過渡的元件，因?yàn)閖avascript無法直接生成原生交互可以使用的全局變量，所以使用一個(gè)元件文本來緩存文件名。這個(gè)元件不需要添加交互。4.點(diǎn)擊上傳，矩形這是可自定義視覺樣式的主觸發(fā)按鈕?！包c(diǎn)擊上傳”按鈕添加一個(gè)單擊動(dòng)作，填入代碼javascript:fileButtonSelect.click();并且設(shè)定移入移出的交互，切換fileButtonChose文本框的隱藏狀態(tài)。5.fileButtonList，中繼器中繼器的內(nèi)部元件的結(jié)構(gòu)是這樣的，其中有一個(gè)ID為fileName的矩形，作為文件名的展示，另外還有一個(gè)刪除按鈕，可以對中繼器的內(nèi)容列表進(jìn)行操作。整體來看是這樣：中繼器fileButtonList的數(shù)據(jù)表暫時(shí)只做了一個(gè)字段PicName，你可以根據(jù)需求增加。制作完中繼器，我們需要添加一個(gè)交互動(dòng)作，作為加載時(shí)給內(nèi)部的fileName做文本展示。內(nèi)部的刪除按鈕，可以加上這段交互動(dòng)作到這里，我們基本完成了整個(gè)元件的功能制作。創(chuàng)建動(dòng)態(tài)面板通過創(chuàng)建動(dòng)態(tài)面板，把不需要顯示的元件隱藏。為了讓元件看起來更美觀，我們可以通過動(dòng)態(tài)面板的可見區(qū)域的設(shè)置完成這個(gè)。這是Axure系列的第一篇文章，文筆和表達(dá)方式還不成熟，歡迎大家提建議。演示