自定義CSS樣式

Axure生成的HTML里單選框複選框一直都是默認的樣式，看久了實在是有點疲勞。所以最近研究了一下，改了改被配置文件，讓被生成的網頁文件能夠更好看一點。

其實Axure每次在生成見面時，都在引用其安裝目錄下的css文件，所以如果要修改樣式的話，只要搞明白是引用了哪些css文件，以及不同控制項是被哪些css控制的，然後相應修改就行了。

經過一翻查找，發現頁面引用的CSS的位置，在Axure安裝目錄DefaultSettingsPrototype_Files
esourcescss下，以Windows系統為例，一般是：

C:Program Files (x86)AxureAxure RP 8DefaultSettingsPrototype_Files
esourcescss

可以看到在這個文件夾下有這幾個文件：

其中的axure_rp_pages.css就是控制每個頁面的樣式表，也就是我們要修改和嵌入CSS代碼的文件。直接在裡面加入單選框的css代碼：

input[type=radio]{ -webkit-appearance:none; border-radius:50%; display: inline-block; height: 1em; width: 1em; box-shadow: hsla(0,0%,100%,.15) 0 1px 1px, inset hsla(0,0%,0%,.5) 0 0 0 1px; background-color: #fff; box-sizing: border-box;}input[type=radio]:checked{ background-color: #e67e22;}

修改之後再次生成HTML文件，效果如下：

接下來只用從網上找一些好看的css代碼，加起去就可以讓生成的網頁變漂亮了！

直接使用JS語句控制交互效果

不得不說Axure本身提供的可交互工具還是很強的，只不過作為懂一點代碼的人設計來說，經常遇到一行代碼可以搞定卻要創建很多case設置很多內容的情況。

同樣是一翻源碼和資料研究，Axure生成的網頁js部分是基於jQuery和它自己寫的axuutil完成的。隨便拿一個網頁的源碼來看：

也就是說我們可以直接用jQuery語句來做事情，這比直接用js語句要方便不少了。

使用JS語句的方式，很簡單，就是利用javascript偽協議，給任意一個事件添加用例，這裡以OnClick為例，依次選擇OpenLink -> Link to an external url or file，在輸入框中使用javascript偽協議輸入JS語句即可。

比如說要彈出警告框，直接寫上：

javascript:void(alert(請至少選擇一項！))

想要讓某個控制項隱藏，正常用Axure的話要用滑鼠點點點點點：創建onclick的use case、選擇hide動作、在很多控制項里找到要隱藏的控制項、選中、確定。而直接使用jQuery語句的話，只需要給這個控制項命個名，比如說叫」form」，然後把下面的語句加進去就好：

javascript:void($([data-label=form]).fadeOut(slow))

當然複雜的語句，還是在外部編輯器中完成再複製過去比較好。

在使用過程中發現某些jQuery語句如fadeOut()對成組的元素不起作用。解決辦法是用動態面板代替編組。

應用實例：資訊列表中一條資訊的淡隱

如下圖，將一條資訊創建為動態面板，並命名為」news_item」。這個名稱在html代碼中就是data-label屬性的值，可以通過代碼$(『[data-label=news_item]』)來操作。

添加一個按鈕，按鈕文案改為」Get Out!」，添加用例onclick：在當前窗口打開外部鏈接」javascript:eval($(『[data-label=js]』).text());void(0);」

添加一個區域文本控制項，並命名為」js」，添加用例onload：隱藏自身。這樣頁面載入時就會隱藏區域文本控制項了。

在區域文本控制項中寫入以下代碼：

if(confirm(確定要隱藏該新聞？)){$([data-label=news_item]).fadeOut(slow);}

______________________________

微信公眾號：DesignGB

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

推薦閱讀：