Script.aculo.us 简明教程

script.aculo.us - In-Place Editing

sliderInstance.setValue(50);

In-place editing is one of the hallmarks of Web 2.0.style applications.

inplace 编辑是 Web 2.0.style 应用程序的标志之一。

In-place editing is about taking non-editable content, such as a <p>, <h1>, or <div>, and letting the user edit its contents by simply clicking it.

inplace 编辑是将不可编辑的内容（如 <p>、<h1>或 <div>）转换为可编辑内容，并允许用户通过简单地单击即可编辑内容。

This turns the static element into an editable zone (either singleline or multiline) and pops up submit and cancel buttons (or links, depending on your options) for the user to commit or roll back the modification.

然后，它通过 Ajax 在服务器端同步编辑，并再次使元素变为不可编辑。

It then synchronizes the edit on the server side through Ajax and makes the element non-editable again.

要使用 script.aculo.us 的 inplace 编辑功能，您需要在 prototype.js 模块之外加载 controls.js 和 effects.js 模块。因此，您对 script.aculo.us 的最小加载将如下所示 −

To use script.aculo.us’s in-place editing capabilities, you’ll need to load the controls.js and effects.js modules along with the prototype.js module. So, your minimum loading for script.aculo.us will look like this −

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

Creating an In-Place Text Editor

整个构造语法如下 −

The whole construction syntax is as follows −

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

Ajax.InPlaceEditor 的构造函数接受三个参数 −

The constructor for the Ajax.InPlaceEditor accepts three parameters −

The target element can either be a reference to the element itself or the id of the target element.
The second parameter to the Ajax.InPlaceEditor specifies the URL of a server-side script that is contacted when an edited value is completed.
The usual options hash.

Options

在创建 Ajax.InPlaceEditor 对象时，您可以使用以下一个或多个选项。

You can use one or more of the following options while creating your Ajax.InPlaceEditor object.

Sr.No	Option & Description
1	okButton A Boolean value indicating whether an "ok" button is to be shown or not. Defaults to true.
2	okText The text to be placed on the ok button. Defaults to "ok".
3	cancelLink A Boolean value indicating whether a cancel link should be displayed. Defaults to true.
4	cancelText The text of the cancel link. Defaults to "cancel".
5	savingText A text string displayed as the value of the control while the save operation (the request initiated by clicking the ok button) is processing. Defaults to "Saving".
6	clickToEditText The text string that appears as the control "tooltip" upon mouse-over.
7	rows The number of rows to appear when the edit control is active. Any number greater than 1 causes a text area element to be used rather than a text field element. Defaults to 1.
8	cols The number of columns when in active mode. If omitted, no column limit is imposed.
9	size Same as cols but only applies when rows is 1.
10	highlightcolor The color to apply to the background of the text element upon mouse-over. Defaults to a pale yellow.
11	highlightendcolor The color to which the highlight color fades to as an effect. Note − support seems to be spotty in some browsers.
12	loadingText The text to appear within the control during a load operation. The default is "Loading".
13	loadTextURL Specifies the URL of a server-side resource to be contacted in order to load the initial value of the editor when it enters active mode. By default, no backend load operation takes place and the initial value is the text of the target element.
14	externalControl An element that is to serve as an "external control" that triggers placing the editor into an active mode. This is useful if you want another button or other element to trigger editing the control.
15	ajaxOptions A hash object that will be passed to the underlying Prototype Ajax object to use as its options hash.

Callback Options

此外，你可以在 options 参数中使用以下回调函数

Additionally, you can use any of the following callback functions in the options parameter

Sr.No

Function & Description

onComplete A JavaScript function that is called upon successful completion of the save request. The default applies a highlight effect to the editor.

onFailure A JavaScript function that is called upon failure of the save request. The default issues an alert showing the failure message.

callback A JavaScript function that is called just prior to submitting the save request in order to obtain the query string to be sent to the request. The default function returns a query string equating the query parameter "value" to the value in the text control.

CSS Styling and DOM id Options

您还可以使用以下选项之一来控制就地编辑器的行为 −

You can also use one the following options to control the behavior of in place editor −

Sr.No

Option & Description

savingClassName The CSS class name applied to the element while the save operation is in progress. This class is applied when the request to the saving URL is made, and is removed when the response is returned. The default value is "inplaceeditor-saving".

formClassName The CSS class name applied to the form created to contain the editor element. Defaults to "inplaceeditor-form".

formId The id applied to the form created to contain the editor element.

Example

<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”的查询参数的值转换为其等效的大写形式，并将结果写回到响应中。

When displayed, click and edit the text. This rather trivial PHP script converts the value of a query parameter with the key "value" to its uppercase equivalent, and writes the result back to the response.

下面是 transform.php 脚本的内容。

Here is the content of transform.php script.

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

这将生成以下结果：

This will produce following result −

The In-Place Collection Editor Options

还有一个称为 Ajax.InPlaceCollectionEditor 的对象，它支持就地编辑，并允许您从给定的选项中选择一个值。

There is one more object called Ajax.InPlaceCollectionEditor, which supports in-place editing and gives you the option to select a value from the given options.

整个构造语法如下 −

The whole construction syntax is as follows −

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

Ajax.InPlaceCollectionEditor 的构造函数接受三个参数：

The constructor for the Ajax.InPlaceCollectionEditor accepts three parameters:

The target element can either be a reference to the element itself or the id of the target element
The second parameter to the Ajax.InPlaceEditor specifies the URL of a server-side script that is contacted when an edited value is completed.
The usual options hash.

Options

除了添加 collection 选项外，就地收集编辑器的选项列表是从就地文本编辑器继承的选项的子集。

Aside from the addition of the collection option, the list of options for the In-Place Collection Editor is a subset of the options inherited from the In-Place Text Editor.

Sr.No	Option & Description
1	okButton A Boolean value indicating whether an "ok" button is to be shown or not. Defaults to true.
2	okText The text to be placed on the ok button. Defaults to "ok".
3	cancelLink A Boolean value indicating whether a cancel link should be displayed. Defaults to true.
4	cancelText The text of the cancel link. Defaults to "cancel".
5	savingText A text string displayed as the value of the control while the save operation (the request initiated by clicking the ok button) is processing. Defaults to "Saving".
6	clickToEditText The text string that appears as the control "tooltip" upon mouse-over.
7	Highlightcolor The color to apply to the background of the text element upon mouse-over. Defaults to a pale yellow.
8	Highlightendcolor The color to which the highlight color fades to as an effect. Note − support seems to be spotty in some browsers.
9	Collection An array of items that are to be used to populate the select element options.
10	loadTextUrl Specifies the URL of a server-side resource to be contacted in order to load the initial value of the editor when it enters active mode. By default, no backend load operation takes place and the initial value is the text of the target element. In order for this option to be meaningful, it must return one of the items provided in the collection option to be set as the initial value of the select element.
11	externalControl An element that is to serve as an "external control" that triggers placing the editor into active mode. This is useful if you want another button or other element to trigger editing the control.
12	ajaxOptions A hash object that will be passed to the underlying Prototype Ajax object to use as its options hash.

Callback Options

此外，你可以在 options 参数中使用以下任何回调函数 −

Additionally, you can use any of the following callback functions in the options parameter −

Sr.No

Function & Description

onComplete A JavaScript function that is called upon successful completion of the save request. The default applies a highlight effect to the editor.

onFailure A JavaScript function that is called upon failure of the save request. The default issues an alert showing the failure message.

CSS Styling and DOM id Options

你还可以使用以下选项之一来控制就地编辑器的行为 −

You can also use one the following options to control the behavior of in-place editor −

Sr.No

Option & Description

formClassName The CSS class name applied to the form created to contain the editor element. Defaults to "inplaceeditor-form".

formId The id applied to the form created to contain the editor element.

Example

<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 脚本的内容。

Here is the content of the transform.php script.

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

以下是 transform.php 脚本的内容。

Here is the content of the transform.php script.

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

显示时，单击并选择一个显示的选项。此相当简单的 PHP 脚本将查询参数的值（其中键为“value”）转换为其等效的大写值，并将结果写回响应。

When displayed, click and select one of the displayed options. This rather trivial PHP script converts the value of the query parameter with the key "value" to its uppercase equivalent, and writes the result back to the response.

使用我们的在线编译器，更好地理解上面表格中讨论的各种选项的代码。

Use our online compiler for a better understanding of the code with different options discussed in the above table.

这将生成以下结果：

This will produce following result −