某人是Firework的忠实用户，Firework设计完成后可以直接导出为HTML，做原型非常方便。但近几年Axure开始流行，于是某人被迫投身Axure门下，当时MAC版的Axure问题多多，这让他很不高兴，四处搜罗可以重现Firework荣光的玩意，最近他找到了IxEdit，但一直装不上，于是直接扔给我捣鼓，故在此汇报研究成果。

IxEdit可以让设计师根据自己的想法设计页面的交互行为，并生成 jQuery+ jQueryUI的代码。它不是原型设计工具，而是一个js代码生成器，只专注于交互效果，所以它和一些只能生成原型，不能做交互效果的工具——比如Firework是相当绝配的。相比Axure，IxEdit依靠Web浏览器来运行，不受平台的制约，而且生成的代码也可以直接使用。目前还是Beta版，也许正式release的时候会有更完善的功能。

Install

之前Web开发中，本地存储是个很麻烦的问题，于是Google开发了Google Gears，并将其内置在Chrome中，但HTML5推出后这个问题已经被解决了，Google不再更新Google Gears，而且Chrome10以上版本中去掉了Google Gears，于是这就造成了麻烦，大家都使用的是高版本的浏览器，而且通常都是非Windows环境，所以很难安装Google Gears。我把ixEdit对Google Gears依赖的部分先注释掉了，现在保存还有问题，但是可以运行，之后有空我会慢慢修正Bug。点这里查看不依赖Google Gears的ixEdit。

目前已经测试通过的环境：

• Windows: 1.直接使用Chrome10以下版本；2.使用IE9以下版本打开并安装Gears for windows; 3.使用Firefox3.6以下版本打开并安装Gears for windows;
• Linux: 1.直接使用Chrome10以下版本；2.在Firefox3.6中安装本文后面的扩展；
• Mac: 至少目前在Mentor的机器上试过了几个版本的Chrome和Safari，还未成功= =||

只要装好了Google Gears，剩下的就很简单了，点击这里下载Package包，在HTML中引入js和样式：

<! ixEdit把jquery和jqueryui整合到这一个js里了 -->
<script src="jquery/jquery-plus-jquery-ui.js"></script>

<!-- 使用xedit时需要的js和css文件，实际发布的时候不需要 -->
<script src="ixedit/ixedit.packed.js"></script>
<link type="text/css" href="ixedit/ixedit.css" rel="stylesheet" />	

具体可以参考压缩包中的readme.html。安装后会确认是否接受Gears读写本地文件，确认之后就可以看到界面了：

Use

IxEdit本身可以涵盖JQ几乎所有的Effect，大部分DOM操作，可以很方便的绑定各种鼠标/键盘事件，但不能生成AJAX。

首先要选择Action，即事件如何被触发，其次要设置Reaction，当这个动作被触发后执行哪些动作。还可以设置Condition，即在满足什么条件的情况下，Action和Reaction才会被执行。下图演示的是，当点击Submit按钮，如果Username的value是?，就弹出错误提示，整个设置不需要任何的JQ知识就能完成：

最后，选择菜单中的Deploy，它就能自动生成jQuery代码可。

Afterword

原型设计工具很多，有桌面的，有在线的，或者我们还可以手绘。但现在的Web开发越来越强调用户体验，交互的设计也越来越重要，IxEdit提供了一个简单易用的解决方案。由于其本身是开源的，所以我去掉了其中的本地存储功能，这样就不需要安装Google Gears了，但也丢失了存储功能，所以如果有人能用HTML5重写这部分会更好 =)