prototype.js简介

prototype.js简介

2007-11-21 14:22

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="#" onclick="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.但是知道它是怎么工作的也很有用.