1. 熊阿初知识百货铺 | 猫主子的成长首页
  2. 代码及教程

[Axure]Axure中JS的一些便捷使用

熊阿初 • • 代码及教程 • 阅读 560

Axure中可以很方便的调用JS来实现一些效果

Axure调用JS的方式

  • 在交互中选择打开链接，根据需要实现的内容可以选择点击时打卡，也可以选择载入时打开

[Axure]Axure中JS的一些便捷使用

  • 选择“链接到URL或文件路径“，点击fx，在弹出的窗口中可以输入javascript伪协议代码。

[Axure]Axure中JS的一些便捷使用

  • 大部分引用的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

赞 (0)
熊阿初的头像熊阿初
0 8
上一篇 2023年4月6日
下一篇 2024年7月9日

相关推荐

发表回复

登录后才能评论

评论列表（8条）