script.aculo.us教程

script.aculo.us - In-Place Editing

← 上一节 下一节 →

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

就地编辑是关于采用不可编辑的内容，例如< p>， < h1>或< div>，让用户只需点击即可编辑其内容.

这会将静态元素转换为可编辑区域(单行或多行)和弹出提交和取消按钮(或链接，具体取决于您的选项)，以便用户提交或回滚修改.

然后通过Ajax同步服务器端的编辑并使元素不可编辑.

要使用script.aculo.us的就地编辑功能，您需要加载controls.js和effects.js模块以及原型.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.NoOption&描述
1

okButton

一个布尔值，指示是否显示"ok"按钮.默认为true.

2

okText

要放在确定按钮上的文本.默认为"ok".

3

cancelLink

一个布尔值，指示是否应显示取消链接.默认为true.

4

cancelText

取消链接的文本.默认为"取消".

5

savingText

在保存操作时显示为控件值的文本字符串(通过单击确定按钮)正在处理中.默认为"保存".

6

clickToEditText

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

7

rows

编辑控件处于活动状态时显示的行数.任何大于1的数字都会导致使用文本区域元素而不是文本字段元素.默认为1.

8

cols

处于活动模式时的列数.如果省略，则不会施加列限制.

9

尺寸

与cols相同，但仅在行为1时适用.

10

highlightcolor

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

11

highlightendcolor

高光颜色淡化为效果的颜色.

注意 : 在某些浏览器中支持似乎不稳定.

12

loadingText

加载操作期间出现在控件中的文本.默认为"正在加载".

13

loadTextURL

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

14

externalControl

要投放的元素作为"外部控件"触发将编辑器置于活动模式.如果您想要另一个按钮或其他元素来触发编辑控件，这非常有用.

15

ajaxOptions

将传递给底层的哈希对象原型Ajax对象用作其选项哈希.

回调选项

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

Sr.No功能&描述
1

onComplete

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

2

onFailure

在保存请求失败时调用的JavaScript函数.默认情况下会发出显示失败消息的警报.

3

回调

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

CSS样式和DOM id选项

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

Sr.NoOption&描述
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"的查询参数的值转换为大写的等效值，并将结果写回响应.

这是转换的内容. 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。

  • 通常的选项哈希。

Options

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

Sr.NoOption & Description
1

okButton

一个布尔值，指示是否显示"确定"按钮。 默认为true。

2

okText

将要放置在"确定"按钮上的文本。 默认为"确定"。

3

cancelLink

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

4

cancelText

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

5

savingText

在保存操作（通过单击"确定"按钮发起的请求）处理期间，显示为控件值的文本字符串。 默认为"保存"。

6

clickToEditText

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

7

Highlightcolor

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

8

Highlightendcolor

高光颜色逐渐淡入的颜色作为效果。

注意:在某些浏览器中，支持似乎参差不齐。

9

Collection

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

10

loadTextUrl

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

11

externalControl

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

12

ajaxOptions

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

Callback Options

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

Sr.NoFunction & Description
1

onComplete

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

2

onFailure

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

CSS Styling and DOM id Options

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

Sr.NoOption & Description
1

savingClassName

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

2

formClassName

CSS类名称应用于创建以包含editor元素的表单。 默认为" inplaceeditor形式"。

3

formId

应用于创建以包含editor元素的表单的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脚本将带有键"值"的查询参数的值转换为等效的大写字母，并将结果写回到响应中。

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

← 上一节 下一节 →

相关菜鸟教程