prototype.js簡介
關(guān)鍵詞：
prototype javascriptprototype.js是一個(gè)很強(qiáng)大的Javascript函數(shù)庫,它可以讓你很輕松的使用一些特效,實(shí)現(xiàn)AJAX的功能.雖然prototype.js是為了Ruby On Rails開發(fā)的,它的純Javascript的性質(zhì)也使得它很容易用在其他的網(wǎng)絡(luò)程序中.可惜的是,Prototype.js還沒有強(qiáng)大的文檔解釋,盡管它的代碼非常有條理,但是也給初學(xué)者造成了一定的麻煩.作者在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.)
經(jīng)過這兩天的學(xué)習(xí),我總結(jié)了一下Prototype的主要用法:
基本用法:以Element Class為例,prototype給每個(gè)主要的分類都分成了一個(gè)Class,使用起來很方便,要產(chǎn)生特定的效果的話只要用new Class.function(<argument>)就可以了.比如:<DIV id="div1"><a href="#" onclick="new Element.toggle(‘‘div2‘‘)">Click Me</a></DIV>
<DIV id="div2">Hello!</DIV>
當(dāng)點(diǎn)擊Click Me的時(shí)候,div2就會(huì)交替隱藏或顯示.注意,你可以給toggle加上無限個(gè)parameter,比如Element.toggle(‘‘div2‘‘,‘‘div3‘‘,‘‘div4‘‘)...
下面是每個(gè)重要的類和函數(shù)的解釋:
prototype 1.2.0 的函數(shù)簡介 函數(shù)名 解釋 舉例
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 以給定頻率調(diào)用一段JavaScript "PeridicalExecutor(test, 1)"這里test是Javascript的函數(shù),1是頻率(1秒).
$ 取得一個(gè)DIV, 相當(dāng)于getElementById() $(‘‘div1‘‘)
Field.clear 清空一個(gè)輸入框 "Field.clear(‘‘textfield1‘‘)
Field.focus把 焦點(diǎn)集中在輸入框上 "Field.focus(‘‘select1‘‘)
Field.present 判斷內(nèi)容是否為空 "alert(Field.present(‘‘textfield1‘‘))"
Field.select 選擇輸入框的內(nèi)容 "Field.select(‘‘textfield1‘‘)"
Field.activate 把 焦點(diǎn)集中在輸入框上并選擇輸入框的內(nèi)容 "Field.activate(‘‘textfield1‘‘)"
Form.serialize 把表格內(nèi)容轉(zhuǎn)化成string
Form.getElements 取得表格內(nèi)容為數(shù)組形式
Form.disable disable表格所有內(nèi)容 Form.disable(‘‘form1‘‘) (這個(gè)好象不work)
Form.focusFirstElement 把焦點(diǎn)集中在表格第一個(gè)元素上 Form.focusFirstElement(‘‘form1‘‘)
Form.reset Reset表格Form.reset(‘‘form1‘‘)
Form.Element.getValue 取得表格輸入框的值 Form.Element.getValue(‘‘text1‘‘)
Form.Element.serialize 把表格中輸入框內(nèi)容轉(zhuǎn)化成string Form.Element.serialize(‘‘text1‘‘)
$F 等同于Form.Element.getValue() $F(‘‘text1‘‘)
Effect.Highlight 高亮特效. Effect.Highlight(‘‘text1‘‘)
Effect.Fade 褪色特效
Effect.Scale 放大縮小(百分比）
Effect.Scale(‘‘text1‘‘, 200)
這里200 = 200%, 即兩倍
Effect.Squish 消失特效．文字縮小后消失 Effect.Squish(‘‘text1‘‘)
Effect.Puff 消失特效．文字放大后消失 Effect.Puff(‘‘text1‘‘)
Effect.Appear 出現(xiàn)特效
Effect.ContentZoom ZOOM特效．
Ajax.Request 傳送Ajax請(qǐng)求給服務(wù)器 Ajax.Request(‘‘http://server/s.php‘‘)
Ajax.Updater 傳送Ajax請(qǐng)求給服務(wù)器并用答復(fù)的結(jié)果更新指定的Container Ajax.Updater(‘‘text1‘‘,‘‘http://server/s.php‘‘)
Ajax的函數(shù)實(shí)際上還有一個(gè)可選參數(shù),就是options.在未指明的情況下,Ajax使用的是‘‘POST‘‘發(fā)送請(qǐng)求,而且是異步執(zhí)行,如果想要改用‘‘GET‘‘和同步,就可以用Ajax.Request(‘‘http://server/s.php‘‘,‘‘get‘‘,‘‘‘‘,‘‘a(chǎn)=1&b=2‘‘)來執(zhí)行.
在Rails中Ajax的函數(shù)被封裝成Ruby的函數(shù),所以不必直接采用Ajax.Request,Ajax.Updater.但是知道它是怎么工作的也很有用.
