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

就地编辑是关于获取不可编辑的内容（例如

，

或

），然后让用户只需单击即可编辑其内容。

这会将静态元素变成一个可编辑区域（单行或多行），并弹出提交和取消按钮（或链接，取决于您的选项），以供用户提交或回滚修改。

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

要使用script.aculo.us的就地编辑功能，您需要同时加载controls.js和effects.js模块以及prototype.js模块。因此，您对script.aculo.us的最低加载应如下所示：

创建就地文本编辑器

整个构造语法如下-

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

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

• 目标元素可以是对元素本身的引用，也可以是目标元素的ID。

• Ajax.InPlaceEditor的第二个参数指定完成编辑值后联系的服务器端脚本的URL。

• 通常的选项哈希。

选件

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

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.

回调选项

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

Sr.No	Function & Description
1	onComplete A JavaScript function that is called upon successful completion of the save request. The default applies a highlight effect to the editor.
2	onFailure A JavaScript function that is called upon failure of the save request. The default issues an alert showing the failure message.
3	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样式和DOM ID选项

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

Sr.No	Option & Description
1	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”.
2	formClassName The CSS class name applied to the form created to contain the editor element. Defaults to “inplaceeditor-form”.
3	formId The id applied to the form created to contain the editor element.

例

现场演示

        
      
      
      
      
   
   
   
      
Click over the "Click me!" text and then change text and click OK.
      
Try this example with different options.

      

         Click me!
      
        
   

显示时，单击并编辑文本。这个相当琐碎的PHP脚本将带有键“值”的查询参数的值转换为其等效的大写形式，并将结果写回到响应中。

这是transform.php脚本的内容。

这将产生以下结果-

就地集合编辑器选项

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

整个构造语法如下-

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

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

• 目标元素可以是对元素本身的引用，也可以是目标元素的ID

• Ajax.InPlaceEditor的第二个参数指定在完成编辑值后联系的服务器端脚本的URL。

• 通常的选项哈希。

选件

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

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.

回调选项

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

Sr.No	Function & Description
1	onComplete A JavaScript function that is called upon successful completion of the save request. The default applies a highlight effect to the editor.
2	onFailure A JavaScript function that is called upon failure of the save request. The default issues an alert showing the failure message.

CSS样式和DOM ID选项

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

Sr.No	Option & Description
1	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”.
2	formClassName The CSS class name applied to the form created to contain the editor element. Defaults to “inplaceeditor-form”.
3	formId The id applied to the form created to contain the editor element.

例

现场演示

        
      
      
      
      
   
   
   
      
Click over the "Click me!" text and then change text and click OK.
      
Try this example with different options.
        
      

         Click me!
      
   

这是transform.php脚本的内容。

这是transform.php脚本的内容。

显示时，单击并选择显示的选项之一。这个相当琐碎的PHP脚本将带有键“值”的查询参数的值转换为等效的大写字母，并将结果写回到响应中。

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

这将产生以下结果-