實(shí)在沒(méi)有什么語(yǔ)言，能表達(dá)我看到這個(gè)IxEdit JavaScript開(kāi)發(fā)工具時(shí)的興奮。舉個(gè)例子來(lái)說(shuō)就是：你已經(jīng)在沙漠里徒步走了兩三天了，中間沒(méi)有喝任何水。就在你就要虛脫，以為自己快要完蛋的時(shí)候，突然看到一顆樹(shù)，樹(shù)下鋪著一張綠色的地?cái)偅靥荷咸芍粋€(gè)漂亮的裸女，裸女懷里抱著滿(mǎn)滿(mǎn)的一瓶水。而且還充滿(mǎn)誘惑的想你招著手，如同路邊美容院的小妞。
為了讓你能體會(huì)到這種牛叉的感覺(jué)，我建議你下看一下這邊的這段，我剛剛錄制的一段視頻。這段視頻簡(jiǎn)單的講解了，IxEdit是什么玩意，它能做什么，以及簡(jiǎn)單的教程。
介紹IxEdit的視頻
IxEdit視頻介紹
IxEdit的簡(jiǎn)介
是的，就如同你在視頻中看到的，IxEdit是一個(gè)傻瓜式的JavaScript開(kāi)發(fā)工具（其實(shí)就是JavaScript代碼庫(kù)）。無(wú)需掌握什么JavaScript基礎(chǔ)，你就利用IxEdit方便的制作出一些常用的很牛叉的頁(yè)面動(dòng)態(tài)、交互效果。
想一想：如果你花費(fèi)2個(gè)小時(shí)，把這個(gè)工具介紹給你們公司的美工、網(wǎng)頁(yè)設(shè)計(jì)師（一般情況下，她們雖然有很強(qiáng)的設(shè)計(jì)能力和寫(xiě)靜態(tài)頁(yè)面的能力，但是JavaScript技能較差），告訴她們?nèi)绾问褂谩．?dāng)她們掌握了以后，她們就再也不用為一些簡(jiǎn)單的JavaScript代碼來(lái)煩你啦。茲鑒于一般公司的美工、網(wǎng)頁(yè)設(shè)計(jì)師都是漂亮的女孩子，所以，當(dāng)她們掌握了制作JavaScript效果的時(shí)候都會(huì)十分的高興和興奮。這時(shí)候你就可以對(duì)她們說(shuō)：“這個(gè)工具，其實(shí)還有高級(jí)用法，我上班的時(shí)候比較忙，可能無(wú)法教你，這樣吧！晚上12點(diǎn)的時(shí)候，來(lái)我宿舍，我來(lái)教你。”（注意：說(shuō)這句話(huà)的時(shí)候，一定要十分鎮(zhèn)靜，不能慌亂，要表現(xiàn)的很斯文，很衣冠禽獸的樣子。否則你家的床再大也沒(méi)用！）
所以，從這個(gè)角度來(lái)說(shuō)IxEdit真是神一樣的工具。無(wú)論是你JavaScript白癡，還是JavaScript高手，完全都可以用它來(lái)工作，或者泡妞！神器！果真是神器呀！
IxEdit實(shí)戰(zhàn)
好了，讓我們來(lái)實(shí)戰(zhàn)一下IxEdit吧。話(huà)說(shuō)這玩意還真是有點(diǎn)麻煩，因?yàn)镮xEdit的官方網(wǎng)站：http://www.ixedit.com/ 好像還不是很完善的樣子。雖然有這指導(dǎo)那例子的，但是一來(lái)是全英文，二來(lái)是不太符合中國(guó)人習(xí)慣，竟然沒(méi)有給出一個(gè)較為完整的例子包，所以在這里，我就按照咱中國(guó)人的習(xí)慣，給出step by step，然后最后給一個(gè)完整的例子壓縮包。包里面什么東西都有啦。這樣才會(huì)方便你在本地研究。好吧，讓我們開(kāi)始吧！
第一步：先把需要的東西找齊
如果要使用IxEdit這個(gè)JavaScript開(kāi)發(fā)工具，首先要準(zhǔn)備好一下東西，具體它們都有什么用，等下我來(lái)講解。
IxEdit需要的東西列表，沒(méi)有的話(huà)，點(diǎn)擊去下載
Google Gears如果沒(méi)有則需要第二條的瀏覽器 如果沒(méi)有Google Gears，你則需要Google Chome瀏覽器或者Apple的Safari瀏覽器 jQuery 庫(kù) 1.3 以上版本 jQuery UI 庫(kù) 1.7 以上版本 IxEdit js庫(kù)文件：可以暫不下載，文章最后會(huì)提供已漢化的英、中、日三語(yǔ)版本
好啦，讓我們來(lái)說(shuō)說(shuō)這復(fù)制多樣的先決條件吧！
IxEdit雖然說(shuō)是JavaScript開(kāi)發(fā)工具，其實(shí)也就是一個(gè)基于jQuery和jQuery UI 的JavaScript 腳本庫(kù)而已。所以，需要jQuery 和 jQuery UI 。但是IxEdit是一個(gè)超級(jí)牛叉的JavaScript庫(kù)，甚至需要用到本地?cái)?shù)據(jù)庫(kù)，所以這玩意需要聽(tīng)上去非常牛逼的Google Gears。

(點(diǎn)小圖查看大圖)
IxEdit需要GoogleGears支持，我漢化的時(shí)候自嘲了一把
雖然，我在漢化的時(shí)候自嘲了一把，但是經(jīng)過(guò)我不同階段，無(wú)數(shù)次努力，依然沒(méi)有辦法把從Google官方下載Google Gears的安裝包，安裝成功（下載的是在線(xiàn)安裝包，安裝時(shí)需要聯(lián)網(wǎng)）。使我非常強(qiáng)烈的感到生長(zhǎng)在祖國(guó)圍墻內(nèi)真是十分的安全。
所以，安裝Google Gears的路就斷了。不過(guò)，沒(méi)有關(guān)系，雖然沒(méi)有辦法按照Google Gears，但是我們可以曲線(xiàn)救國(guó)，Google Gears不是Google出品的嗎？那么Google的瀏覽器Chome應(yīng)該一定自帶這玩意吧。運(yùn)氣非常好，這是真實(shí)的，所以，如果使用Chome瀏覽器的話(huà)，自動(dòng)就有了Google Gears。另：Apple公司的Safari瀏覽器也自帶這玩意。所以，麻煩的Google Gears問(wèn)題就解決了。
也許有朋友就問(wèn)：是不是制作出來(lái)的網(wǎng)頁(yè)也也需要Google Gears呢？其實(shí)沒(méi)有關(guān)系啦，需要Google Gears就是開(kāi)發(fā)環(huán)境而已，開(kāi)發(fā)出來(lái)的網(wǎng)頁(yè)就不再需要Google Gears了。這就如同，我們用VS2008開(kāi)發(fā)出來(lái)的網(wǎng)站，但是用戶(hù)瀏覽我們制作出來(lái)的網(wǎng)站時(shí)，并不需要安裝VS2008一樣。
IxEdit js庫(kù)文件，這個(gè)，貌似沒(méi)有什么好說(shuō)的啦，沒(méi)這個(gè)玩意，你搞個(gè)P呀。
第二步：在本機(jī)部署開(kāi)發(fā)環(huán)境吧
“部署開(kāi)發(fā)環(huán)境”看上去真是非常專(zhuān)業(yè)的字眼，其實(shí)就是下載一個(gè)壓縮包，然后解壓一下。之所以用這么屌的字眼，是因?yàn)檫@樣才能在公司美工小MM面前顯的你夠?qū)牛瑝驇洠瑝蚺１疲拍茉趯?zhuān)業(yè)領(lǐng)域征服她們高傲的意識(shí)。
好吧，讓我們來(lái)下載這個(gè)超就牛逼的可以“部署開(kāi)發(fā)環(huán)境”的壓縮包吧！

(點(diǎn)小圖查看大圖)
IxEdit_pack_cn.rar
把這玩意解壓，牛逼的本機(jī)開(kāi)發(fā)環(huán)境就部署完畢啦！當(dāng)然，如果你覺(jué)得在美工小MM面前，只是鼠標(biāo)點(diǎn)擊一下右鍵，然后選擇一下“解壓到...”不夠?qū)诺脑?huà)，你可以在中途穿插一些看上去非常華麗，但是毫無(wú)用處的Dos命令。一般情況下，當(dāng)美工小MM看到黑乎乎的窗口，需要輸入一些看不懂的命令，然后窗口發(fā)生巨大變化的時(shí)候，她們總是會(huì)和黑客聯(lián)系起來(lái)，從而對(duì)你產(chǎn)生神秘感和崇拜感。如果Dos不熟悉的話(huà)，這里友情提供一個(gè)，效果非常不錯(cuò)，黑乎乎的窗口胡發(fā)生劇烈的變化，那就是：dir /w 囧rz~
第三步：開(kāi)始嘗試使用IxEdit吧
用EditPlus打開(kāi)壓縮包里面的例子文件（我個(gè)人是EditPlus的死忠，所以使用這個(gè)，大家可以隨便用什么編輯器打開(kāi)此文件）。然后會(huì)看到一些例子和黑乎乎的彈出層，這個(gè)彈出層就是整個(gè)IxEdit的靈魂了。通過(guò)它，只要簡(jiǎn)單的點(diǎn)擊幾下鼠標(biāo)，就可以完成任務(wù)。例子文件（我個(gè)人是EditPlus的死忠，所以使用這個(gè)，大家可以隨便用什么編輯器打開(kāi)此文件）。然后會(huì)看到一些例子和黑乎乎的彈出層，這個(gè)彈出層就是整個(gè)IxEdit的靈魂了。通過(guò)它，只要簡(jiǎn)單的點(diǎn)擊幾下鼠標(biāo)，就可以完成任務(wù)。

(點(diǎn)小圖查看大圖)
IxEdit主界面，我使用的是已經(jīng)漢化后的版本
IxEdit主界面就是上面這個(gè)黑乎乎的在頁(yè)面里面的彈出層了。關(guān)于語(yǔ)言版本，我需要大致說(shuō)一下：IxEdit會(huì)根據(jù)你瀏覽器的語(yǔ)言版本進(jìn)行判斷，使用何種語(yǔ)言，官方默認(rèn)提供的是英語(yǔ)和日語(yǔ)，我有點(diǎn)不爽竟然順便提供了日語(yǔ)，所以，花了一些時(shí)間，做了一些主界面的漢化。不過(guò)，現(xiàn)階段只是做了一些簡(jiǎn)單的主界面的漢化，一些幫助內(nèi)容仍然沒(méi)有漢化，而且，我的英文水平很爛，翻譯的很是很好。如果您想幫助我們一起漢化此牛逼軟件，請(qǐng)?jiān)L問(wèn)博客園IxEdit小組。讓我們逐步完善漢化版本而努力！
第四步：開(kāi)始嘗試使用IxEdit制作簡(jiǎn)單js效果吧
如何使用某某工具，這玩意用長(zhǎng)篇大論+截圖也不如直接用視頻來(lái)的直接，所以，我決定采用視頻的形式來(lái)講解一下。如果看不了在線(xiàn)視頻的朋友，可以到文章底部下載視頻文件，下載到本地查看。
第五步：講解一下常用的對(duì)DOM操作的效果
使用IxEdit可以方便的對(duì)DOM進(jìn)行操作，包括：
添加Class、移除Class 改變style 改變值 改變狀體 移除屬性 插入HTML元素 清空元素 移除元素
視頻中將會(huì)講解一些常用的DOM操作的應(yīng)用。

(點(diǎn)小圖查看大圖)
IxEdit視頻教程：如何操作DOM
第六步：講解一下常用的動(dòng)畫(huà)效果
使用IxEdit可以方便的實(shí)現(xiàn)一些非常絢麗的動(dòng)畫(huà)效果，包括：
隱藏、顯示 滑動(dòng)卷閘門(mén) 漸隱、漸顯 動(dòng)畫(huà)效果
視頻中將會(huì)講解一些常用的動(dòng)畫(huà)效果的應(yīng)用。

(點(diǎn)小圖查看大圖)
IxEdit視頻教程：如何使用動(dòng)畫(huà)效果
第七步：講解一下常用的特殊效果
使用IxEdit可以方便的實(shí)現(xiàn)一些特殊的效果，包括：
拖動(dòng) 調(diào)整尺寸 排序 日期選擇 折疊面板 生成tab 彈出對(duì)話(huà)框
視頻中將會(huì)講解一些常用的特殊效果的應(yīng)用。
其他還是一些非常簡(jiǎn)單的效果，我就不浪費(fèi)大家時(shí)間講解了。大家只要稍微摸索一下就會(huì)了解啦。

(點(diǎn)小圖查看大圖)
IxEdit視頻教程：如何使用特殊效果
第八步：打開(kāi)IxEdit的高級(jí)模式
其實(shí)IxEdit是有高級(jí)模式的（使用 ixedit.advancedMode=true;），打開(kāi)高級(jí)模式會(huì)將一些平時(shí)不常用的功能打開(kāi)，供高手使用。下面的視頻將告訴你，如果打開(kāi)IxEdit的高級(jí)模式。

(點(diǎn)小圖查看大圖)
IxEdit視頻教程：如何打開(kāi)IxEdit高級(jí)模式
第九步：如果部署IxEdit生成的頁(yè)面代碼
忙活了半天，如果將成果應(yīng)用到最終的頁(yè)面中，這步就會(huì)講到。部署完畢后，就不再需要Google Gears、chome瀏覽器、IxEdit js庫(kù)文件等等亂七八糟的東西啦。至于到底如何使用IxEdit生成的代碼，請(qǐng)看下面的視頻教程吧！

(點(diǎn)小圖查看大圖)
IxEdit視頻教程：如何使用IxEdit生成的js代碼
最后唧歪幾句
因?yàn)镮xEdit使用了Google Gears，所以，你的設(shè)置和工作，是可以保存起來(lái)，下次打開(kāi)繼續(xù)工作的。有點(diǎn)像“保存”和“打開(kāi)”功能。默認(rèn)情況下會(huì)自動(dòng)保存。如果你需要“另存為”的話(huà)，可以點(diǎn)擊左上角的IxEdit菜單，選擇“導(dǎo)出/導(dǎo)入設(shè)置”命令實(shí)現(xiàn)。
IxEdit的確是個(gè)好東西，讓可以讓不會(huì)JavaScript的人方便的實(shí)現(xiàn)常見(jiàn)的JavaScript效果。與jQuery和jQuery UI的配合更是可以讓你輕松的實(shí)現(xiàn)絢麗的效果。
但是IxEdit暫時(shí)還處于beta版，所以，還存在很多可以提升的空間。讓我們對(duì)此充滿(mǎn)期待吧！
想?yún)⒓覫xEdit漢化的朋友，請(qǐng)來(lái)博客園的IxEdit小組哦。讓IxEdit不僅僅只有官方英文版和日文版，也要有中文版哦！
原文地址：http://www.cnblogs.com/JustinYoung/archive/2009/11/18/ixedit.html