Axure里能用一行HTML代碼搞定的，從不用畫的

用Axure撰寫交互文檔的時候，遇到太多次這樣的情況了：程序員哥哥用一行HTML代碼就能搞定的事情，愣是要拖三四個控制項組合在一起，還畫的一點也不像。

比如，畫個上傳文件的輸入框(不用進行複雜的設計，它只很長的表單中的一部分)？一般的步驟是下面這樣，還不一定畫得跟開發結果一模一樣：

如果要做出可交互的原型，就又要再麻煩好幾步了。當然，提前做好組件庫直接拖過來的不算，那樣無論多複雜，都只是一步的事。

這麼個控制項，用HTML代碼畫出樣子來，只用一行：

<input type=file multiple>

奈何Axure又沒有提供可以直接輸入HTML代碼的控制項，只能自己想辦法了。以前我介紹過如何在Axure中使用js代碼和css樣式，這次就用js來搭橋吧。搭橋之前，先研究下Axure生成HTML文件的規律。

首先，隨便創建兩個Box，再隨便起個同樣的名字：

然後預覽，在chrome里檢查元素：

可以看到，我在Axure里畫了一個Box寫了些文字，實際上是被轉換成了好幾層div標籤，最外層的div的data-label屬性就是在Axure里給Box起的名字。整體結構還是挺簡單的，所以利用上次講到的「在Axure中使用自定義CSS樣式及JS語句」，給Box的OnLoad事件增加一個用例：

javascript: $(document).ready(function() { //假設code1是給Box控制項起的名字，考慮到可能有重名，直接用each遍歷 $([data-label=code1]).each(function() { $(this).html($(this).find(p).text()) })});void(0);

然後就可以直接在Box里寫代碼了，複製多份，分別填入不同的HTML代碼。實際應用的結果：

______________________________

微信公眾號：DesignGB

關於互聯網產品設計，以及一些奇怪的東西