【其他】页面预览时默认高亮显示互动元素的实现方法

通常情况下,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);
});

 

评论(1)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

  1. 高亮CSS代码-resources\css\axure_rp_page.css
    .legacyPulsateBorder {
    /*border: 5px solid #15d6ba;
    margin: -5px;*/
    -moz-box-shadow: 0 0 10px 3px #15d6ba;
    box-shadow: 0 0 10px 3px #15d6ba;
    }
    在html中的指定div的calss中增加如上class即可实现默认高亮