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。

  • 通常的選項雜湊。

選項

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

序號 選項和描述
1

okButton

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

okText

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

cancelLink

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

cancelText

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

savingText

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

clickToEditText

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

Highlightcolor

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

Highlightendcolor

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

注意 - 在某些瀏覽器中，支援似乎參差不齊。
9

Collection

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

loadTextUrl

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

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

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

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

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

這將產生以下結果：

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