Axure中可以很方便的调用JS来实现一些效果
Axure调用JS的方式
- 在交互中选择打开链接,根据需要实现的内容可以选择点击时打卡,也可以选择载入时打开
- 选择“链接到URL或文件路径“,点击fx,在弹出的窗口中可以输入javascript伪协议代码。
- 大部分引用的JS都是站外的JS,如果是离线环境,可以将所需要的JS文件下载到D:\Program Files (x86)AxureAxure RP 9DefaultSettingsPrototype_Filesresources文件夹
- 并在调用的时候,src=”resources/scripts/echarts.min.js”,就可以了,这样在打包站点zip的时候,这个依赖的js包会被打包进去。
Axure接入echarts
javascript:
var script = document.createElement('script');
script.type = "text/javascript";
script.src ="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js";
document.head.appendChild(script);
setTimeout(function(){
var dom =$('[data-label=test]').get(0);
var myChart = echarts.init(dom);
var option;
XXXXXXXXXXX
if (option && typeof option === "object"){
myChart.setOption(option, true);
}}, 800);
- 新建一个矩形并命名,在交互中使用载入时打开链接,并按照上面的js接入教程复制就行
- 语句对比网上教程做了一些变化,因为有很多echarts并不是option开头的,所以,把语句分成了定义和赋值两部分,简单来说,就是把语句中红色的test替换成你命名的那个矩形,把xxxxxx替换成echarts的语句就可以了
- 存在问题,比如我希望使用地图类的echarts,因为包含了另一个地图相关的js,整个js就不生效了,不知道为啥。
Axure实现网页全屏
网页全屏:
javascript:
function requestFullScreen(element) {
var requestMethod = element.requestFullScreen ||
element.webkitRequestFullScreen ||
element.mozRequestFullScreen ||
element.msRequestFullScreen;
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
};
requestFullScreen(document.documentElement);
退出全屏:
javascript:
function exitFull() {
var exitMethod = document.exitFullscreen ||
document.mozCancelFullScreen ||
document.webkitExitFullscreen ||
document.webkitExitFullscreen;
if (exitMethod) {
exitMethod.call(document);
} else if (typeof window.ActiveXObject !== "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
};
exitFull();
- 参照上述的js教程,在点击中加入上面的js脚本
- 为保证全屏和退出全屏的正常切换,可以使用动态面板,在点击时增加另一个互动,动态面板切换state
原创文章,作者:熊阿初,如若转载,请注明出处:https://www.guofc.com/1097.html