script.aculo.us - 快速指南

script.aculo.us - 概述

什麼是 script.aculo.us？

script.aculo.us 是一個基於Prototype JavaScript 框架構建的 JavaScript 庫，它增強了 GUI 併為 Web 使用者提供了 Web 2.0 體驗。

script.aculo.us 由 Thomas Fuchs 開發，並於 2005 年 6 月首次公開發布。

script.aculo.us 透過文件物件模型 (DOM) 提供動態視覺效果和使用者介面元素。

Prototype JavaScript 框架是由 Sam Stephenson 建立的 JavaScript 框架，它提供了一個 Ajax 框架和其他實用程式。

如何安裝 script.aculo.us？

安裝 script.aculo.us 庫非常簡單。它可以透過三個簡單的步驟設定：

  • 訪問下載頁面下載最新版本的便捷安裝包。

  • 解壓下載的安裝包，您將找到以下資料夾：

    • lib - 包含 prototype.js 檔案。

    • src - 包含以下 8 個檔案：

      • builder.js
      • controls.js
      • dragdrop.js
      • effects.js
      • scriptaculous.js
      • slider.js
      • sound.js
      • unittest.js

    • test - 包含用於測試目的的檔案。

    • CHANGELOG - 包含所有更改歷史記錄的檔案。

    • MIT-LICENSE - 描述許可條款的檔案。

    • README - 描述安裝包（包括安裝說明）的檔案。

  • 現在將以下檔案放入網站目錄中，例如 /javascript。

    • builder.js
    • controls.js
    • dragdrop.js
    • effects.js
    • scriptaculous.js
    • slider.js
    • prototype.js

注意 - sound.js 和 unittest.js 檔案是可選的

如何使用 script.aculo.us 庫？

現在您可以按如下方式包含script.aculo.us指令碼：

<html>
   <head>
      <title>script.aculo.us examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script >
   </head>
	
   <body>
      ........
   </body>
</html>

預設情況下，scriptaculous.js 載入所有其他 JavaScript 檔案，這些檔案對於效果、拖放、滑塊以及所有其他 script.aculo.us 功能都是必需的。

如果您不需要所有功能，您可以透過以逗號分隔的列表指定它們來限制載入的附加指令碼，例如：

<html>
   <head>
      <title>script.aculo.us examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
   </head>
	
   <body>
      ........
   </body>
</html>

可以指定的指令碼：

  • effects
  • dragdrop
  • builder
  • controls
  • slider

注意 - 一些指令碼需要載入其他指令碼才能正常執行。

如何呼叫 script.aculo.us 庫函式？

要呼叫 script.aculo.us 庫函式，請使用如下所示的 HTML 指令碼標籤：

演示 
<html>
   <head>
      <title>script.aculo.us examples</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>

      <script type = "text/javascript" language = "javascript">
         // <![CDATA[
         function action(element){
            new Effect.Highlight(element, 
               { startcolor: "#ff0000", endcolor: "#0000ff", restorecolor: "#00ff00",  duration: 8 });
         }
         // ]]>
      </script>
   </head>
	
   <body>
      <div id = "id" onclick = "action(this);">
         Click on this and see how it change its color.
      </div>
   </body>
</html>

這裡我們使用 Effect 模組，並將Highlight效果應用於元素。

這將產生以下結果：

另一種簡單的方法是在事件處理程式中呼叫任何模組的函式，如下所示：

演示 
<html>
   <head>
      <title>script.aculo.us examples</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
   </head>
	
   <body>
      <div onclick = "new Effect.BlindUp(this, {duration: 5})">
         Click here if you want this to go slooooow.
      </div>
   </body>
</html>

這將產生以下結果：

script.aculo.us - 模組

script.aculo.us 分為多個模組，每個模組都有自己的 JavaScript 檔案。這些模組在此處解釋：

效果

效果模組包含超過 25 種視覺效果和 7 種過渡模式。

拖放

您將使用拖放模組使任何元素可拖動，將其變成一個放置區域，甚至使整個一系列元素可排序，以便您可以透過拖放來重新排列它們。

滑塊

滑塊是一種小型軌道或滑軌，您可以沿著它滑動滑塊。它轉換為數值。使用 script.aculo.us，您可以建立具有大量控制功能的滑塊。

自動完成

自動完成控制元件允許 Google-Suggest 風格的、本地和伺服器驅動的自動完成文字輸入欄位。

原地編輯

您可以透過簡單地單擊來使任何文字或專案集合原地可編輯。

構建器

用於在 JavaScript 中構建 DOM 片段的輔助工具。這是一個開發者工具，可以大大簡化 DOM 建立。

聲音

1.7.1 版引入了聲音系統，使您可以輕鬆播放聲音、將它們排隊、使用多個軌道等等。

script.aculo.us - 視覺化效果

script.aculo.us 效果分為兩組：

核心效果

以下六種核心效果是 script.aculo.us 視覺化效果 JavaScript 庫的基礎。

所有核心效果都支援各種常用引數以及特定於效果的引數，並且這些效果名稱區分大小寫。

本教程中討論了所有特定於效果的常用引數以及效果。

組合效果

所有組合效果都基於五個核心效果，並被認為是允許您編寫自己的效果的示例。

通常，這些效果依賴於其他效果的並行、同步執行。這種執行很容易實現，因此建立您自己的組合效果非常容易。以下是組合效果列表：

此外，還有一個Effect.toggle實用程式方法，用於您希望使用 Appear/Fade、Slide 或 Blind 動畫暫時顯示的元素。

效果所需的庫檔案

要使用 script.aculo.us 的效果功能，您需要載入 effects 模組。因此，您的 script.aculo.us 最小載入將如下所示

<html>
   <head>
      <title>script.aculo.us effects</title>
      <script type = "text/javascript"  src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/"effects.j"></script>
   </head>
	
   <body>
      ...
   </body>
</html>

呼叫效果函式

啟動核心效果的正確方法通常是使用new運算子。根據您的喜好，您可以使用兩種語法之一：

語法

new Effect.EffectName(element [, requiredArgs ] [ , options ] )
OR
element.visualEffect('EffectName' [, requiredArgs ] [,options])

這兩種語法在技術上是等效的。兩者之間的選擇主要取決於您個人的程式碼美感。

示例

這裡有兩個等效的呼叫，您可以看到語法是如何相關的，它們是完全可以互換的：

new Effect.Scale('title', 200, { scaleY: false, scaleContent: false });
OR
$('title' ).visualEffect('Scale', 200, { scaleY:false, scaleContent:false });

script.aculo.us - 拖放

Web 2.0 介面的最流行功能是拖放功能。幸運的是，script.aculo.us 具有支援拖放的固有能力。

要使用 script.aculo.us 的拖動功能，您需要載入dragdrop模組，這還需要effects模組。因此，您的 script.aculo.us 最小載入將如下所示

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

拖動物品

使用 script.aculo.us 使專案可拖動非常簡單。它需要建立一個Draggable類的例項，並識別要使其可拖動的元素。

Draggable 語法

new Draggable( element, options );

建構函式的第一個引數將要使其可拖動的元素標識為元素的id或對元素的引用。第二個引數指定有關可拖動元素行為方式的可選資訊。

Draggable 選項

在建立可拖動物件時，您可以使用以下一個或多個選項。

選項 描述 示例
revert 如果設定為true，則元素在拖動結束時返回其原始位置。還指定當拖動操作停止時是否會呼叫reverteffect回撥。預設為false。

示例
snap 用於使可拖動元素捕捉到網格或約束其移動。如果為 false（預設值），則不會進行捕捉或約束。

  • 如果分配一個整數 x，則可拖動元素將捕捉到 x 畫素的網格。

  • 如果為陣列 [x, y]，則水平拖動將捕捉到 x 畫素的網格，垂直拖動將捕捉到 y 畫素的網格。

  • 它也可以是一個符合Function( x , y , draggable ) 的函式，該函式返回一個數組 [x, y]。

示例
zindex 指定在拖動操作期間要應用於元素的 CSS z-index。預設情況下，元素的 z-index 在拖動時設定為 1000。

示例
ghosting 布林值，確定是否應克隆可拖動元素以進行拖動，並將原始元素保留到位，直到克隆元素被放下。預設為false。

示例
constraint 用於限制可拖動方向的字串，即horizontal或vertical。預設為null，這意味著自由移動。

示例
handle 指定用作啟動拖動操作的控制代碼的元素。預設情況下，元素是其自身的控制代碼。

示例
starteffect 拖動開始時在元素上呼叫的效果。預設情況下，它在 0.2 秒內將元素的不透明度更改為 0.2。

示例
reverteffect 拖動被還原時在元素上呼叫的效果。預設為平滑滑動到元素的原始位置。僅當revert為 true 時呼叫。

示例
endeffect 拖動結束時在元素上呼叫的效果。預設情況下，它在 0.2 秒內將元素的不透明度更改為 1.0。

示例

回撥選項

此外，您可以在 options 引數中使用以下任何回撥函式：

函式 描述 示例
onStart 在啟動拖動時呼叫。

示例
onDrag 如果滑鼠位置與上次呼叫不同，則在滑鼠移動時重複呼叫。

示例
change 就像 onDrag 一樣呼叫（這是首選的回撥）。

示例
onEnd 在拖動結束時呼叫。

示例

除“change”回撥外，每個回撥都接受兩個引數：Draggable 物件和滑鼠事件物件。

Draggable 示例

在這裡，我們定義了 5 個可拖動的元素：三個<div>元素、一個<img>元素和一個<span>元素。三個不同的<div>元素的目的是為了證明，無論元素最初是具有靜態（預設值）、相對或絕對定位規則，拖動行為都不會受到影響。

演示 
<html>
   <head>
      <title>Draggables Elements</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
      
      <script type = "text/javascript">
         // Take all the elements whatever you want to make Draggable.
         var elements = ['normaldiv', 'relativediv', 'absolutediv', 'image', 'span'];
			
         // Make all the items drag able by creating Draggable objects
         window.onload = function() {
            elements.each(function(item) { new Draggable(item, {});});
         }			
      </script>
   </head>

   <body>
      <div id = "normaldiv">
         This is a normal div and this is dragable.
      </div>

      <div id = "relativediv" style="position: relative;">
         This is a relative div and this is dragable.
      </div>

      <div id = "absolutediv" style="position: absolute;">
         This is an absolute div and this dragable.
      </div>
      <br />
		
      <img id = "image" src = "/images/scriptaculous.gif"/>

      <p>Let part <span id = "span" style = "color: blue;"> 
         This is middle part</span> Yes, only middle part is dragable.</p>
   </body>
</html>

這將產生以下結果：

放下拖動的物品

透過在名為Droppables的名稱空間中呼叫add()方法，將元素轉換為放置目標。

Droppables 名稱空間有兩個重要的方法：add()用於建立放置目標，remove()用於刪除放置目標。

語法

以下是用於建立放置目標的 add() 方法的語法。add() 方法使用作為第二個引數傳遞的選項，從作為其第一個引數傳遞的元素中建立放置目標。

Droppables.add( element, options );

remove() 的語法更簡單。remove() 方法從傳遞的元素中刪除放置目標行為。

Droppables.remove(element);

選項

在建立可拖動物件時，您可以使用以下一個或多個選項。

選項 描述 示例
Hoverclass 放置目標處於活動狀態（有可接受的可拖動元素懸停在其上方）時將新增到元素的 CSS 類名稱。預設為 null。

示例
Accept 描述 CSS 類的字串或字串陣列。放置目標只會接受具有一個或多個這些 CSS 類的可拖動元素。

示例
Containment 指定一個元素或元素陣列，可拖動專案必須是其父元素才能被放置目標接受。預設情況下，不會應用任何包含約束。

示例
Overlap 如果設定為“horizontal”或“vertical”，則放置目標只有在其在給定方向上的重疊超過 50% 時才會對可拖動元素做出反應。由下一章中討論的 Sortables 使用。  
greedy 如果為 true（預設值），則它會停止懸停其他放置目標，可拖動元素下不會搜尋。

示例

回撥選項

此外，您可以在 options 引數中使用以下任何回撥函式：

函式 描述 示例
onHover 指定當合適可拖動專案懸停在放置目標上時啟用的回撥函式。由下一章中討論的 Sortables 使用。  
onDrop 指定當合適可拖動元素被拖放到放置目標上時呼叫的回撥函式。

示例

示例

在這裡，此示例的第一部分與我們之前的示例類似，除了我們使用了 Prototype 方便的 $A() 函式將 id 為 draggables 的元素中的所有 <img> 元素的節點列表轉換為陣列。

演示 
<html>
   <head>
      <title>Drag and Drop Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            // Make all the images draggables from draggables division.
				
            $A($('draggables').getElementsByTagName('img')).each(function(item) {
               new Draggable(item, {revert: true, ghosting: true});
            });

            Droppables.add('droparea', {hoverclass: 'hoverActive', onDrop: moveItem});
				
            // Set drop area by default  non cleared.
            $('droparea').cleared = false;
         }
   
         // The target drop area contains a snippet of instructional
         // text that we want to remove when the first item
         // is dropped into it.
			
         function moveItem( draggable,droparea){
            if (!droparea.cleared) {
               droparea.innerHTML = '';
               droparea.cleared = true;
            }
				
            draggable.parentNode.removeChild(draggable);
            droparea.appendChild(draggable);
         }
      </script>

      <style type = "text/css">
         #draggables {
            width: 172px;
            border: 3px ridge blue;
            float: left;
            padding: 9px;
         }
			
         #droparea {
            float: left;
            margin-left: 16px;
            width: 172px;
            border: 3px ridge maroon;
            text-align: center;
            font-size: 24px;
            padding: 9px;
            float: left;
         }
			
         .hoverActive {
            background-color: #ffffcc;
         }
			
         #draggables img, #droparea img {
            margin: 4px;
            border:1px solid red;
         }
      </style>
   </head>

   <body>
      <div id = "draggables">
         <img src = "/images/html.gif"/>
         <img src = "/images/css.gif"/>
         <img src = "/images/xhtml.gif"/>
         <img src = "/images/wml_logo.gif"/>
         <img src = "/images/javascript.gif"/>
      </div>

      <div id = "droparea">
         Drag and Drop Your Images in this area
      </div>
   </body>
</html>

這將產生以下結果：

script.aculo.us - 元素排序

很多時候，您需要為使用者提供透過拖拽重新排序元素（例如列表中的專案）的功能。

如果沒有拖放功能，重新排序將成為噩夢，但是script.aculo.us透過Sortable類提供了開箱即用的擴充套件重新排序支援。要使其成為Sortable的元素，需要將其傳遞到Sortable名稱空間中的create()方法。

Sortable由容器元素中的專案元素組成。當您建立一個新的Sortable時，它會負責建立相應的Draggables和Droppables。

要使用script.aculo.us的Sortable功能，您需要載入dragdrop模組，該模組還需要effects模組。因此，您載入script.aculo.us的最小程式碼如下所示：

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

Sortable語法

以下是建立可排序專案的create()方法的語法。create()方法採用容器元素的id，並根據傳遞的選項對其進行排序。

Sortable.create('id_of_container',[options]);

使用Sortable.destroy完全刪除由Sortable.create建立的Sortable的所有事件處理程式和引用。

注意 - 如果引用的元素已經是Sortable，則呼叫Sortable.create會隱式呼叫Sortable.destroy。以下是呼叫destroy函式的簡單語法。

Sortable.destroy( element );

Sortable選項

在建立Sortable物件時，您可以使用以下一個或多個選項。

序號 選項及說明
1

tag

指定可排序容器內可透過拖放進行排序的元素的型別。預設為'li'。
2

only

指定一個CSS類名或類名陣列，可拖動專案必須擁有該類名才能被放置目標接受。這類似於Draggable的accept選項。預設情況下，不應用任何類名約束。
3

overlap

false、horizontal或vertical之一。控制觸發重新排序的點。預設為vertical。
4

constraint

false、horizontal或vertical之一。約束拖動可排序元素的移動。預設為vertical。
5

containment

啟用在Sortables之間拖放。接受元素或元素ID的陣列。重要提示：為了確保可以在容器之間進行雙向拖動，請在容器元素之後放置所有Sortable.create呼叫。
6

handle

與同名的Draggable選項相同，指定用於啟動拖動操作的元素。預設情況下，每個元素都是它自己的控制代碼。
7

hoverclass

指定一個CSS類名，當拖動元素經過非拖動可排序元素時應用於這些元素。預設情況下，不應用任何CSS類名。
8

ghosting

與同名的Draggable選項類似，如果為true，此選項會導致拖動操作的原始元素保持原位，而元素的半透明副本則隨滑鼠指標一起移動。預設為false。此選項不適用於IE。
9

dropOnEmpty

如果為true，則允許將可排序元素放置到空列表中。預設為false。
10

scroll

如果由於設定了CSS overflow屬性而使可排序容器擁有捲軸，則此選項啟用超出可見元素的列表自動滾動。預設為false。
12

scrollSensitivity

啟用滾動時，它會調整觸發滾動的點。預設為20。
13

scrollSpeed

啟用滾動時，它會調整滾動速度。預設為15。
14

tree

如果為true，則啟用對可排序元素內的子元素進行排序。預設為false。
15

treeTag

如果啟用了tree選項，則指定其子元素參與可排序行為的容器元素型別。預設為'ul'。

您可以在options引數中提供以下回調函式：

序號 選項及說明
1

onChange

拖動時排序順序發生變化時呼叫的函式。從一個Sortable拖動到另一個Sortable時，將在每個Sortable上呼叫一次回撥函式。將受影響的元素作為其引數。
2

onUpdate

導致元素順序發生變化的拖動操作終止時呼叫的函式。

排序示例

此演示已驗證可在IE 6.0中執行。它也適用於最新版本的Firefox。

演示 
<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('namelist',{tag:'li'});
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
      </style>
   </head>
   
   <body>
      <p>Drag and drop list items to sort them out</p>

      <ul id = "namelist">
         <li>Physics</li>
         <li>Chemistry</li>
         <li>Maths</li>
         <li>Botany</li>
         <li>Sociology</li>
         <li>English</li>
         <li>Hindi</li>
         <li>Sanskrit</li>
      </ul>
   </body>
</html>

使用我們的線上編譯器，更好地理解上面表格中討論的不同選項的程式碼。

這將產生以下結果：

注意tag:'li'的使用。類似地，您可以對<div>中提供的以下影像列表進行排序：

演示 
<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('imagelist',{tag:'div'});
         }
      </script>

      <style type = "text/css">
         div { cursor: move; }
         img { border: 1px solid red; margin:5px; }
      </style>
   </head>

   <body>
      <p>Drag and drop list images to re-arrange them</p>

      <div id = "imagelist">
         <div><img src = "/images/wml_logo.gif" alt="WML Logo" /></div>
         <div><img src = "/images/javascript.gif" alt="JS" /></div>
         <div><img src = "/images/html.gif" alt="HTML" /></div>
         <div><img src = "/images/css.gif" alt="CSS" /></div>
      </div>
   </body>
</html>

這將產生以下結果：

序列化可排序元素

Sortable物件還提供了一個函式Sortable.serialize()，用於將Sortable序列化為適合HTTP GET或POST請求的格式。這可以用於透過Ajax呼叫提交Sortable的順序。

語法

Sortable.serialize(element, options);

選項

在建立Sortable物件時，您可以使用以下一個或多個選項。

序號 選項及說明
1

tag

設定將要序列化的標籤型別。這將類似於Sortable.create中使用的型別。
2

name

設定用於建立鍵/值對以在HTTP GET/POST格式中進行序列化的鍵的名稱。因此，如果name為xyz，則查詢字串將如下所示：

xyz[]=value1 & xyz[]=value2 & xyz[]=value3

其中值來自子元素，其順序與其在容器中的顯示順序相同。

序列化示例

在此示例中，序列化的輸出將只給出列表項ID中下劃線後的數字。

要嘗試，請將列表保持其原始順序，按按鈕檢視列表的序列化結果。現在，重新排序一些元素，然後再次單擊按鈕。

演示 
<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('namelist',{tag:'li'});
         }

         function serialize(container, name){
            $('display').innerHTML = 'Serialization of ' + 
            $(container).id + 
            ' is: <br/><pre>' + 
               Sortable.serialize( container,{ name:name} ) + 
            '</pre>';
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
      </style>	
   </head>

   <body>
      <p>Drag and drop list items to sort them out properly</p>

      <ul id = "namelist">
         <li id = "list1_1">Physics</li>
         <li id = "list1_2">Chemistry</li>
         <li id = "list1_3">Maths</li>
         <li id = "list1_4">Botany</li>
         <li id = "list1_5">Sociology</li>
         <li id = "list1_6">English</li>
      </ul>

      <p>Click following button to see serialized list which can be
         passed to backend script, like PHP, AJAX or CGI</p>
			
      <button type = "button" value = "Click Me" 
         onclick = "serialize('namelist', 'list')"> Serialize
      </button>

      <div id = "display" style = "clear:both;padding-top:32px"></div>
   </body>
</html>

這將產生以下結果：

在Sortables之間移動專案

以下示例顯示如何將專案從一個列表移動到另一個列表。

演示 
<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('List1', {containment: ['List1','List2'], dropOnEmpty: true});

            Sortable.create('List2', {containment: ['List1','List2'], dropOnEmpty: true});
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
         ul {
            width: 88px;
            border: 1px solid blue;
            padding: 3px 3px 3px 20px;
         }
      </style>		
   </head>

   <body>
      <p>Drag and drop list items from one list to another list</p>

      <div style = "float:left">
         <ul id = "List1">
            <li>Physics</li>
            <li>Chemistry</li>
            <li>Botany</li>
         </ul>
      </div>

      <div style = "float:left;margin-left:32px">
         <ul id = "List2">
            <li>Arts</li>
            <li>Politics</li>
            <li>Economics</li>
            <li>History</li>
            <li>Sociology</li>
         </ul>
      </div>
   </body>
</html>

請注意，每個容器的containment選項都將兩個容器列為包含元素。透過這樣做，我們使子元素能夠在其父級的上下文中進行排序；它還使它們能夠在這兩個容器之間移動。

我們為兩個列表都將dropOnEmpty設定為true。要檢視此選項對該列表的影響，請將所有元素從一個列表移動到另一個列表，以便一個列表為空。您會發現它允許將元素放置到空列表中。

這將產生以下結果：

繫結到Ajax

當然，onUpdate是觸發對伺服器的Ajax通知的主要候選者，例如，當用戶重新排序待辦事項列表或其他一些資料集時。結合Ajax.Request和Sortable.serialize使即時永續性足夠簡單：

演示 
<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('List' ,
               {
                  onUpdate: function() {
                     new Ajax.Request('file.php',
                        {
                           method: "post",
                           parameters: {data:Sortable.serialize('List')}
                        }
                     );
                  }
               }
            );
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
         ul {
            width: 88px;
            border: 1px solid blue;
            padding: 3px 3px 3px 20px;
         }
      </style>
   </head>

   <body>
      <p>When you will change the order, AJAX Request 
         will be made automatically.</p>

      <div style = "float:left">
         <ul id = "List">
            <li id = "List_1">Physics</li>
            <li id = "List_2">Chemistry</li>
            <li id = "List_3">Maths</li>
            <li id = "List_4">Botany</li>
         </ul>
      </div>
   </body>
</html>

Sortable.serialize建立類似這樣的字串：List[] = 1 & List[] = 2 & List[] = 3 &List[] = 4，其中數字是列表元素ID在下劃線後的識別符號部分。

現在我們需要編寫file.php程式碼，它將解析釋出的資料為parse_str($_POST['data']);，您可以對這些排序後的資料執行任何操作。

要了解有關AJAX的更多資訊，請參閱我們簡單的Ajax教程。

script.aculo.us - 建立滑塊

滑塊是細長的軌道，上面有一個或多個可以沿軌道拖動的控制代碼。

滑塊的目標是提供一種替代的輸入方法來定義數值；滑塊表示一個範圍，沿軌道滑動控制代碼定義此範圍內的值。

滑塊可以是水平方向或垂直方向。水平方向時，軌道的左端通常表示最小值，而垂直方向時，滑塊的底部通常表示最小值。

要使用script.aculo.us的滑塊功能，您需要載入slider.js模組和prototype.js模組。因此，您載入script.aculo.us的最小程式碼如下所示：

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load=slider">< /script>

建立滑塊控制元件

建立滑塊通常是透過在頁面DOM中的一些現有元素上構造自定義物件來實現的。您在這裡需要兩個元素，一個用於控制代碼，一個用於軌道，如下所示：

new Control.Slider(handle, track [ , options ] );

軌道元素通常是<div>，控制代碼元素是軌道元素內的<div>或<span>。通常情況下，兩者都可以透過其id=或直接DOM引用來傳遞。

滑塊選項

在建立Slider物件時，您可以使用以下一個或多個選項。

序號 選項及說明
1

Axis

將控制元件的方向定義為horizontal或vertical。預設方向為horizontal。
2

Range

將滑塊值的範圍定義為Prototype ObjectRange例項。預設為0到1。
3

Values

定義滑塊可以獲取的離散值集。如果省略，則可以設定範圍內的所有值。
4

sliderValue

設定滑塊的初始值。如果省略，則由滑塊最左邊（或最頂部）邊緣表示的值為初始值。
5

Disabled

如果為true，則建立一個最初停用的滑塊。顯然預設為false。
6

setValue

將更新滑塊的值，從而將滑塊控制代碼移動到適當的位置。
7

setDisabled

將滑塊設定為停用狀態（disabled = true）。
8

setEnabled

將滑塊設定為啟用狀態（disabled = false）。

您可以在options引數中提供以下回調函式：

序號 選項及說明
1

onSlide

拖動移動滑塊時呼叫。呼叫的函式將滑塊值作為其引數。
2

onChange

滑塊完成移動或其值已透過setSlider Value函式更改時呼叫。呼叫的函式將滑塊值作為其引數。

滑塊示例

演示 
<html>
   <head>
      <title>Sliders Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = slider" ></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            new Control.Slider('handle1' , 'track1',{
            range: $R(1,100), values: [1,25,50,75,100], sliderValue: 1, onChange: function(v){
               $('changed').innerHTML = 'Changed Value : '+v;
               },

            onSlide: function(v) {
               $('sliding').innerHTML = 'Sliding Value: '+v;
               }
            });
            new Control.Slider('handle2' , 'track2', {
               range: $R(1,100),
               axis:'vertical',
               sliderValue: 1,
               onChange: function(v){
                  $('changed').innerHTML = 'Changed Value : '+v;
               }

               onSlide: function(v) {
                  $('sliding').innerHTML = 'Sliding Value: '+v;
               }
            });
         }
      </script>
		
      <style type = "text/css">
         h1{ font-size: 1.5em; }
			
         .track {
            background-color: #aaa;
            position: relative;
            height: 0.5em; width: 10em;
            cursor: pointer; z-index: 0;
         }
			
         .handle {
            background-color: red;
            position: absolute;
            height: 1em; width: 0.25em; top: -0.25em;
            cursor: move; z-index: 2;
         }
			
         .track.vertical { 
            width: 0.5em; height: 10em; 
         }
			
         .track.vertical .handle {
            width: 1em; height: 0.25em; top: 0; left: -0.25em; 
         }
      </style>
   </head>

   <body>
      <h1>Simple sliders</h1>

      <div id = "track1" class = "track" style = "width: 20em;" >
         <div id = "handle1" class = "handle" style = "width: 0.5em;" ></div>
      </div>

      <p id = "sliding" ></p>
      <p id = "changed" ></p>

      <div id = "track2" class = "track vertical" style = "position: absolute; left: 25em;  top: 3em;" >
         <div id = "handle2" class = "handle" style = "height: 0.5em;" ></div>
      </div>
   </body>
</html>

需要注意的幾點：

  • 您可以使用CSS更改任何滑塊的滑塊影像。使用CSS屬性background-image: url(track.gif)和background-repeat: no-repeat設定滑塊影像。

  • 可以使用$R(minValue, MaxValue)指定範圍值。例如，$R(1, 100)。

  • 可以使用特定值指定範圍值。例如values: [1,25,50,75,100]。在這種情況下，滑塊只能在移動控制代碼時獲得列出的離散值。

  • 在任何時候，都可以透過呼叫滑塊例項的setValue()方法以程式設計方式設定滑塊的值，例如：sliderInstance.setValue(50);

這將產生以下結果：

script.aculo.us - 自動完成

開箱即用，script.aculo.us支援兩種自動完成源：

  • 遠端源（透過Ajax獲取），
  • 本地源（網頁尾本中的字串陣列）。

根據您計劃使用的源，您將分別例項化Ajax.Autocompleter或Autocompleter.Local。儘管配備了特定選項，但這兩種物件共享大量功能並提供統一的使用者體驗。

構建這些物件時，您始終需要傳遞四件事：

  • 您要使其自動完成的文字欄位。通常，您可以傳遞欄位本身或其id=屬性的值。

  • 自動完成選項的容器，最終將包含一個<ul></li>選項列表供選擇。同樣，直接傳遞元素或其id=。此元素通常是一個簡單的<div>。

  • 資料來源，根據源型別，將表示為JavaScript字串陣列或遠端源的URL。

  • 最後是選項。與往常一樣，它們作為某種雜湊提供，並且兩個自動完成物件都可以使用沒有自定義選項；所有內容都有合適的預設值。

要使用script.aculo.us的自動完成功能，您需要載入controls.js和effects.js模組以及prototype.js模組。因此，您載入script.aculo.us的最小程式碼如下所示：

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

建立Ajax自動完成器

構造語法如下：

new Ajax.Autocompleter(element, container, url [ , options ] )

Ajax.Autocompleter 建構函式接受四個引數：

  • 需要填充資料選擇的文字欄位的元素名稱或引用。

  • 用作控制元件選項選單的 <div> 元素的元素名稱或引用。

  • 提供選擇的伺服器端資源的 URL。

  • 常用的選項雜湊表。

選項

建立 Ajax.Autocompleter 物件時，您可以使用以下一個或多個選項。

序號 選項及說明
1

paramName

包含釋出到伺服器端資源的文字欄位內容的查詢引數名稱。預設為文字欄位的名稱。
2

minChars

必須輸入的字元數，才能觸發對選擇的伺服器端請求。預設為 1。
3

Frequency

內部檢查是否應將請求釋出到伺服器端資源的間隔（秒）。預設為 0.4。
4

Indicator

在進行對選擇的伺服器端請求期間要顯示的元素的 ID 或引用。如果省略，則不顯示任何元素。
5

Parameters

包含要傳遞到伺服器端資源的額外查詢引數的文字字串。
6

updateElement

當用戶選擇從伺服器返回的選項之一時觸發的回撥函式，它替換更新文字欄位中所選值的內部函式。
7

afterUpdateElement

在執行 updateElement 函式後觸發的回撥函式。
8

Tokens

單個文字字串或文字字串陣列，指示用作分隔符的標記，以允許將多個元素輸入文字欄位，每個元素都可以單獨自動完成。

示例

演示 
<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            new Ajax.Autocompleter(
               'autoCompleteTextField',
               'autoCompleteMenu',
               '/script.aculo.us/serverSideScript.php', {}
            );
         }
      </script>
   </head>
   
   <body>
      <p>Type something in this box and then select suggested option from the list </p>

      <div>
         <label>Text field:</label>
         <input type = "text" id = "autoCompleteTextField"/>
         <div id = "autoCompleteMenu"></div>
      </div>
   </body>
</html>

現在，我們需要一個伺服器端來訪問此頁面並提供資料來源 URL (serverSideScript.php)。您需要在此指令碼中保留完整的邏輯來顯示建議。

例如，我們在 serverSideScript.php 中保留一個簡單的 HTML 文字。您可以使用 CGI、PHP、Ruby 或任何其他伺服器端指令碼編寫指令碼，以選擇合適的建議並將其格式化為 <ul><li>…</li></ul> 的形式，並將它們傳遞迴呼叫程式。

<ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li>Four</li>
   <li>Five</li>
   <li>Six</li>
</ul>

這將產生以下結果：

使用上表中討論的不同選項。

建立本地自動完成器

建立本地自動完成器幾乎與我們在上一節中討論的建立 Ajax 自動完成器相同。

主要區別在於如何向控制元件標識用於自動完成的後備資料集。

對於 Ajax 自動完成器，我們提供了伺服器端資源的 URL，該資源將在給出使用者輸入的情況下執行必要的篩選，並僅返回匹配的資料元素。對於本地自動完成器，我們改為提供完整的資料元素列表，作為 JavaScript 字串陣列，控制元件本身在其自己的客戶端程式碼中執行篩選操作。

整個構造語法實際上如下所示：

new Autocompleter.Local(field, container, dataSource [ , options ] );

Autocompleter.Local 的建構函式接受四個引數：

  • 需要填充資料選擇的文字欄位的元素名稱或引用。

  • 用作控制元件選項選單的 <div> 元素的元素名稱或引用。

  • 對於第三個引數，我們不使用伺服器輔助自動完成器中的 URL，而是提供一個小的字串陣列，其中包含所有可能的值。

  • 常用的選項雜湊表。

選項

建立 Autocompleter.Local 物件時，您可以使用以下一個或多個選項。

序號 選項及說明
1

Choices

要顯示的選擇數。預設為 10。
2

partialSearch

啟用匹配嵌入在完成字串中的單詞的開頭。預設為 true。
3

fullSearch

啟用匹配完成字串中的任何位置。預設為 false。
4

partialChars

定義在嘗試任何部分匹配之前必須鍵入的字元數。預設為 2。
5

ignoreCase

匹配時忽略大小寫。預設為 true。

示例

演示 
<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            new Autocompleter.Local(
               'autoCompleteTextField',
               'autoCompleteMenu',
               ['abcdef','abcdeg','xyzabcefg', 'tybabdefg','acdefg'],
               {ignoreCase:false}
            );
         }
      </script>
   </head>

   <body>
      <p>Type something in this box and then select suggested option from the list </p>
		
      <div>
         <label>Text field:</label>
         <input type = "text" id = "autoCompleteTextField"/>
         <div id = "autoCompleteMenu"></div>
      </div>		
   </body>
</html>

顯示後，在文字框中鍵入字元“a”後，它會顯示所有匹配的選項。

使用我們的線上編譯器，更好地理解上面表格中討論的不同選項的程式碼。

這將產生以下結果：

script.aculo.us - 原地編輯

就地編輯是 Web 2.0 風格應用程式的標誌之一。

就地編輯是指獲取不可編輯的內容（例如 <p>、<h1> 或 <div>），並讓使用者只需單擊即可編輯其內容。

這會將靜態元素轉換為可編輯區域（單行或多行），並彈出提交和取消按鈕（或連結，具體取決於您的選項），供使用者提交或回滾修改。

然後，它透過 Ajax 同步伺服器端的編輯，並再次使元素不可編輯。

要使用 script.aculo.us 的就地編輯功能，您需要載入 controls.js 和 effects.js 模組以及 prototype.js 模組。因此，script.aculo.us 的最小載入如下所示：

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

建立就地文字編輯器

整個構造語法如下所示：

new Ajax.InPlaceEditor(element, url [ , options ] )

Ajax.InPlaceEditor 的建構函式接受三個引數：

  • 目標元素可以是元素本身的引用，也可以是目標元素的 ID。

  • Ajax.InPlaceEditor 的第二個引數指定完成編輯值時聯絡的伺服器端指令碼的 URL。

  • 常用的選項雜湊表。

選項

建立 Ajax.InPlaceEditor 物件時，您可以使用以下一個或多個選項。

序號 選項及說明
1

okButton

一個布林值，指示是否顯示“確定”按鈕。預設為 true。
2

okText

要放在“確定”按鈕上的文字。預設為“確定”。
3

cancelLink

一個布林值，指示是否顯示取消連結。預設為 true。
4

cancelText

取消連結的文字。預設為“取消”。
5

savingText

在儲存操作（單擊“確定”按鈕啟動的請求）處理期間顯示為控制元件值的文字字串。預設為“正在儲存”。
6

滑鼠懸停時顯示為控制元件“工具提示”的文字字串。

clickToEditText
7

rows

編輯控制元件處於活動狀態時顯示的行數。任何大於 1 的數字都會導致使用文字區域元素而不是文字欄位元素。預設為 1。
8

cols

活動模式下的列數。如果省略，則不施加列限制。
9

size

與 cols 相同，但僅在 rows 為 1 時適用。
10

highlightcolor

滑鼠懸停時應用於文字元素背景的顏色。預設為淡黃色。
11

highlightendcolor

高亮顏色作為效果淡出的顏色。

注意 - 一些瀏覽器中的支援似乎參差不齊。
12

loadingText

載入操作期間要在控制元件內顯示的文字。預設為“正在載入”。
13

loadTextURL

指定要聯絡的伺服器端資源的 URL，以便在編輯器進入活動模式時載入編輯器的初始值。預設情況下，不會進行後端載入操作，初始值是目標元素的文字。
14

externalControl

用作“外部控制元件”的元素，用於觸發將編輯器置於活動模式。如果您希望另一個按鈕或其他元素觸發編輯控制元件，這將非常有用。
15

ajaxOptions

將傳遞給底層 Prototype Ajax 物件的雜湊物件，用作其選項雜湊表。

回撥選項

此外，您可以在 options 引數中使用以下任何回撥函式

序號 函式和說明
1

onComplete

在成功完成儲存請求後呼叫的 JavaScript 函式。預設情況下，會對編輯器應用高亮效果。
2

onFailure

在儲存請求失敗時呼叫的 JavaScript 函式。預設情況下，會發出顯示失敗訊息的警報。
3

callback

在提交儲存請求之前呼叫的 JavaScript 函式，以便獲取要傳送到請求的查詢字串。預設函式返回將查詢引數“value”等同於文字控制元件中的值的查詢字串。

CSS 樣式和 DOM ID 選項

您還可以使用以下選項之一來控制就地編輯器的行為：

序號 選項及說明
1

savingClassName

儲存操作正在進行時應用於元素的 CSS 類名。在向儲存 URL 發出請求時應用此類，並在返回響應時將其刪除。預設值為“inplaceeditor-saving”。
2

formClassName

應用於建立的包含編輯器元素的表單的 CSS 類名。預設為“inplaceeditor-form”。
3

formId

應用於建立的包含編輯器元素的表單的 ID。

示例

演示 
<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            new Ajax.InPlaceEditor(
               'theElement',
               '/script.aculo.us/transform.php',
               {
                  formId: 'whatever',
                  okText: 'Upper me!',
                  cancelText: 'Never mind'
               }
            );
         }
      </script>
   </head>
   
   <body>
      <p>Click over the "Click me!" text and then change text and click OK.</p>
      <p>Try this example with different options.</p>

      <div id = "theElement">
         Click me!
      </div>		
   </body>
</html>

顯示後，單擊並編輯文字。這個相當簡單的 PHP 指令碼將鍵為“value”的查詢引數的值轉換為其大寫等效項，並將結果寫回響應。

以下是 transform.php 指令碼的內容。

<?php
   if( isset($_REQUEST["value"]) ) {
      $str = $_REQUEST["value"];
      $str = strtoupper($str);
      echo "$str";
   }
?>

這將產生以下結果：

就地集合編輯器選項

還有一個名為 Ajax.InPlaceCollectionEditor 的物件，它支援就地編輯，並允許您從給定的選項中選擇一個值。

整個構造語法如下所示：

new Ajax.InPlaceCollectionEditor(element, url [ , options ] )

Ajax.InPlaceCollectionEditor 的建構函式接受三個引數：

  • 目標元素可以是元素本身的引用，也可以是目標元素的 ID。

  • Ajax.InPlaceEditor 的第二個引數指定完成編輯值時聯絡的伺服器端指令碼的 URL。

  • 常用的選項雜湊表。

選項

除了新增集合選項外，就地集合編輯器的選項列表是從就地文字編輯器繼承的選項的子集。

序號 選項及說明
1

okButton

一個布林值，指示是否顯示“確定”按鈕。預設為 true。
2

okText

要放在“確定”按鈕上的文字。預設為“確定”。
3

cancelLink

一個布林值，指示是否顯示取消連結。預設為 true。
4

cancelText

取消連結的文字。預設為“取消”。
5

savingText

在儲存操作（單擊“確定”按鈕啟動的請求）處理期間顯示為控制元件值的文字字串。預設為“正在儲存”。
6

滑鼠懸停時顯示為控制元件“工具提示”的文字字串。

clickToEditText
7

Highlightcolor

滑鼠懸停時應用於文字元素背景的顏色。預設為淡黃色。
8

Highlightendcolor

高亮顏色作為效果淡出的顏色。

注意 - 一些瀏覽器中的支援似乎參差不齊。
9

Collection

要用於填充選擇元素選項的專案陣列。
10

loadTextUrl

指定要聯絡的伺服器端資源的 URL，以便在編輯器進入活動模式時載入編輯器的初始值。預設情況下，不會進行後端載入操作，初始值是目標元素的文字。為了使此選項有意義，它必須返回集合選項中提供的專案之一，以將其設定為選擇元素的初始值。
11

externalControl

用作“外部控制元件”的元素，用於觸發將編輯器置於活動模式。如果您希望另一個按鈕或其他元素觸發編輯控制元件，這將非常有用。
12

ajaxOptions

將傳遞給底層 Prototype Ajax 物件的雜湊物件，用作其選項雜湊表。

回撥選項

此外，您可以在 options 引數中使用以下任何回撥函式：

序號 函式和說明
1

onComplete

在成功完成儲存請求後呼叫的 JavaScript 函式。預設情況下，會對編輯器應用高亮效果。
2

onFailure

在儲存請求失敗時呼叫的 JavaScript 函式。預設情況下，會發出顯示失敗訊息的警報。

CSS 樣式和 DOM ID 選項

您還可以使用以下選項之一來控制就地編輯器的行為：

序號 選項及說明
1

savingClassName

儲存操作正在進行時應用於元素的 CSS 類名。在向儲存 URL 發出請求時應用此類，並在返回響應時將其刪除。預設值為“inplaceeditor-saving”。
2

formClassName

應用於建立的包含編輯器元素的表單的 CSS 類名。預設為“inplaceeditor-form”。
3

formId

應用於建立的包含編輯器元素的表單的 ID。

示例

演示 
<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            new Ajax.InPlaceCollectionEditor(
               'theElement',
               '/script.aculo.us/transform.php',
               {
                  formId: 'whatever',
                  okText: 'Upper me!',
                  cancelText: 'Never mind',
                  collection: ['one','two','three','four','five']
               }
            );
         }
      </script>
   </head>
   
   <body>
      <p>Click over the "Click me!" text and then change text and click OK.</p>
      <p>Try this example with different options.</p>
		
      <div id = "theElement">
         Click me!
      </div>
   </body>
</html>

以下是 transform.php 指令碼的內容。

<?php
   if( isset($_REQUEST["value"]) ) {
      $str = $_REQUEST["value"];
      $str = strtoupper($str);
      echo "$str";
   }
?>

顯示後，單擊並選擇顯示的選項之一。這個相當簡單的 PHP 指令碼將鍵為“value”的查詢引數的值轉換為其大寫等效項，並將結果寫回響應。

使用我們的線上編譯器，更好地理解上面表格中討論的不同選項的程式碼。

這將產生以下結果：

列印頁面
上一頁
下一頁
廣告