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.)
基本用法:以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'')...
下面是每个重要的类和函数的解释:
prototype 1.2.0 的函数简介
函数名 | 解释 | 举例 |
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) 这里200 = 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.但是知道它是怎么工作的也很有用.