6.1 Script.aculo.us

Script.aculo.us

Script.aculo.us 是建立在Prototype JavaScript Framework上的JavaScript函式庫
有動態的視覺化效果以及用DOM做成的使用者介面元素

--------------------------------------------------------------------

script.aculo.us 這個以特效為主的 framework 就是基於Prototype.js所開發的。

值得一提的是,Ruby on Rails 預設使用的 JavaScript framework 正是 Prototype.js 與 Script.aculo.us,所以在ActionView 裡定義了不少 helper methods 方便 Rails 的開發者產生 Prototype-based JavaScript code。

Prototype.js

 使用概念為: API(DOM物件) ,也就是使用上是先想到要用哪一個 Protoype.js 的物件來作事,再決定是哪個網頁上的東西會被影響。 擴充 Prototyp.js 很容易,可以使用其定義的 Class Object.extend 物件來擴充。比較明顯的缺點是 Prototype.js 會擴充 JavaScript 內建物 件(如 Object.extend 就是 Prototype.js 擴充得來),寫久了之後有時會分不太清楚原生物件上哪些東西是 Prototype.js 的傑作。

 -節錄網路作者 ericsk 之文章

---------------------------------------------------------------------

它主要包含了Seaside 和 Ruby on Rails 以及很多web application frameworks和腳本語言

它是由Thomas Fuchs所開發的,在2005年的時候才公諸於世

視覺效果的部分有Opacity, Scale, MoveBy, Highlight, 和 Parallel 這五種

使用者控制元素有
Drag And Drop 拖和放
Draggables 能拖曳
Droppables 能放到其他物件裡(像丟進資料夾一樣)
Sortables (能分類)
Slider(有捲軸)
Autocompletion(自動完成也就是會記錄使用者輸入的訊息(autocompleting text fields, AJAX- or Client-powered))

In Place Editing(可以直接在上面編輯(AJAX-powered text fields generated on-demand))


所以有這些就能利用瀏覽器達成RIA和webtop的功效

 

----------------------------------------------------------------------

Puzzle Demo

http://wiki.github.com/madrobby/scriptaculous/puzzle-demo

網站裡有拼圖範例,有興趣的人可以進去看看

----------------------------------------------------------------------


List Morph Demo

http://wiki.github.com/madrobby/scriptaculous/puzzle-demo

網站裡有List Morph範例,有興趣的人可以進去看看

----------------------------------------------------------------------

Combination Effects Demo

http://wiki.github.com/madrobby/scriptaculous/combination-effects-demo

網站裡有一些特效範例,有興趣的人可以進去看看

基本特效介紹:

Effect.Appear, Effect.Fade
Effect.Puff
Effect.DropOut
Effect.Shake
Effect.SwitchOff
Effect.BlindDown, Effect.BlindUp
Effect.SlideDown, Effect.SlideUp
Effect.Pulsate
Effect.Squish
Effect.Fold
Effect.Grow
Effect.Shrink

----------------------------------------------------------------------

Draggable

http://wiki.github.com/madrobby/scriptaculous/draggable 

網站裡有基本程式範例和範例原始碼

拖拉選擇介紹:

Option Since Description

handle  1.0   string or DOM reference, not set by default. Sets whether the element should only be draggable by an embedded handle. The value must be an element reference or element id.


handle  1.5   string or DOM reference, not set by default. As above, except now the value may be a string referencing a CSS class value. The first child/grandchild/etc. element found within the element that has this CSS class value will be used as the handle.


revert  1.0   boolean, defaults to false. If set to true, the element returns to its original position when the drags ends.


revert  1.5   boolean or function reference, defaults to false. Revert can also be an arbitrary function reference, called when the drag ends. Specifying 'failure' will instruct the draggable not to revert if successfully dropped in a droppable.


snap  1.5  If set to false no snapping occurs. Otherwise takes one of the following forms – Δi: one delta value for both horizontal and vertical snap, [Δx, Δy]: delta values for horizontal and vertical snap, function(x, y, draggable_object) { return [x, y]; }: a function that receives the proposed new top left coordinate pair and returns the coordinate pair to actually be used.


zindex  1.5   integer value, defaults to 1000. The css z-index of the draggable item.


constraint  1.0  string, not set by default. If set to 'horizontal' or 'vertical' the drag will be constrained to take place only horizontally or vertically.


ghosting    ??    boolean, defaults to false. Clones the element and drags the clone, leaving the original in place until the clone is dropped.


starteffect  ??    Effect, defaults to Effect.Opacity. Defines the effect to use when the draggable starts being dragged.


reverteffect ??    Effect, default to Effect.Move. Defines the effect to use when the draggable reverts back to its starting position.


endeffect     ??    Effect, defaults to Effect.Opacity. Defines the effect to use when the draggable stops being dragged.


scroll    ??   string or DOM reference, not set by default. Specifies the element which will scroll when you get to the boundary. By default this is turned off.


scrollSensitivity  ??  integer value, defaults to 20 pixels. Minimum distance from the element boundary to start scrolling.

 

Additionally, the options parameter accepts any of the following callback functions:

 

Callback Description(回傳描述)

onStart Called when a drag is initiated.

onDrag Called repeatedly as the mouse moves, before the draggable position is updated if mouse position changed from previous call.

change Called just as onDrag, but after the draggable position is updated. Gets the Draggable instance as its parameter.

onEnd Called when a drag is ended.

---------------------------------------------------------------------- 

http://tw.babelfish.yahoo.com/translate_url?doit=done&tt=url&trurl=http%3A%2F%2Fscript.aculo.us%2F&lp=en_zt&.intl=tw

因為Script.aculo.us的資料很少,上面這個網站可以給大家玩玩

點進後有個"拖放"上面的語法可以直接套用在網頁上,添加框架。

----------------------------------------------------------------------

整理了 Script.aculo.us 目前官方的參考資料成 CHM 及 PDF 檔的網址:

http://m3nt0r.de/blog/projekte/scriptaculous-offline-docs/

不用在使用 Script.aculo.us 時,拼命翻線上的 API 參考手冊 :)

----------------------------------------------------------------------

Quick start

 1. Download & install

Using script.aculo.us is easy! First, go to the script.aculo.us downloads page to grab yourself the latest version in a convenient package. Follow the instructions there, then return here.

Next, put prototype.jsscriptaculous.jsbuilder.jseffects.jsdragdrop.jsslider.js andcontrols.js in a directory of your website, e.g. /javascripts.

Third, load script.aculo.us in your web page. This is done by linking to the scripts in the head of your document.

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

The scriptaculous.js loader script will automatically load in the other libraries.

By default, scriptaculous.js loads all of the other javascript files necessary for effects, drag-and-drop, sliders, and all of the other script.aculo.us features. If you don’t need all of the features, you can limit the additional scripts that get loaded by specifying them in a comma-separated list, e.g.:


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


The scripts that can be specified are: buildereffectsdragdropcontrols, and slider

Note that some of the scripts require that others be loaded in order to function properly.

2. Use it!

To call upon the functions, use HTML script tags.
The best way is to define them like this:

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

This way, you won’t have to worry about using characters like < and > in your Java Script code.

You can also use effects inside event handlers:

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

 

If you want to get tricky with it, you can pass extra options to the effect like durationfps (frames per second), and delay.

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

 

-節錄http://wiki.github.com/madrobby/scriptaculous

----------------------------------------------------------------------

Additionally, the options parameter accepts any of the following callback functions:

Except for the change callback, each of these callbacks accepts two parameters: the Draggable object, and the mouse event object.

----------------------------------------------------------------------

Script.aculo.us開發者Thomas Fuch的網頁: http://script.aculo.us/thomas/