发布于 2016-08-22 08:24:43 | 196 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Prototype使用指南，程序狗速度看过来！

Prototype Javascript开发框架

Prototype是目前应用最为广泛的Ajax开发框架，其的特点是功能实用而且尺寸较小，非常适合在中小型的Web应用中使用。开发Ajax应用需要编写大量的客户端JavaScript脚本，而Prototype框架可以大大地简化JavaScript代码的编写工作。更难得的是，Prototype具备兼容各个浏览器的优秀特性，使用该框架可以不必考虑浏览器兼容性的问题。

---

prototype.js 常用函数 : 
 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'') 
==========================================
    基本用法 :prototype.js 给每个主要的类都分了一个 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'',...)