實在沒有什麼語言,能表達我看到這個IxEdit JavaScript開發工具時的興奮感。舉個例子來說就是:你已經在沙漠裡徒步走了兩三天了,中間沒有喝任何水。就在你就要虛脫,以為自己快要完蛋的時候,突然看到一顆樹,樹下鋪著一張綠色的地攤,地毯上躺著一個漂亮的裸女,裸女懷裡抱著滿滿的一瓶水。而且還充滿誘惑的想你招著手,如同路邊美容院的小妞。
為了讓你能體會這種牛叉的感覺,我建議你下看這邊的這段,我剛錄製的一段影片。這段影片簡單的講解了,IxEdit是什麼玩意,它能做什麼,以及簡單的教學。
是的,就如同你在影片中看到的,IxEdit是個傻瓜式的JavaScript開發工具(其實就是JavaScript程式碼庫)。無需掌握什麼JavaScript基礎,你就利用IxEdit方便的製作出一些常用的很牛叉的頁面動態、互動效果。
想想看:如果你花2個小時,把這個工具介紹給你們公司的美工、網頁設計師(一般情況下,她們雖然有很強的設計能力和寫靜態頁面的能力,但是JavaScript技能較差) ,告訴她們如何使用。當她們掌握了以後,她們就再也不用為一些簡單的JavaScript程式碼來煩你啦。茲鑑於一般公司的美工、網頁設計師都是漂亮的女孩子,所以,當她們掌握了製作JavaScript效果的時候都會十分的高興和興奮。這時候你就可以對她們說:“這個工具,其實還有高級用法,我上班的時候比較忙,可能無法教你,這樣吧!晚上12點的時候,來我宿舍,我來教你。” (註:說這句話的時候,一定要十分鎮靜,不能慌亂,要表現的很斯文,很衣冠禽獸的樣子。否則你家的床再大也沒用!)
所以,從這個角度來說IxEdit真是神一樣的工具。無論是你JavaScript白痴,還是JavaScript高手,完全都可以用它來工作,或者泡妞!神器!果真是神器呀!
好了,讓我們來實戰一下IxEdit。話說這玩意還真是有點麻煩,因為IxEdit的官方網站: http ://www.ixedit.com/好像還不是很完美的樣子。雖然有這指導那例子的,但是一來是全英文,二來是不太符合中國人習慣,竟然沒有給出一個較為完整的例子包,所以在這裡,我就按照咱中國人的習慣,給出step by step,然後最後給一個完整的例子壓縮包。包包裡面什麼都有啦。這樣才會方便你在本地研究。好吧,讓我們開始吧!
如果要使用IxEdit這個JavaScript開發工具,首先要準備好一下東西,具體它們都有什麼用,等下我來講解。
好啦,讓我們來談談這複製多樣的先決條件吧! [Cut-Page]
IxEdit雖然說是JavaScript開發工具,但其實也就是一個基於jQuery和jQuery UI 的JavaScript 腳本庫而已。所以,需要jQuery 和jQuery UI 。但是IxEdit是超級牛叉的JavaScript函式庫,甚至需要用到本機資料庫,所以這玩意需要聽起來非常牛逼的Google Gears。
雖然,我在漢化的時候自嘲了一把,但是經過我不同階段,無數次努力,依然沒有辦法把從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面前顯的你夠屌,夠帥,夠牛逼,才能在專業領域征服她們高傲的意識。
好吧,讓我們來下載這個超就牛逼的可以「部署開發環境」的壓縮包吧!
把這玩意解壓,牛逼的本機開發環境就部署完畢啦!當然,如果你覺得在美工小MM面前,只是滑鼠點擊一下右鍵,然後選擇一下「解壓縮到...」不夠屌的話,你可以在中途穿插一些看上去非常華麗,但是毫無用處的Dos指令。一般情況下,當美工小MM看到黑乎乎的窗口,需要輸入一些看不懂的命令,然後窗口發生巨大變化的時候,她們總是會和黑客聯繫起來,從而對你產生神秘感和崇拜感。如果Dos不熟悉的話,這裡友情提供一個,效果非常不錯,黑乎乎的窗口胡發生劇烈的變化,那就是: dir /w囧rz~
用EditPlus打開壓縮包裡面的範例檔案(我個人是EditPlus的死忠,所以使用這個,大家可以隨便用什麼編輯器開啟此檔案)。然後會看到一些例子和黑乎乎的彈出層,這個彈出層就是整個IxEdit的靈魂了。透過它,只要簡單的點擊幾下滑鼠,就可以完成任務。範例檔案(我個人是EditPlus的死忠,所以使用這個,大家可以隨便用什麼編輯器開啟此檔案)。然後會看到一些例子和黑乎乎的彈出層,這個彈出層就是整個IxEdit的靈魂了。透過它,只要簡單的點擊幾下滑鼠,就可以完成任務。
IxEdit主介面就是上面這個黑乎乎的在頁裡面的彈出層了。關於語言版本,我需要大致說一下: IxEdit會根據你瀏覽器的語言版本進行判斷,使用何種語言,官方默認提供的是英語和日語,我有點不爽竟然順便提供了日語,所以,花了一些時間,做了一些主介面的漢化。不過,現階段只是做了一些簡單的主介面的漢化,有些幫助內容仍然沒有漢化,而且,我的英文程度很爛,翻譯的很是很好。如果您想幫助我們一起漢化此屌軟體,請造訪部落格園IxEdit群組。讓我們逐步完善漢化版本而努力!
如何使用某某工具,這玩意用長篇大論+截圖也不如直接用影片來的直接,所以,我決定採用影片的形式來講解一下。如果看不了線上影片的朋友,可以到文章底部下載影片文件,下載到本地查看。
使用IxEdit可以方便的對DOM進行操作,包括:
影片中將會講解一些常用的DOM操作的應用。
使用IxEdit可以方便的實現一些非常絢麗的動畫效果,包括:
影片中將會講解一些常用的動畫效果的應用。
使用IxEdit可以方便的實現一些特殊的效果,包括:
影片中將會講解一些常用的特殊效果的應用。
其他還是一些非常簡單的效果,我就不浪費大家時間講解了。大家只要稍微摸索一下就會了解囉。
其實IxEdit是有進階模式的(使用ixedit.advancedMode=true;),開啟高級模式會將一些平常不常用的功能打開,供高手使用。下面的影片將告訴你,如果打開IxEdit的高級模式。
忙活了半天,如果將成果應用到最終的頁面中,這步就會講到。部署完畢後,就不再需要Google Gears、chome瀏覽器、IxEdit js庫檔案等等亂七八糟的東西啦。至於到底如何使用IxEdit產生的程式碼,請看下面的影片教學吧!
因為IxEdit使用了Google Gears,所以,你的設定和工作,是可以保存起來,下次打開繼續工作的。有點像是「儲存」和「開啟」功能。預設會自動儲存。如果你需要「另存為」的話,可以點選左上角的IxEdit選單,選擇「匯出/匯入設定」指令實作。
IxEdit的確是個好東西,讓可以讓不會JavaScript的人方便的實現常見的JavaScript效果。與jQuery和jQuery UI的配合更是可以讓你輕鬆的實現絢麗的效果。
但IxEdit暫時還處於beta版,所以,還存在著許多可以提升的空間。讓我們對此充滿期待吧!
想參加IxEdit漢化的朋友,請來博客園的IxEdit小組哦。讓IxEdit不只官方英文版和日文版,也要有中文版喔!
原文網址: http://www.cnblogs.com/JustinYoung/archive/2009/11/18/ixedit.html