script.aculo.us Web 2.0 JavaScript 翻译

script.aculo.us 是一组用来增强使用者介面的 JavaScript函式库网站,它提供了一个视觉化效果引擎,一个拖拉函式库(包括可排序的列表), 数个以上的控制(Ajax基础的自动完成、就地编辑、滑块)等等,可以到示范页确认一下效果!

API文件和参考手册

这个维基的资料是使用 V1.8版的函式库,这个函式库是script.aculo.us目前最常使用的版本 。

程式码效果:
反白提醒效果, 变形(Morph)效果, 移动效果, 模糊(Opacity)效果, 比例(Scale)效果, 平移(Parallel)效果,
伫列(Queues)效果

组合效果:
显示效果, 由上往下铺展的显示效果, 由下往上消失的效果, 下沉效果, 淡入淡出效果, 由下往上逐渐变小的消失效果, 逐步放大效果, 拉伸消失的效果, 闪烁效果, 左右抖动效果, 收缩效果, 由上往下铺展的显示效果, 由下往上消失的效果, 收缩并消失于左上角, 闪烁一下然后收缩消失的效果, 卷动浏览器的效果

辅助效果:
转场效果, 一些方法的效果, 视觉标签的效果, 多重效果, 切换效果

行为: 可拖动的, 可曳的, 可排序的, Form.Element.DelayedObserver

控制: Ajax.InPlaceEditor, Ajax.InPlaceCollectionEditor, Ajax.Autocompleter, Autocompleter.Local, Slider

其他: Builder, Sound, Unit Testing

script.aculo.us是开放原始码,请阅读如何贡献来找出错误,产生错误报告跟协助修正。

帮助移植旧的或死的维基到github并且赚取 BIG BROWNIE POINTS! 你可以在http://script.aculo.us/docs找到旧的维基内容的一份拷贝,见移植有一些帮助的提示并请跟着样式指南

快速入门

1. 下载 & 安装

使用script.aculo.us很简单!首先,到script.aculo.us 下载页面 抓你自己最方便的套件跟最新的版本,照着操作作,然后回来这里。

接下来,将prototype.js、scriptaculous.js、builder.js、effects.js、dragdrop.js、slider.js跟controls.js到你网站的目录里,例如,/javascripts。

第三,在你的网页载入script.aculo.us,可以在你的文件表头连结指令码。

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

scriptaculous.js 载入器指令码会自动载入其他的函式库。

预设情形scriptaculous.js载入拖拉、滑块效应等所有其它所需的javascript档案以及所有其他的script.aculo.us功能,假如你不需要所有的功能,你可以用逗号分隔的列表来限制指令码的使用,例如:<script src="scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>

这个指令码被指定:builder、effects、dragdrop、controls跟slider

注意一些指令码需要其他的指令码才能有完整功能。

2. 使用!

要呼叫函式,使用HTML指令码标签。

最好的方式就是这样定义:

<script type="text/javascript" language="javascript">
  // <![CDATA[
  $('element_id').appear();
  // ]]>
</script>

这种方式你不需担心在你的JavaScript程式码中使用到像是<跟>的字元,你也可以使用内建的事件处理器内的效果:

<div onclick="$(this).switchOff()">
  Click here if you've seen enough.
</div>

假如你想要很技巧地使用,你可以传递额外的选项像是duration、fps (frames per second)跟delay之类的选项给效果。

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

接下来

看一下demos示范来看看你要完成的项目,阅读文件,建立杀手级的应用程式!