prototype.js是一個很強大的Javascript函數庫,它可以讓你很輕鬆的使用一些特效,實現AJAX的功能.雖然prototype.js是爲了Ruby On Rails開發的,它的純Javascript的性質也使得它很容易用在其他的網絡程序中.可惜的是,Prototype.js還沒有強大的文檔解釋,儘管它的代碼非常有條理,但是也給初學者造成了一定的麻煩.作者在README裏說:
Prototype is embarrassingly lacking in documentation. (The source code should be fairly easy to comprehend; I’m committed to using a clean style with meaningful identifiers. But I know that only goes so far.)
經過這兩天的學習,我總結了一下Prototype的主要用法:
基本用法:以Element Class爲例,prototype給每個主要的分類都分成了一個Class,使用起來很方便,要產生特定的效果的話只要用new Class.function(<argument>)就可以了.比如:
<DIV id="div1"><a href="#" οnclick="new Element.toggle(''div2'')">Click Me</a></DIV>
<DIV id="div2">Hello!</DIV>當點擊Click Me的時候,div2就會交替隱藏或顯示.注意,你可以給toggle加上無限個parameter,比如Element.toggle(''div2'',''div3'',''div4'')...
下面是每個重要的類和函數的解釋:
| 函數名 | 解釋 | 舉例 |
| Element.toggle | 交替隱藏或顯示 | "Element.toggle(''div1'',''div2'') |
| Element.hide | 隱藏 | "Element.hide(''div1'',''div2'') |
| Element.show | 顯示 | "Element.show(''div1'',''div2'') |
| Element.remove | 刪除 | "Element.remove(''div1'',''div2'') |
| Element.getHeight | 取得高度 | "Element.getHeight(''div1'') |
| Toggle.display | 和Element.toggle相同 | "Toggle.display(''div1'',''div2'') |
| Insertion.Before | 在DIV前插入文字 | "Insertion.Before(''div1'',''my content'') |
| Insertion.After | 在DIV後插入文字 | "Insertion.After(''div1'',''my content'') |
| Insertion.Top | 在DIV裏最前插入文字 | "Insertion.Top(''div1'',''this is a text'') |
| Insertion.Bottom | 在DIV裏最後插入文字 | "Insertion.Bottom(''div1'',''this is a text'') |
| PeriodicalExecuter | 以給定頻率調用一段JavaScript | "PeridicalExecutor(test, 1)"這裏test是Javascript的函數,1是頻率(1秒). |
| $ | 取得一個DIV, 相當於getElementById() | $(''div1'') |
| Field.clear | 清空一個輸入框 | "Field.clear(''textfield1'') |
| Field.focus | 把 焦點集中在輸入框上 | "Field.focus(''select1'') |
| Field.present | 判斷內容是否爲空 | "alert(Field.present(''textfield1''))" |
| Field.select | 選擇輸入框的內容 | "Field.select(''textfield1'')" |
| Field.activate | 把 焦點集中在輸入框上並選擇輸入框的內容 | "Field.activate(''textfield1'')" |
| Form.serialize | 把表格內容轉化成string | |
| Form.getElements | 取得表格內容爲數組形式 | |
| Form.disable | disable表格所有內容 | Form.disable(''form1'') (這個好象不work) |
| Form.focusFirstElement | 把焦點集中在表格第一個元素上 | Form.focusFirstElement(''form1'') |
| Form.reset | Reset表格 | Form.reset(''form1'') |
| Form.Element.getValue | 取得表格輸入框的值 | Form.Element.getValue(''text1'') |
| Form.Element.serialize | 把表格中輸入框內容轉化成string | Form.Element.serialize(''text1'') |
| $F | 等同於Form.Element.getValue() | $F(''text1'') |
| Effect.Highlight | 高亮特效. | Effect.Highlight(''text1'') |
| Effect.Fade | 褪色特效 | |
| Effect.Scale | 放大縮小(百分比） | Effect.Scale(''text1'', 200) |
| Effect.Squish | 消失特效．文字縮小後消失 | Effect.Squish(''text1'') |
| Effect.Puff | 消失特效．文字放大後消失 | Effect.Puff(''text1'') |
| Effect.Appear | 出現特效 | |
| Effect.ContentZoom | ZOOM特效． | |
| Ajax.Request | 傳送Ajax請求給服務器 | Ajax.Request(''http://server/s.php'') |
| Ajax.Updater | 傳送Ajax請求給服務器並用答覆的結果更新指定的Container | Ajax.Updater(''text1'',''http://server/s.php'') |
Ajax的函數實際上還有一個可選參數,就是options.在未指明的情況下,Ajax使用的是''POST''發送請求,而且是異步執行,如果想要改用''GET''和同步,就可以用Ajax.Request(''http://server/s.php'',''get'','''',''a=1&b=2'')來執行.
在Rails中Ajax的函數被封裝成Ruby的函數,所以不必直接採用Ajax.Request,Ajax.Updater.但是知道它是怎麼工作的也很有用.
