IxEdit傻瓜式JavaScript開發工具(附下載、漢化版、視頻教程)

文章目錄

• 前言
• 介紹IxEdit的視頻
• IxEdit的簡介
• IxEdit實戰
• IxEdit需要的東西列表，沒有的話，點擊去下載
• 最後唧歪幾句
• 本文所有相關下載匯總
• IxEdit相關下載列表

 

IxEdit傻瓜式JavaScript開發工具(附下載、漢化版、視頻教程)

從昨天看到IxEdit以後，我就被它深深的迷住了。試用、研究、漢化，整整忙活了一天。現在就將現階段使用的感受給大家彙報一下，也希望更多的人可以喜歡上這個超級牛B的JavaScript開發工具。

前言

IxEdit：傻瓜式JavaScript開發工具

實在沒有什麼語言，能表達我看到這個IxEdit JavaScript開發工具時的興奮。舉個例子來說就是：你已經在沙漠裡徒步走了兩三天了，中間沒有喝任何水。就在你就要虛脫，以為自己快要完蛋的時候，突然看到一顆樹，樹下鋪著一張綠色的地攤，地毯上躺著一個漂亮的裸女，裸女懷裡抱著滿滿的一瓶水。而且還充滿誘惑的想你招著手，如同路邊美容院的小妞。

為了讓你能體會到這種牛叉的感覺，我建議你下看一下這邊的這段，我剛剛錄製的一段視頻。這段視頻簡單的講解了，IxEdit是什麼玩意，它能做什麼，以及簡單的教程。

介紹IxEdit的視頻

IxEdit視頻介紹

IxEdit的簡介

是的，就如同你在視頻中看到的，IxEdit是一個傻瓜式的JavaScript開發工具（其實就是JavaScript程式碼程式庫）。無需掌握什麼JavaScript基礎，你就利用IxEdit方便的製作出一些常用的很牛叉的頁面動態、互動效果。

想一想：如果你花費2個小時，把這個工具介紹給你們公司的美工、網頁設計師（一般情況下，她們雖然有很強的設計能力和寫靜態頁面的能力，但是JavaScript技能較差），告訴她們如何使用。當她們掌握了以後，她們就再也不用為一些簡單的JavaScript代碼來煩你啦。茲鑒於一般公司的美工、網頁設計師都是漂亮的女孩子，所以，當她們掌握了製作JavaScript效果的時候都會十分的高興和興奮。這時候你就可以對她們說：“這個工具，其實還有進階用法，我上班的時候比較忙，可能無法教你，這樣吧！晚上12點的時候，來我宿舍，我來教你。”（注意：說這句話的時候，一定要十分鎮靜，不能慌亂，要表現的很斯文，很衣冠禽獸的樣子。否則你家的床再大也沒用！）

所以，從這個角度來說IxEdit真是神一樣的工具。無論是你JavaScript白癡，還是JavaScript高手，完全都可以用它來工作，或者泡妞！神器！果真是神器呀！

IxEdit實戰

好了，讓我們來實戰一下IxEdit吧。話說這玩意還真是有點麻煩，因為IxEdit的官方網站：http://www.ixedit.com/ 好像還不是很完善的樣子。雖然有這指導那例子的，但是一來是全英文，二來是不太符合中國人習慣，竟然沒有給出一個較為完整的例子包，所以在這裡，我就按照咱中國人的習慣，給出step by step，然後最後給一個完整的例子壓縮包。包裡面什麼東西都有啦。這樣才會方便你在本地研究。好吧，讓我們開始吧！

第一步：先把需要的東西找齊

如果要使用IxEdit這個JavaScript開發工具，首先要準備好一下東西，具體它們都有什麼用，等下我來講解。

IxEdit需要的東西列表，沒有的話，點擊去下載

• Google Gears如果沒有則需要第二條的瀏覽器
• 如果沒有Google Gears，你則需要Google Chome瀏覽器或者Apple的Safari瀏覽器
• jQuery 庫 1.3 以上版本
• jQuery UI 庫 1.7 以上版本
• IxEdit js庫檔案：可以暫不下載，文章最後會提供已漢化的英、中、日三語版本

好啦，讓我們來說說這複製多樣的先決條件吧！

IxEdit雖然說是JavaScript開發工具，其實也就是一個基於jQuery和jQuery UI 的JavaScript 指令碼庫而已。所以，需要jQuery 和 jQuery UI 。但是IxEdit是一個超級牛叉的JavaScript庫，甚至需要用到本機資料庫，所以這玩意需要聽上去非常牛逼的Google Gears。

IxEdit需要GoogleGears支援，我漢化的時候自嘲了一把

雖然，我在漢化的時候自嘲了一把，但是經過我不同階段，無數次努力，依然沒有辦法把從Google官方下載Google Gears的安裝包，安裝成功（下載的是線上安裝包，安裝時需要連網）。使我非常強烈的感到生長在祖國圍牆內真是十分的安全。

所以，安裝Google Gears的路就斷了。不過，沒有關係，雖然沒有辦法按照Google Gears，但是我們可以曲線救國，Google Gears不是Google出品的嗎？那麼Google的瀏覽器Chome應該一定內建這玩意吧。運氣非常好，這是真實的，所以，如果使用Chome瀏覽器的話，自動就有了Google Gears。另：Apple公司的Safari瀏覽器也內建這玩意。所以，麻煩的Google Gears問題就解決了。

也許有朋友就問：是不是製作出來的網頁也也需要Google Gears呢？其實沒有關係啦，需要Google Gears就是開發環境而已，開發出來的網頁就不再需要Google Gears了。這就如同，我們用VS2008開發出來的網站，但是使用者瀏覽我們製作出來的網站時，並不需要安裝VS2008一樣。

IxEdit js庫檔案，這個，貌似沒有什麼好說的啦，沒這個玩意，你搞個P呀。

第二步：在本機部署開發環境吧

“部署開發環境”看上去真是非常專業的字眼，其實就是下載一個壓縮包，然後解壓一下。之所以用這麼屌的字眼，是因為這樣才能在公司美工小MM面前顯的你夠屌，夠帥，夠牛逼，才能在專業領域征服她們高傲的意識。

好吧，讓我們來下載這個超就牛逼的可以“部署開發環境”的壓縮包吧！

 IxEdit_pack_cn.rar

把這玩意解壓，牛逼的本機開發環境就部署完畢啦！當然，如果你覺得在美工小MM面前，只是滑鼠點擊一下右鍵，然後選擇一下“解壓到...”不夠屌的話，你可以在中途穿插一些看上去非常華麗，但是毫無用處的Dos命令。一般情況下，當美工小MM看到黑乎乎的視窗，需要輸入一些看不懂的命令，然後視窗發生巨大變化的時候，她們總是會和駭客聯絡起來，從而對你產生神秘感和崇拜感。如果Dos不熟悉的話，這裡友情提供一個，效果非常不錯，黑乎乎的視窗胡發生劇烈的變化，那就是：dir /w 囧rz~

第三步：開始嘗試使用IxEdit吧

用EditPlus開啟壓縮包裡面的HTML例子檔案（我個人是EditPlus的死忠，所以使用這個，大家可以隨便用什麼編輯器開啟此檔案）。然後會看到一些例子和黑乎乎的彈出層，這個彈出層就是整個IxEdit的靈魂了。通過它，只要簡單的點擊幾下滑鼠，就可以完成任務。

IxEdit主介面，我使用的是已經漢化後的版本

IxEdit主介面就是上面這個黑乎乎的在頁面裡面的彈出層了。關於語言版本，我需要大致說一下：IxEdit會根據你瀏覽器的語言版本進行判斷，使用何種語言，官方預設提供的是英語和日語，我有點不爽竟然順便提供了日語，所以，花了一些時間，做了一些主介面的漢化。不過，現階段只是做了一些簡單的主介面的漢化，一些協助內容仍然沒有漢化，而且，我的英文水平很爛，翻譯的很是很好。如果您想協助我們一起漢化此牛逼軟體，請訪問部落格園IxEdit小組。讓我們逐步完善漢化版本而努力！

第四步：開始嘗試使用IxEdit製作簡單js效果吧

如何使用某某工具，這玩意用長篇大論+也不如直接用視頻來的直接，所以，我決定採用視頻的形式來講解一下。如果看不了線上視頻的朋友，可以到文章底部下載視頻檔案，下載到本地查看。

第五步：講解一下常用的對DOM操作的效果

使用IxEdit可以方便的對DOM進行操作，包括：

1. 添加Class、移除Class
2. 改變style
3. 改變值
4. 改變狀體
5. 移除屬性
6. 插入HTML元素
7. 清空元素
8. 移除元素

視頻中將會講解一些常用的DOM操作的應用。

IxEdit視頻教程：如何操作DOM

第六步：講解一下常用的動畫效果

使用IxEdit可以方便的實現一些非常絢麗的動畫效果，包括：

1. 隱藏、顯示
2. 滑動卷閘門
3. 漸隱、漸顯
4. 動畫效果

視頻中將會講解一些常用的動畫效果的應用。

IxEdit視頻教程：如何使用動畫效果

第七步：講解一下常用的特殊效果

使用IxEdit可以方便的實現一些特殊的效果，包括：

1. 拖動
2. 調整尺寸
3. 排序
4. 日期選擇
5. 摺疊面板
6. 產生tab
7. 彈出對話方塊

視頻中將會講解一些常用的特殊效果的應用。

其他還是一些非常簡單的效果，我就不浪費大家時間講解了。大家只要稍微摸索一下就會瞭解啦。

IxEdit視頻教程：如何使用特殊效果

第八步：開啟IxEdit的進階模式

其實IxEdit是有進階模式的（使用 ixedit.advancedMode=true;），開啟進階模式會將一些平時不常用的功能開啟，供高手使用。下面的視頻將告訴你，如果開啟IxEdit的進階模式。

IxEdit視頻教程：如何開啟IxEdit進階模式

第九步：如果部署IxEdit產生的頁面代碼

忙活了半天，如果將成果應用到最終的頁面中，這步就會講到。部署完畢後，就不再需要Google Gears、chome瀏覽器、IxEdit js庫檔案等等亂七八糟的東西啦。至於到底如何使用IxEdit產生的程式碼，請看下面的視頻教程吧！

IxEdit視頻教程：如何使用IxEdit產生的js代碼

最後唧歪幾句

因為IxEdit使用了Google Gears，所以，你的設定和工作，是可以儲存起來，下次開啟繼續工作的。有點像“儲存”和“開啟”功能。預設情況下會自動儲存。如果你需要“另存新檔”的話，可以點擊左上方的IxEdit菜單，選擇“匯出/匯入設定”命令實現。

IxEdit的確是個好東西，讓可以讓不會JavaScript的人方便的實現常見的JavaScript效果。與jQuery和jQuery UI的配合更是可以讓你輕鬆的實現絢麗的效果。

但是IxEdit暫時還處於beta版，所以，還存在很多可以提升的空間。讓我們對此充滿期待吧！

想參加IxEdit漢化的朋友，請來部落格園的IxEdit小組哦。讓IxEdit不僅僅只有官方英文版和日文版，也要有中文版哦！

本文所有相關下載匯總IxEdit相關下載列表

• 本文提到的IxEdit樣本壓縮包(包含所有的js檔案、css檔案、漢化後的IxEdit檔案)
• IxEdit視頻教程001：介紹
• IxEdit視頻教程002：DOM操作
• IxEdit視頻教程003：動畫
• IxEdit視頻教程004：特殊效果
• IxEdit視頻教程005：開啟進階模式
• IxEdit視頻教程006：部署產生的JavaScript代碼