Script.aculo.us 简明教程

script.aculo.us - In-Place Editing

sliderInstance.setValue(50);

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

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

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

要使用 script.aculo.us 的 inplace 编辑功能，您需要在 prototype.js 模块之外加载 controls.js 和 effects.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>

Creating an In-Place Text Editor

整个构造语法如下 −

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

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

目标元素可以是元素本身的引用或目标元素的 id。
Ajax.InPlaceEditor 的第二个参数指定在完成编辑值时与服务器端脚本联系的 URL。
The usual options hash.

Options

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

Sr.No	Option & Description
1	okButton 一个布尔值，表示是否显示一个“确定”按钮。默认为 true。
2	okText 要放置在确定按钮上的文本。默认为“ok”。
3	cancelLink 一个布尔值，表示是否显示一个取消链接。默认为 true。
4	cancelText 取消链接的文本。默认为“cancel”。
5	savingText 当保存操作（单击确定按钮而发起的请求）处理期间，显示为控件值的文本字符串。默认为“Saving”。
6	clickToEditText 当鼠标悬停在控件“提示”上时出现的文本字符串。
7	rows 编辑控件处于活动状态时出现的行数。任何大于 1 的数字都会导致使用文本区域元素而不是文本字段元素。默认为 1。
8	cols 处于活动模式时的列数。如果省略，则不设置列数限制。
9	size 与 cols 相同，但仅当 rows 为 1 时适用。
10	highlightcolor 当鼠标悬停在文本元素的背景上时应用的色调。默认为淡黄色。
11	highlightendcolor 高亮色逐渐变为的色调作为效果。 Note - 此支持在部分浏览器中似乎不稳定。
12	loadingText 加载操作期间在控件内显示的文本。默认为“Loading”。
13	loadTextURL 指定服务器端资源的 URL，该资源将在编辑器进入活动模式时，与它联系以加载其初始值。默认为没有后端加载操作，并且初始值是目标元素的文本。
14	externalControl 一个作为“外部控件”作用的元素，它触发将编辑器置于活动模式。如果你希望另一个按钮或其他元素触发控件的编辑，这将会很有用。
15	ajaxOptions 一个哈希对象，它将传给底层原型 Ajax 对象，作为其选项哈希使用。

Callback Options

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

Sr.No

Function & Description

onComplete 在保存请求成功完成后调用的 JavaScript 函数。默认为对编辑器应用一个高亮效果。

onFailure 在保存请求失败时调用的 JavaScript 函数。默认为发出警报，显示失败消息。

callback 在提交保存请求之前调用的 JavaScript 函数，以获取要发送到请求的查询字符串。默认函数返回一个查询字符串，将查询参数“value”等同于文本控件中的值。

CSS Styling and DOM id Options

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

Sr.No

Option & Description

savingClassName 保存操作进行期间应用于该元素的 CSS 类名称。当对保存 URL 发出请求时应用此类，并在返回响应时将其删除。默认值为“inplaceeditor-saving”。

formClassName 应用于用于包含编辑器元素的表单的 CSS 类名称。默认为“inplaceeditor-form”。

formId 应用于用于包含编辑器元素的表单的 id。

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

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

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

这将生成以下结果：

The In-Place Collection Editor Options

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

整个构造语法如下 −

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

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

目标元素可以是元素本身的引用，也可以是目标元素的 id
Ajax.InPlaceEditor 的第二个参数指定在完成编辑值时与服务器端脚本联系的 URL。
The usual options hash.

Options

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

Sr.No	Option & Description
1	okButton 一个布尔值，表示是否显示一个“确定”按钮。默认为 true。
2	okText 要放置在确定按钮上的文本。默认为“ok”。
3	cancelLink 一个布尔值，表示是否显示一个取消链接。默认为 true。
4	cancelText 取消链接的文本。默认为“cancel”。
5	savingText 当保存操作（单击确定按钮而发起的请求）处理期间，显示为控件值的文本字符串。默认为“Saving”。
6	clickToEditText 当鼠标悬停在控件“提示”上时出现的文本字符串。
7	Highlightcolor 将鼠标悬停在文本元素背景上时应用的颜色。默认为浅黄色。
8	Highlightendcolor 高亮颜色作为效果褪变至的颜色。 Note − 某些浏览器中对此的支持似乎不稳定。
9	Note 用于填充 select 元素选项的项目数组。
10	loadTextUrl 指定服务器端资源的 URL，以便在编辑器进入活动模式时连接该 URL 以加载其初始值。默认情况下，不执行后端加载操作，初始值是目标元素的文本。为了使该选项有意义，它必须返回在 collection 选项中提供的项目之一，以将该项目设为 select 元素的初始值。
11	externalControl 用作“外部控件”的元素，触发将编辑器置于活动模式。如果你希望另一个按钮或其他元素触发对控件的编辑，此操作非常有用。
12	ajaxOptions 一个哈希对象，它将传给底层原型 Ajax 对象，作为其选项哈希使用。

Callback Options

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

Sr.No

Function & Description

onComplete 在保存请求成功完成后调用的 JavaScript 函数。默认为对编辑器应用一个高亮效果。

onFailure 在保存请求失败时调用的 JavaScript 函数。默认为发出警报，显示失败消息。

CSS Styling and DOM id Options

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

Sr.No

Option & Description

formClassName 应用于用于包含编辑器元素的表单的 CSS 类名称。默认为“inplaceeditor-form”。

formId 应用于用于包含编辑器元素的表单的 id。

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

<?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”）转换为其等效的大写值，并将结果写回响应。

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

这将生成以下结果：