axure 生成的 js 代码分析
axure 是一款极为优秀的原型制作工具。昨天使用了一下,对其生成的 html 文件中弹出窗的处理有些好奇,分析了一下。结果如下:
==========================
1、资料:
axure资料.zip
下载自:
http://vdisk.weibo.com/s/20fH1
2、下载,解压,打开如下文件:
D:\soft\原型工具\axure范例\axure资料\axure资料\bar2\bar2\index.html
3、顶部有个“消息(1)”的链接按钮
现在需要做的是这个按钮的弹出事件是如何处理的;
4、该链接的 <DIV id=u8_rtf>,搜索 u8
----------------------
4.1、在如下文件
D:\soft\原型工具\axure范例\axure资料\axure资料\bar2\bar2\index_files\axurerp_pagespecificscript.js
看到这个函数:
function Clicku8(e)
{
if (true) {
rdo0xiaoxi(e);
}
}
----------------------
4.2、rdo0xiaoxi 函数
function rdo0xiaoxi(e) {
if (true) {
SetPanelVisibilityu19("");
}
}
----------------------
5、搜索 [SetPanelVisibility] 关键字
找到这个函数:
D:\soft\原型工具\axure范例\axure资料\axure资料\bar2\bar2\Resources\axurerp_pagescript.js
function GetDynamicPanelScript(dpId, numberStates) {
----------------------
6、搜索 [GetDynamicPanelScript] 关键字
D:\soft\原型工具\axure范例\axure资料\axure资料\bar2\bar2\index_files\axurerp_pagespecificscript.js
eval(GetDynamicPanelScript('u19', 1));
eval(GetDynamicPanelScript('u5', 1));
(其实,这两句代码就在 4.2 的代码的上面)。
=========================================
至此,已经可以知道 axure 弹出层是如何处理的了。
分享到:
相关推荐
用户将学习到如何在Axure中插入JavaScript代码,如何设置动态面板的属性以更新其内容,以及如何在用户交互时触发这些动态变化。通过这种方式,原型不仅能展示静态界面,还能模拟实际应用中的动态行为。 此外,HTML...
4. **随机数生成算法**:虽然Axure不能直接运行编程语言,但你可以利用JavaScript表达式来实现简单的随机数生成。例如,`Math.random()` 函数可以生成0到1之间的随机数,通过乘以最大值和最小值的差,再加上最小值,...
在源码层面,Axure并没有公开其源代码,它是一款商业软件,由美国Axure公司开发并维护。尽管无法深入到源码内部去探究,但用户可以通过API或插件扩展其功能,比如自定义交互行为、动态面板或者宏等。 在设计过程中...
5. **JavaScript嵌入**:Axure支持嵌入JavaScript代码,以实现更复杂的功能。在这个教程中,学习者可能会学到如何编写和嵌入JavaScript,使得标签云可以响应用户的交互。 6. **交互事件**:设置鼠标悬停、点击等...
同时,Axure还支持自定义脚本,使得高级用户可以编写JavaScript代码来实现更定制化的功能。 此外,Axure生成的原型可以导出为HTML和CSS,便于开发者参考和实现。团队协作也是Axure的一大优势,支持版本控制和评论...
Axure主要用途是原型设计,在产品制定时供参考了解项目,以图为主和框架为主,而不是代码,通过Axure生成的html并不能直接拿来用,因为要经过调整,重新编写,增删改查以及CSS样式表的添加。 开发要用的是...
6. **协作和分享**:AXURE生成的原型文件可以轻松共享给团队成员或客户进行评审,这样大家可以在早期阶段就对设计达成共识,减少后期修改的工作量。 7. **节省时间**:相比于从头开始设计每个元素,使用元件库能...
此外,Axure 还支持引入其他外部资源,例如 JavaScript 库、CSS 样式等,使得原型更加丰富多彩。 在实际应用中,我们可以通过内联框架引入各种外部资源,例如引入 Google 地图、引入 YouTube 视频等,使得原型更加...
2. **自动生成HTML Prototype**:无需编写HTML或JavaScript代码,用户可以直接通过Axure设计的文档生成交互式的原型演示,便于预览和测试。 3. **Word文档生成**:Axure能够一键生成一致且专业的Word文档,将原型...
安装该插件后,Chrome浏览器能够正确解析并执行Axure原型中的JavaScript代码,使得所有预设的交互功能得以实现。这极大地提高了设计师和开发者之间的沟通效率,因为他们可以在浏览器中直接查看和测试原型的完整功能...
- **无需编程知识**:Axure的一大亮点是,使用者无需编写HTML、JavaScript或CSS代码,就能生成交互式的原型演示。这对于非开发背景的设计师来说,极大地简化了工作流程。 - **浏览器兼容性**:生成的原型页面基于...
只需使用Java脚本对Axure原型进行编程即可! scriptContext . get ( "dynamic-panel-1" ) . setNextState ( true ) ; var parent = scriptContext . getParent ( ) ; parent . fireEvent ( '...
- **协作流程**:在Axure中完成原型设计后,通常会导出为HTML/CSS/JavaScript格式,便于开发人员在Visual Studio等代码编辑器中进行代码实现。设计师和开发者的协同工作可以提高效率,减少沟通成本。 - **API预览*...
2. **自定义函数**:允许用户编写JavaScript代码,增强原型的动态功能,实现更精细的交互控制。 3. **变量与计算**:内置变量系统,可用于存储和处理数据,支持简单的计算和逻辑判断。 四、协作与共享 1. **版本...
至于标签中提到的"java",虽然这个插件主要基于JavaScript编写,但Axure RP本身支持导出Java Script Wireframes,这是一种用于生成可交互原型的JavaScript代码,便于开发人员理解并实现原型。 总的来说,"AxureRP_...
- **核心优势**:无需编写HTML或JavaScript代码即可实现交互式原型设计,且支持自动保存文档以保障文件安全。 #### 三、产品原型设计工具对比分析 在进行产品原型设计时,产品经理和设计师通常会面临多种工具的选择...
4. **快速生成HTML原型**:设计完成后,Axure RP 8可以直接生成HTML和CSS代码,以及JavaScript交互,便于团队成员预览和测试,同时也方便开发者进行后续开发。 5. **协作与共享**:软件内置了版本控制和协作功能,...
它能够帮助用户快速创建带注释的wireframe(线框图),无须编写HTML或JavaScript代码,就能生成交互式HTML原型演示。此外,Axure RP还能根据设计稿一键生成专业的Word版本原型设计文档,极大地提高了工作效率。 ...