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

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

这将产生以下结果：

打印页面
上一页
下一页
广告