<p class="descriptionArea">
从昨天看到<strong>IxEdit</strong>以后,我就被它深深的迷住了。试用、研究、汉化,整整忙活了一天。现在就将现阶段使用的感受给大家汇报一下,也希望更多的人可以喜欢上这个超级牛B的JavaScript开发工具。
</p>
<h3>前言</h3>
<center>
<img src="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/IxEdit_logo.png" alt="IxEdit"><br><a href="http://www.cnblogs.com/JustinYoung/archive/2009/11/18/ixedit.html" title="">IxEdit:傻瓜式JavaScript开发工具</a>
</center>
<p>
实在没有什么语言,能表达我看到这个<strong>IxEdit</strong> JavaScript开发工具时的兴奋。举个例子来说就是:你已经在沙漠里徒步走了两三天了,中间没有喝任何水。就在你就要虚脱,以为自己快要完蛋的时候,突然看到一颗树,树下铺着一张绿色的地摊,地毯上躺着一个漂亮的裸女,裸女怀里抱着满满的一瓶水。而且还充满诱惑的想你招着手,如同路边美容院的小妞。</p>
<p>为了让你能体会到这种牛叉的感觉,我建议你下看一下这边的这段,我刚刚录制的一段视频。这段视频简单的讲解了,IxEdit是什么玩意,它能做什么,以及简单的教程。</p>
<h3>介绍IxEdit的视频</h3>
<center>
<br><a href="http://www.cnblogs.com/JustinYoung/archive/2009/11/18/ixedit.html" title="IxEdit视频介绍">IxEdit视频介绍</a>
</center>
<h3>IxEdit的简介</h3>
<p>是的,就如同你在视频中看到的,IxEdit是一个傻瓜式的JavaScript开发工具(其实就是JavaScript代码库)。无需掌握什么JavaScript基础,你就利用IxEdit方便的制作出一些常用的很牛叉的页面动态、交互效果。</p>
<p>想一想:如果你花费2个小时,把这个工具介绍给你们公司的美工、网页设计师(一般情况下,她们虽然有很强的设计能力和写静态页面的能力,但是JavaScript技能较差),告诉她们如何使用。当她们掌握了以后,她们就再也不用为一些简单的JavaScript代码来烦你啦。兹鉴于一般公司的美工、网页设计师都是漂亮的女孩子,所以,当她们掌握了制作JavaScript效果的时候都会十分的高兴和兴奋。这时候你就可以对她们说:“这个工具,其实还有高级用法,我上班的时候比较忙,可能无法教你,这样吧!晚上12点的时候,来我宿舍,我来教你。”(注意:说这句话的时候,一定要十分镇静,不能慌乱,要表现的很斯文,很的样子。否则你家的床再大也没用!)</p>
<p>所以,从这个角度来说IxEdit真是神一样的工具。无论是你JavaScript白痴,还是JavaScript高手,完全都可以用它来工作,或者泡妞!神器!果真是神器呀!</p>
<h3>IxEdit实战</h3>
<p>好了,让我们来实战一下IxEdit吧。话说这玩意还真是有点麻烦,因为IxEdit的官方网站:<a href="http://www.ixedit.com/" title="" target="_blank">http://www.ixedit.com/</a> 好像还不是很完善的样子。虽然有这指导那例子的,但是一来是全英文,二来是不太符合中国人习惯,竟然没有给出一个较为完整的例子包,所以在这里,我就按照咱中国人的习惯,给出step by step,然后最后给一个完整的例子压缩包。包里面什么东西都有啦。这样才会方便你在本地研究。好吧,让我们开始吧!</p>
<h4>第一步:先把需要的东西找齐</h4>
<p>如果要使用IxEdit这个JavaScript开发工具,首先要准备好一下东西,具体它们都有什么用,等下我来讲解。</p>
<div class="downloadList">
<h3>IxEdit需要的东西列表,没有的话,点击去下载</h3>
<ul class="uldownloadList">
<li>
<a href="http://tools.google.com/gears/" title="Google Gears" target="_blank">Google Gears</a>如果没有则需要第二条的浏览器</li>
<li class="evenLi">如果没有Google Gears,你则需要<a href="http://www.google.com/chrome?hl=zh_CN" title="Google Chome浏览器" target="_blank">Google Chome浏览器</a>或者<a target="_blank" href="http://www.apple.com.cn/safari/download/" title="Safari浏览器">Apple的Safari浏览器</a>
</li>
<li><a href="http://docs.jquery.com/Downloading_jQuery" title="jQuery">jQuery 库 1.3 以上版本</a></li>
<li class="evenLi"><a href="http://jqueryui.com/download" title="jQueryUI">jQuery UI 库 1.7 以上版本</a></li>
<li>
<a href="http://www.ixedit.com/download/" title="IxEdit">IxEdit js库文件</a>:可以暂不下载,文章最后会提供已汉化的英、中、日三语版本</li>
</ul>
</div>
<!--end: downloadList-->
<p>好啦,让我们来说说这复制多样的先决条件吧!</p>
<p>IxEdit虽然说是JavaScript开发工具,其实也就是一个基于jQuery和jQuery UI 的JavaScript 脚本库而已。所以,需要jQuery 和 jQuery UI 。但是IxEdit是一个超级牛叉的JavaScript库,甚至需要用到本地数据库,所以这玩意需要听上去非常牛逼的Google Gears。</p>
<center>
<img src="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/IxEdit_001.gif" alt="IxEdit需要GoogleGears支持"><br><a href="http://www.cnblogs.com/JustinYoung/archive/2009/11/18/ixedit.html" title="">IxEdit需要GoogleGears支持,我汉化的时候自嘲了一把</a>
</center>
<p>虽然,我在汉化的时候自嘲了一把,但是经过我不同阶段,无数次努力,依然没有办法把从Google官方下载Google Gears的安装包,安装成功(下载的是在线安装包,安装时需要联网)。使我非常强烈的感到生长在祖国围墙内真是十分的安全。</p>
<p>所以,安装Google Gears的路就断了。不过,没有关系,虽然没有办法按照Google Gears,但是我们可以曲线救国,Google Gears不是Google出品的吗?那么Google的浏览器Chome应该一定自带这玩意吧。运气非常好,这是真实的,所以,如果使用Chome浏览器的话,自动就有了Google Gears。另:Apple公司的Safari浏览器也自带这玩意。所以,麻烦的Google Gears问题就解决了。</p>
<p>也许有朋友就问:是不是制作出来的网页也也需要Google Gears呢?其实没有关系啦,需要Google Gears就是开发环境而已,<strong>开发出来的网页就不再需要Google Gears了</strong>。这就如同,我们用VS2008开发出来的网站,但是用户浏览我们制作出来的网站时,并不需要安装VS2008一样。</p>
<p>IxEdit js库文件,这个,貌似没有什么好说的啦,没这个玩意,你搞个P呀。</p>
<h4>第二步:在本机部署开发环境吧</h4>
<p>“部署开发环境”看上去真是非常专业的字眼,其实就是下载一个压缩包,然后解压一下。之所以用这么屌的字眼,是因为这样才能在公司美工小MM面前显的你够屌,够帅,够牛逼,才能在专业领域征服她们高傲的意识。</p>
<p>好吧,让我们来下载这个超就牛逼的可以“部署开发环境”的压缩包吧!</p>
<div style="height: 55px; background-color: #f6f6f6; text-align: center; margin-bottom: 15px;">
<a title="IxEdit下载" href="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/IxEdit_pack_cn.rar">
<img style="" src="http://images.cnblogs.com/cnblogs_com/justinyoung/common/000download.gif" alt="IxEdit下载">IxEdit_pack_cn.rar</a>
</div>
<p>把这玩意解压,牛逼的本机开发环境就部署完毕啦!当然,如果你觉得在美工小MM面前,只是鼠标点击一下右键,然后选择一下“解压到...”不够屌的话,你可以在中途穿插一些看上去非常华丽,但是毫无用处的Dos命令。一般情况下,当美工小MM看到黑乎乎的窗口,需要输入一些看不懂的命令,然后窗口发生巨大变化的时候,她们总是会和黑客联系起来,从而对你产生神秘感和崇拜感。如果Dos不熟悉的话,这里友情提供一个,效果非常不错,黑乎乎的窗口胡发生剧烈的变化,那就是:<strong>dir /w</strong> 囧rz~</p>
<h4>第三步:开始尝试使用IxEdit吧</h4>
<p>用EditPlus打开压缩包里面的<abbr title="HyperText Markup Language">HTML</abbr>例子文件(我个人是EditPlus的死忠,所以使用这个,大家可以随便用什么编辑器打开此文件)。然后会看到一些例子和黑乎乎的弹出层,这个弹出层就是整个IxEdit的灵魂了。通过它,只要简单的点击几下鼠标,就可以完成任务。</p>
<center>
<img src="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/IxEdit_002.gif" alt="IxEdit主界面"><br><a href="http://www.cnblogs.com/JustinYoung/archive/2009/11/18/ixedit.html" title="">IxEdit主界面,我使用的是已经汉化后的版本</a>
</center>
<p>IxEdit主界面就是上面这个黑乎乎的在页面里面的弹出层了。关于语言版本,我需要大致说一下:<strong>IxEdit会根据你浏览器的语言版本进行判断</strong>,使用何种语言,官方默认提供的是英语和日语,我有点不爽竟然顺便提供了日语,所以,花了一些时间,做了一些主界面的汉化。不过,现阶段只是做了一些简单的主界面的汉化,一些帮助内容仍然没有汉化,而且,我的英文水平很烂,翻译的很是很好。如果您想帮助我们一起汉化此牛逼软件,请访问博客园<a href="http://space.cnblogs.com/group/ixedit/" title="IxEdit小组" target="_blank">IxEdit小组</a>。让我们逐步完善汉化版本而努力!</p>
<h4>第四步:开始尝试使用IxEdit制作简单js效果吧</h4>
<p>如何使用某某工具,这玩意用长篇大论+截图也不如直接用视频来的直接,所以,我决定采用视频的形式来讲解一下。如果看不了在线视频的朋友,可以到文章底部下载视频文件,下载到本地查看。</p>
<h4>第五步:讲解一下常用的对DOM操作的效果</h4>
<p>使用IxEdit可以方便的对DOM进行操作,包括:</p>
<ol style="margin: 15px 2px 15px 25px;">
<li style="">添加Class、移除Class</li>
<li style="">改变style</li>
<li style="">改变值 </li>
<li style="">改变状体</li>
<li style="">移除属性</li>
<li style="">插入HTML元素</li>
<li style="">清空元素</li>
<li style="">移除元素 </li>
</ol>
<p>视频中将会讲解一些常用的DOM操作的应用。</p>
<center>
<a target="_blank" href="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit002.swf" title=""><img src="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit_player.jpg" alt="ixedit视频教程"></a><br><a href="http://www.cnblogs.com/JustinYoung/archive/2009/11/18/ixedit.html" title="IxEdit视频教程:如果操作DOM">IxEdit视频教程:如何操作DOM</a>
</center>
<h4>第六步:讲解一下常用的动画效果</h4>
<p>使用IxEdit可以方便的实现一些非常绚丽的动画效果,包括:</p>
<ol style="margin: 15px 2px 15px 25px;">
<li style="">隐藏、显示</li>
<li style="">滑动卷闸门</li>
<li style="">渐隐、渐显</li>
<li style="">动画效果</li>
</ol>
<p>视频中将会讲解一些常用的动画效果的应用。</p>
<center>
<a target="_blank" href="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit003.swf" title=""><img src="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit_player.jpg" alt="ixedit视频教程"></a><br><a href="http://www.cnblogs.com/JustinYoung/archive/2009/11/18/ixedit.html" title="IxEdit视频教程:如何使用动画效果">IxEdit视频教程:如何使用动画效果</a>
</center>
<h4>第七步:讲解一下常用的特殊效果</h4>
<p>使用IxEdit可以方便的实现一些特殊的效果,包括:</p>
<ol style="margin: 15px 2px 15px 25px;">
<li style="">拖动</li>
<li style="">调整尺寸</li>
<li style="">排序</li>
<li style="">日期选择</li>
<li style="">折叠面板</li>
<li style="">生成tab</li>
<li style="">弹出对话框</li>
</ol>
<p>视频中将会讲解一些常用的特殊效果的应用。</p>
<p>其他还是一些非常简单的效果,我就不浪费大家时间讲解了。大家只要稍微摸索一下就会了解啦。</p>
<center>
<a target="_blank" href="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit004.swf" title=""><img src="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit_player.jpg" alt="ixedit视频教程"></a><br><a href="http://www.cnblogs.com/JustinYoung/archive/2009/11/18/ixedit.html" title="IxEdit视频教程:如何使用特殊效果">IxEdit视频教程:如何使用特殊效果</a>
</center>
<h4>第八步:打开IxEdit的高级模式</h4>
<p>其实IxEdit是有高级模式的(使用 ixedit.advancedMode=true;),打开高级模式会将一些平时不常用的功能打开,供高手使用。下面的视频将告诉你,如果打开IxEdit的高级模式。</p>
<center>
<a target="_blank" href="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit005.swf" title=""><img src="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit_player.jpg" alt="ixedit视频教程"></a><br><a href="http://www.cnblogs.com/JustinYoung/archive/2009/11/18/ixedit.html" title="IxEdit视频教程:如何打开IxEdit高级模式">IxEdit视频教程:如何打开IxEdit高级模式</a>
</center>
<h4>第九步:如果部署IxEdit生成的页面代码</h4>
<p>忙活了半天,如果将成果应用到最终的页面中,这步就会讲到。部署完毕后,就不再需要Google Gears、chome浏览器、IxEdit js库文件等等乱七八糟的东西啦。至于到底如何使用IxEdit生成的代码,请看下面的视频教程吧!</p>
<center>
<a target="_blank" href="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit006.swf" title=""><img src="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit_player.jpg" alt="ixedit视频教程"></a><br><a href="http://www.cnblogs.com/JustinYoung/archive/2009/11/18/ixedit.html" title="IxEdit视频教程:如何使用IxEdit生成的js代码">IxEdit视频教程:如何使用IxEdit生成的js代码</a>
</center>
<h3>最后唧歪几句</h3>
<p>因为IxEdit使用了Google Gears,所以,你的设置和工作,是可以保存起来,下次打开继续工作的。有点像“保存”和“打开”功能。默认情况下会自动保存。如果你需要“另存为”的话,可以点击左上角的IxEdit菜单,选择“导出/导入设置”命令实现。</p>
<p>IxEdit的确是个好东西,让可以让不会JavaScript的人方便的实现常见的JavaScript效果。与jQuery和jQuery UI的配合更是可以让你轻松的实现绚丽的效果。</p>
<p>但是IxEdit暂时还处于beta版,所以,还存在很多可以提升的空间。让我们对此充满期待吧!</p>
<p>想参加IxEdit汉化的朋友,请来博客园的<a href="http://space.cnblogs.com/group/ixedit/" title="IxEdit小组" target="_blank">IxEdit小组</a>哦。让IxEdit不仅仅只有官方英文版和日文版,也要有中文版哦!</p>
<h3>本文所有相关下载汇总</h3>
<div class="downloadList">
<h3>IxEdit相关下载列表</h3>
<ul class="uldownloadList">
<li><a href="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/IxEdit_pack_cn.rar" title="IxEdit示例压缩包">本文提到的IxEdit示例压缩包(包含所有的js文件、css文件、汉化后的IxEdit文件)</a></li>
<li class="evenLi"><a href="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit001.swf" title="IxEdit视频教程">IxEdit视频教程001:介绍</a></li>
<li><a href="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit002.swf" title="IxEdit视频教程">IxEdit视频教程002:DOM操作</a></li>
<li class="evenLi"><a href="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit003.swf" title="IxEdit视频教程">IxEdit视频教程003:动画</a></li>
<li><a href="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit004.swf" title="IxEdit视频教程">IxEdit视频教程004:特殊效果</a></li>
<li class="evenLi"><a href="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit005.swf" title="IxEdit视频教程">IxEdit视频教程005:打开高级模式</a></li>
<li><a href="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit006.swf" title="IxEdit视频教程">IxEdit视频教程006:部署生成的JavaScript代码</a></li>
</ul>
</div>
<!--end: downloadList-->
<p>对CRM模板熟悉的朋友,可以参加:<a href="http://www.cnblogs.com/JustinYoung/articles/weiruan-crmdasai.html" title="" target="_blank">微软CRM模板设计大赛</a></p>
从昨天看到<strong>IxEdit</strong>以后,我就被它深深的迷住了。试用、研究、汉化,整整忙活了一天。现在就将现阶段使用的感受给大家汇报一下,也希望更多的人可以喜欢上这个超级牛B的JavaScript开发工具。
</p>
<h3>前言</h3>
<center>
<img src="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/IxEdit_logo.png" alt="IxEdit"><br><a href="http://www.cnblogs.com/JustinYoung/archive/2009/11/18/ixedit.html" title="">IxEdit:傻瓜式JavaScript开发工具</a>
</center>
<p>
实在没有什么语言,能表达我看到这个<strong>IxEdit</strong> JavaScript开发工具时的兴奋。举个例子来说就是:你已经在沙漠里徒步走了两三天了,中间没有喝任何水。就在你就要虚脱,以为自己快要完蛋的时候,突然看到一颗树,树下铺着一张绿色的地摊,地毯上躺着一个漂亮的裸女,裸女怀里抱着满满的一瓶水。而且还充满诱惑的想你招着手,如同路边美容院的小妞。</p>
<p>为了让你能体会到这种牛叉的感觉,我建议你下看一下这边的这段,我刚刚录制的一段视频。这段视频简单的讲解了,IxEdit是什么玩意,它能做什么,以及简单的教程。</p>
<h3>介绍IxEdit的视频</h3>
<center>
<br><a href="http://www.cnblogs.com/JustinYoung/archive/2009/11/18/ixedit.html" title="IxEdit视频介绍">IxEdit视频介绍</a>
</center>
<h3>IxEdit的简介</h3>
<p>是的,就如同你在视频中看到的,IxEdit是一个傻瓜式的JavaScript开发工具(其实就是JavaScript代码库)。无需掌握什么JavaScript基础,你就利用IxEdit方便的制作出一些常用的很牛叉的页面动态、交互效果。</p>
<p>想一想:如果你花费2个小时,把这个工具介绍给你们公司的美工、网页设计师(一般情况下,她们虽然有很强的设计能力和写静态页面的能力,但是JavaScript技能较差),告诉她们如何使用。当她们掌握了以后,她们就再也不用为一些简单的JavaScript代码来烦你啦。兹鉴于一般公司的美工、网页设计师都是漂亮的女孩子,所以,当她们掌握了制作JavaScript效果的时候都会十分的高兴和兴奋。这时候你就可以对她们说:“这个工具,其实还有高级用法,我上班的时候比较忙,可能无法教你,这样吧!晚上12点的时候,来我宿舍,我来教你。”(注意:说这句话的时候,一定要十分镇静,不能慌乱,要表现的很斯文,很的样子。否则你家的床再大也没用!)</p>
<p>所以,从这个角度来说IxEdit真是神一样的工具。无论是你JavaScript白痴,还是JavaScript高手,完全都可以用它来工作,或者泡妞!神器!果真是神器呀!</p>
<h3>IxEdit实战</h3>
<p>好了,让我们来实战一下IxEdit吧。话说这玩意还真是有点麻烦,因为IxEdit的官方网站:<a href="http://www.ixedit.com/" title="" target="_blank">http://www.ixedit.com/</a> 好像还不是很完善的样子。虽然有这指导那例子的,但是一来是全英文,二来是不太符合中国人习惯,竟然没有给出一个较为完整的例子包,所以在这里,我就按照咱中国人的习惯,给出step by step,然后最后给一个完整的例子压缩包。包里面什么东西都有啦。这样才会方便你在本地研究。好吧,让我们开始吧!</p>
<h4>第一步:先把需要的东西找齐</h4>
<p>如果要使用IxEdit这个JavaScript开发工具,首先要准备好一下东西,具体它们都有什么用,等下我来讲解。</p>
<div class="downloadList">
<h3>IxEdit需要的东西列表,没有的话,点击去下载</h3>
<ul class="uldownloadList">
<li>
<a href="http://tools.google.com/gears/" title="Google Gears" target="_blank">Google Gears</a>如果没有则需要第二条的浏览器</li>
<li class="evenLi">如果没有Google Gears,你则需要<a href="http://www.google.com/chrome?hl=zh_CN" title="Google Chome浏览器" target="_blank">Google Chome浏览器</a>或者<a target="_blank" href="http://www.apple.com.cn/safari/download/" title="Safari浏览器">Apple的Safari浏览器</a>
</li>
<li><a href="http://docs.jquery.com/Downloading_jQuery" title="jQuery">jQuery 库 1.3 以上版本</a></li>
<li class="evenLi"><a href="http://jqueryui.com/download" title="jQueryUI">jQuery UI 库 1.7 以上版本</a></li>
<li>
<a href="http://www.ixedit.com/download/" title="IxEdit">IxEdit js库文件</a>:可以暂不下载,文章最后会提供已汉化的英、中、日三语版本</li>
</ul>
</div>
<!--end: downloadList-->
<p>好啦,让我们来说说这复制多样的先决条件吧!</p>
<p>IxEdit虽然说是JavaScript开发工具,其实也就是一个基于jQuery和jQuery UI 的JavaScript 脚本库而已。所以,需要jQuery 和 jQuery UI 。但是IxEdit是一个超级牛叉的JavaScript库,甚至需要用到本地数据库,所以这玩意需要听上去非常牛逼的Google Gears。</p>
<center>
<img src="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/IxEdit_001.gif" alt="IxEdit需要GoogleGears支持"><br><a href="http://www.cnblogs.com/JustinYoung/archive/2009/11/18/ixedit.html" title="">IxEdit需要GoogleGears支持,我汉化的时候自嘲了一把</a>
</center>
<p>虽然,我在汉化的时候自嘲了一把,但是经过我不同阶段,无数次努力,依然没有办法把从Google官方下载Google Gears的安装包,安装成功(下载的是在线安装包,安装时需要联网)。使我非常强烈的感到生长在祖国围墙内真是十分的安全。</p>
<p>所以,安装Google Gears的路就断了。不过,没有关系,虽然没有办法按照Google Gears,但是我们可以曲线救国,Google Gears不是Google出品的吗?那么Google的浏览器Chome应该一定自带这玩意吧。运气非常好,这是真实的,所以,如果使用Chome浏览器的话,自动就有了Google Gears。另:Apple公司的Safari浏览器也自带这玩意。所以,麻烦的Google Gears问题就解决了。</p>
<p>也许有朋友就问:是不是制作出来的网页也也需要Google Gears呢?其实没有关系啦,需要Google Gears就是开发环境而已,<strong>开发出来的网页就不再需要Google Gears了</strong>。这就如同,我们用VS2008开发出来的网站,但是用户浏览我们制作出来的网站时,并不需要安装VS2008一样。</p>
<p>IxEdit js库文件,这个,貌似没有什么好说的啦,没这个玩意,你搞个P呀。</p>
<h4>第二步:在本机部署开发环境吧</h4>
<p>“部署开发环境”看上去真是非常专业的字眼,其实就是下载一个压缩包,然后解压一下。之所以用这么屌的字眼,是因为这样才能在公司美工小MM面前显的你够屌,够帅,够牛逼,才能在专业领域征服她们高傲的意识。</p>
<p>好吧,让我们来下载这个超就牛逼的可以“部署开发环境”的压缩包吧!</p>
<div style="height: 55px; background-color: #f6f6f6; text-align: center; margin-bottom: 15px;">
<a title="IxEdit下载" href="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/IxEdit_pack_cn.rar">
<img style="" src="http://images.cnblogs.com/cnblogs_com/justinyoung/common/000download.gif" alt="IxEdit下载">IxEdit_pack_cn.rar</a>
</div>
<p>把这玩意解压,牛逼的本机开发环境就部署完毕啦!当然,如果你觉得在美工小MM面前,只是鼠标点击一下右键,然后选择一下“解压到...”不够屌的话,你可以在中途穿插一些看上去非常华丽,但是毫无用处的Dos命令。一般情况下,当美工小MM看到黑乎乎的窗口,需要输入一些看不懂的命令,然后窗口发生巨大变化的时候,她们总是会和黑客联系起来,从而对你产生神秘感和崇拜感。如果Dos不熟悉的话,这里友情提供一个,效果非常不错,黑乎乎的窗口胡发生剧烈的变化,那就是:<strong>dir /w</strong> 囧rz~</p>
<h4>第三步:开始尝试使用IxEdit吧</h4>
<p>用EditPlus打开压缩包里面的<abbr title="HyperText Markup Language">HTML</abbr>例子文件(我个人是EditPlus的死忠,所以使用这个,大家可以随便用什么编辑器打开此文件)。然后会看到一些例子和黑乎乎的弹出层,这个弹出层就是整个IxEdit的灵魂了。通过它,只要简单的点击几下鼠标,就可以完成任务。</p>
<center>
<img src="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/IxEdit_002.gif" alt="IxEdit主界面"><br><a href="http://www.cnblogs.com/JustinYoung/archive/2009/11/18/ixedit.html" title="">IxEdit主界面,我使用的是已经汉化后的版本</a>
</center>
<p>IxEdit主界面就是上面这个黑乎乎的在页面里面的弹出层了。关于语言版本,我需要大致说一下:<strong>IxEdit会根据你浏览器的语言版本进行判断</strong>,使用何种语言,官方默认提供的是英语和日语,我有点不爽竟然顺便提供了日语,所以,花了一些时间,做了一些主界面的汉化。不过,现阶段只是做了一些简单的主界面的汉化,一些帮助内容仍然没有汉化,而且,我的英文水平很烂,翻译的很是很好。如果您想帮助我们一起汉化此牛逼软件,请访问博客园<a href="http://space.cnblogs.com/group/ixedit/" title="IxEdit小组" target="_blank">IxEdit小组</a>。让我们逐步完善汉化版本而努力!</p>
<h4>第四步:开始尝试使用IxEdit制作简单js效果吧</h4>
<p>如何使用某某工具,这玩意用长篇大论+截图也不如直接用视频来的直接,所以,我决定采用视频的形式来讲解一下。如果看不了在线视频的朋友,可以到文章底部下载视频文件,下载到本地查看。</p>
<h4>第五步:讲解一下常用的对DOM操作的效果</h4>
<p>使用IxEdit可以方便的对DOM进行操作,包括:</p>
<ol style="margin: 15px 2px 15px 25px;">
<li style="">添加Class、移除Class</li>
<li style="">改变style</li>
<li style="">改变值 </li>
<li style="">改变状体</li>
<li style="">移除属性</li>
<li style="">插入HTML元素</li>
<li style="">清空元素</li>
<li style="">移除元素 </li>
</ol>
<p>视频中将会讲解一些常用的DOM操作的应用。</p>
<center>
<a target="_blank" href="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit002.swf" title=""><img src="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit_player.jpg" alt="ixedit视频教程"></a><br><a href="http://www.cnblogs.com/JustinYoung/archive/2009/11/18/ixedit.html" title="IxEdit视频教程:如果操作DOM">IxEdit视频教程:如何操作DOM</a>
</center>
<h4>第六步:讲解一下常用的动画效果</h4>
<p>使用IxEdit可以方便的实现一些非常绚丽的动画效果,包括:</p>
<ol style="margin: 15px 2px 15px 25px;">
<li style="">隐藏、显示</li>
<li style="">滑动卷闸门</li>
<li style="">渐隐、渐显</li>
<li style="">动画效果</li>
</ol>
<p>视频中将会讲解一些常用的动画效果的应用。</p>
<center>
<a target="_blank" href="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit003.swf" title=""><img src="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit_player.jpg" alt="ixedit视频教程"></a><br><a href="http://www.cnblogs.com/JustinYoung/archive/2009/11/18/ixedit.html" title="IxEdit视频教程:如何使用动画效果">IxEdit视频教程:如何使用动画效果</a>
</center>
<h4>第七步:讲解一下常用的特殊效果</h4>
<p>使用IxEdit可以方便的实现一些特殊的效果,包括:</p>
<ol style="margin: 15px 2px 15px 25px;">
<li style="">拖动</li>
<li style="">调整尺寸</li>
<li style="">排序</li>
<li style="">日期选择</li>
<li style="">折叠面板</li>
<li style="">生成tab</li>
<li style="">弹出对话框</li>
</ol>
<p>视频中将会讲解一些常用的特殊效果的应用。</p>
<p>其他还是一些非常简单的效果,我就不浪费大家时间讲解了。大家只要稍微摸索一下就会了解啦。</p>
<center>
<a target="_blank" href="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit004.swf" title=""><img src="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit_player.jpg" alt="ixedit视频教程"></a><br><a href="http://www.cnblogs.com/JustinYoung/archive/2009/11/18/ixedit.html" title="IxEdit视频教程:如何使用特殊效果">IxEdit视频教程:如何使用特殊效果</a>
</center>
<h4>第八步:打开IxEdit的高级模式</h4>
<p>其实IxEdit是有高级模式的(使用 ixedit.advancedMode=true;),打开高级模式会将一些平时不常用的功能打开,供高手使用。下面的视频将告诉你,如果打开IxEdit的高级模式。</p>
<center>
<a target="_blank" href="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit005.swf" title=""><img src="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit_player.jpg" alt="ixedit视频教程"></a><br><a href="http://www.cnblogs.com/JustinYoung/archive/2009/11/18/ixedit.html" title="IxEdit视频教程:如何打开IxEdit高级模式">IxEdit视频教程:如何打开IxEdit高级模式</a>
</center>
<h4>第九步:如果部署IxEdit生成的页面代码</h4>
<p>忙活了半天,如果将成果应用到最终的页面中,这步就会讲到。部署完毕后,就不再需要Google Gears、chome浏览器、IxEdit js库文件等等乱七八糟的东西啦。至于到底如何使用IxEdit生成的代码,请看下面的视频教程吧!</p>
<center>
<a target="_blank" href="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit006.swf" title=""><img src="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit_player.jpg" alt="ixedit视频教程"></a><br><a href="http://www.cnblogs.com/JustinYoung/archive/2009/11/18/ixedit.html" title="IxEdit视频教程:如何使用IxEdit生成的js代码">IxEdit视频教程:如何使用IxEdit生成的js代码</a>
</center>
<h3>最后唧歪几句</h3>
<p>因为IxEdit使用了Google Gears,所以,你的设置和工作,是可以保存起来,下次打开继续工作的。有点像“保存”和“打开”功能。默认情况下会自动保存。如果你需要“另存为”的话,可以点击左上角的IxEdit菜单,选择“导出/导入设置”命令实现。</p>
<p>IxEdit的确是个好东西,让可以让不会JavaScript的人方便的实现常见的JavaScript效果。与jQuery和jQuery UI的配合更是可以让你轻松的实现绚丽的效果。</p>
<p>但是IxEdit暂时还处于beta版,所以,还存在很多可以提升的空间。让我们对此充满期待吧!</p>
<p>想参加IxEdit汉化的朋友,请来博客园的<a href="http://space.cnblogs.com/group/ixedit/" title="IxEdit小组" target="_blank">IxEdit小组</a>哦。让IxEdit不仅仅只有官方英文版和日文版,也要有中文版哦!</p>
<h3>本文所有相关下载汇总</h3>
<div class="downloadList">
<h3>IxEdit相关下载列表</h3>
<ul class="uldownloadList">
<li><a href="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/IxEdit_pack_cn.rar" title="IxEdit示例压缩包">本文提到的IxEdit示例压缩包(包含所有的js文件、css文件、汉化后的IxEdit文件)</a></li>
<li class="evenLi"><a href="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit001.swf" title="IxEdit视频教程">IxEdit视频教程001:介绍</a></li>
<li><a href="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit002.swf" title="IxEdit视频教程">IxEdit视频教程002:DOM操作</a></li>
<li class="evenLi"><a href="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit003.swf" title="IxEdit视频教程">IxEdit视频教程003:动画</a></li>
<li><a href="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit004.swf" title="IxEdit视频教程">IxEdit视频教程004:特殊效果</a></li>
<li class="evenLi"><a href="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit005.swf" title="IxEdit视频教程">IxEdit视频教程005:打开高级模式</a></li>
<li><a href="http://downloads.cnblogs.com/justinyoung/articleIMG/ixedit/ixedit006.swf" title="IxEdit视频教程">IxEdit视频教程006:部署生成的JavaScript代码</a></li>
</ul>
</div>
<!--end: downloadList-->
<p>对CRM模板熟悉的朋友,可以参加:<a href="http://www.cnblogs.com/JustinYoung/articles/weiruan-crmdasai.html" title="" target="_blank">微软CRM模板设计大赛</a></p>