Scriptaculous

1. 简介: 

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

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

下载&安装:

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

3. 原理

scriptaculous.js引入其他js 代码如下:

var Scriptaculous = {
 Version: '1.6',
 require: function(libraryName) {
  // inserting via DOM fails in Safari 2.0, so brute force approach
  document.write('<script type="text/javascript" src="' + libraryName + '"></script>');
 },
 load: function() {
  if ((typeof Prototype == 'undefined') ||
   (typeof Element == 'undefined') ||
   (typeof Element.Methods == 'undefined') ||
   parseFloat(Prototype.Version.split(".")[0] + "." +
        Prototype.Version.split(".")[1]) < 1.5)
   throw("script.aculo.us requires the Prototype JavaScript framework >= 1.5.0");  $A(document.getElementsByTagName("script")).findAll(function(s) {
   return (s.src && s.src.match(/scriptaculous\.js(\?.*)?$/))
  }).each(function(s) {
   var path = s.src.replace(/scriptaculous\.js(\?.*)?$/, '');
   var includes = s.src.match(/\?.*load=([a-z,]*)/);
   (includes ? includes[1] : 'builder,effects,dragdrop,controls,slider').split(',').each(
     function(include) {
      Scriptaculous.require(path + include + '.js')
     });
  });
 }
}Scriptaculous.load(); 

你可能感兴趣的:(JavaScript,框架,prototype,Go,Safari)