Axure 發佈成html文件後 如何使可交互元素持續高亮

交代下故事的背景   首先呢,因爲繪製的原型圖不是完整的,裏面存在可以進行交互操作也有不可以的。把這個原型發佈之後呢,和同事交流的時候,同事會一通亂點,因爲他不知道哪些可以點 哪些不可以點。自己也會被弄混亂,記不得哪些能交互了。所以,就希望Axure能提示高亮提示,哪些是能進行交互的元素。

抱着這個疑問,一通百度之後,找到了一個解決方案。可以先看這個瞭解下。

http://www.raedme.cn/tutorial/375.html

這裏轉載下內容:通常情況下,Axure生成HTML文件預覽時,默認的顯示效果是這樣的:

我們可以通過點擊側邊欄的 Highlight interactive elements 來將帶有交互事件的元件高亮顯示,就像下面這樣:

如果說我想在生成的HTML文件預覽時默認把帶有交互事件的元件高亮顯示出來,可以通過下面這種方式來實現。因爲Axure沒有相關的配置項,所以我們智能在生成HTML文件後,修改相應的文件即可。

具體步驟如下:在生成的HTML文件夾下的 resources\scripts 路徑下打開 startPost.js 文件,找到 function highlight_interactive(event)  代碼,在其前面增加如下代碼,然後保存即可。

$(function(){
$(‘#highlightInteractiveButton’).addClass(‘sitemapToolbarButtonSelected’);
$axure.messageCenter.postMessage(‘highlightInteractive’, true);
//Add ‘hi’ hash string var so that stay highlighted across reloads
setVarInCurrentUrlHash(HIGHLIGHT_INTERACTIVE_VAR_NAME, 1);
});

按照操作,一通找。可能與博主使用的Axure版本的不一致,我找不到startPost.js文件。也是費了一番勁,還好我沒有放棄。終於在plugins\sitemap\sitemap.js中找到了博主說的函數。

運行原型html文件,觸發高亮之後,當前頁面能始終保持高亮。但是 我在當前頁面中通過內聯框架跳轉了很多頁面。每次頁面跳轉之後,框架內的新頁面還是不能高亮,仍需要點擊高亮按鈕。我想要到達就算是頁面刷新也能保持高亮。

有這種需要的小夥伴,就可以像我這樣。在resources\scripts\axure\init.temp.js中,修改初始化時的加載操作。找到

var _processTempInit = function()   在函數體內添加$axure.messageCenter.postMessage('highlightInteractive', true);

只要在$ax.event.initialize();之前應該都可以。我就是隨意放了一個位置。

這樣即便是刷新跳轉不同頁面,也能使頁面交互元素持續保持高亮。這樣只要頁面加載,就會自動高亮交互元素,也不用在站點地圖中點擊高亮按鈕了。

PS:使用的Axure版本是Axure RP8

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章