HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

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 对象。

Sr.No 选项和说明
1

okButton

一个布尔值，表示是否显示"ok"按钮。默认为 true。
2

okText

要放置在 ok 按钮上的文本。默认为"ok"。
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

加载操作期间控件内显示的文本。默认值为"Loading"。
13

loadTextURL

指定要联系的服务器端资源的 URL，以便在编辑器进入活动模式时加载编辑器的初始值。默认情况下，不会发生后端加载操作，初始值是目标元素的文本。
14

externalControl

用作"外部控件"的元素，用于触发将编辑器置于活动模式。如果您希望另一个按钮或其他元素触发编辑控件，这将非常有用。
15

ajaxOptions

将传递给底层 Prototype Ajax 对象以用作其选项哈希的哈希对象。

回调选项

此外，您可以在选项参数中使用以下任何回调函数

Sr.No 功能 &描述
1

onComplete

保存请求成功完成后调用的 JavaScript 函数。默认会将高亮效果应用于编辑器。
2

onFailure

保存请求失败后调用的 JavaScript 函数。默认会发出显示失败消息的警报。
3

callback

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

CSS 样式和 DOM id 选项

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

Sr.No 选项和说明
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。

  • 常用选项哈希。

选项

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

Sr.No 选项和说明
1

okButton

布尔值，表示是否显示"ok"按钮。默认为 true。
2

okText

要放置在 ok 按钮上的文本。默认为"ok"。
3

cancelLink

布尔值，指示是否应显示取消链接。默认为 true。
4

cancelText

取消链接的文本。默认为"取消"。
5

savingText

保存操作(单击确定按钮发起的请求)处理时，作为控件值显示的文本字符串。默认为"保存"。
6

clickToEditText

鼠标悬停时作为控件"工具提示"显示的文本字符串。
7

Highlightcolor

鼠标悬停时应用于文本元素背景的颜色。默认为淡黄色。
8

Highlightendcolor

高亮颜色逐渐淡出的颜色。

注意 −在某些浏览器中，支持似乎不稳定。
9

Collection

用于填充选择元素选项的项目数组。
10

loadTextUrl

指定要联系的服务器端资源的 URL，以便在编辑器进入活动模式时加载编辑器的初始值。默认情况下，不会发生任何后端加载操作，初始值是目标元素的文本。为了使此选项有意义，它必须返回集合选项中提供的要设置为选择元素的初始值的项目之一。
11

externalControl

用作"外部控件"的元素，触发将编辑器置于活动模式。如果您希望另一个按钮或其他元素触发编辑控件，这将非常有用。
12

ajaxOptions

将传递给底层 Prototype Ajax 对象以用作其选项哈希的哈希对象。

回调选项

此外，您可以在选项参数 − 中使用以下任何回调函数

Sr.No 函数 &描述
1

onComplete

保存请求成功完成后调用的 JavaScript 函数。默认会将高亮效果应用于编辑器。
2

onFailure

保存请求失败后调用的 JavaScript 函数。默认会发出显示失败消息的警报。

CSS 样式和 DOM id 选项

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

Sr.No 选项和说明
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"的查询参数的值转换为其大写等价物，并将结果写回响应。

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

这将产生以下结果 −

❮ 上一节 下一节 ❯