Script.Aculo.us

Script.Aculo.us 

1. 概述 

官方主页:http://script.aculo.us/
官方WIKI:http://wiki.script.aculo.us/scriptaculous/show/Usage

Scriptaculous是基于Prototype.js框架的JS效果。

1.1 下载&安装:

Scriptaculous包含了6个.js,scriptaculous.js是主文件。

把这6个文件放于同一个目录下,引入scriptaculous.js,会默认把其他5个都都引入了(原理见本文最后)
 
<head>中引入如下:

<script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/scriptaculous.js" type="text/javascript"></script>

如果只需要引入其中一部分,可以通过以下方式:

<script src="scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>

2.Effective 

Effective 是 scriptaculous 最主要的功能之一, 可以直接以html 的 element_id为参数调用API, 比如:

<script type="text/javascript" language="javascript">
      Effect.Appear('element_id');
 </script>

也可以通过事件机制

  ---- 层的开关效果:

<div onclick="new Effect.SwitchOff(this)">
    Click here if you've seen enough.
  </div>

  ---- 帘幕上拉效果
 

<div onclick="new Effect.BlindUp(this, {duration: 16})">
    Click here if you want this to go slooooow.
  </div>

  通过 duration(持续事件),fps(每秒帧数),delay(延迟)之类的参数,可以实现更多效果。
 

  更多Demo查看scriptaculous  wiki上的Demos

Dom Builder

与语法超简洁的Builder相比,W3c的Dom Builder语法简直是噩梦。html片断不复杂时如果用JSTemplate有点大炮打蚊子,用Builder就够了。

Builder很有Ruby的风格,请看下面一句

foo= Builder.node('a', {href:"foo.jsp"},categorys[i].name)

第1个参数是element类型,第2个是可选的attribbute,第3个是节点内的子节点。

如果要换成W3c的Dom函数写法,善哉善哉。

下面这段更明显直接照元素的页面顺序来生成对象,而不是像W3C Dom Builder很逻辑抽象的,先生成对象,然后append到父元素。

div = Builder.node('div',{className:linkDiv},[
             Builder.node('a', {href:"foo.jsp"}, categorys[i].name)
       ]);

当然了,还是没有JS Template清晰,所以Builder只作为html片断非常短时使用。

你可能感兴趣的:(JavaScript,jsp,框架,prototype,Ruby)