Script.aculo.us开发系列(七):InPlaceEditor控件的使用

核心提示： loadTextURL:编辑文本框的初始文本加载的来源页面,默认为构造函数中的RequestUrlhoverClassName:鼠标放在$(TargetId)上的className在设计css时注意okButton的className为"editor_ok_button"

loadTextURL:编辑文本框的初始文本加载的来源页面,默认为构造函数中的RequestUrl

hoverClassName:鼠标放在$(TargetId)上的className

在设计css时注意okButton的className为"editor_ok_button",CancelLink的className为"editor_cancel"

上面的第一个例子的关键代码:

function init()
{
　　var oEditor=new　Ajax.InPlaceEditor("editor","InPlaceEditor.asp",
　　　　{
　　　　　　okText:"确认",
　　　　　　cancelText:"取消",
　　　　　　savingText:"正在提交",
　　　　　　externalControl:"externalControl",
　　　　　　clickToEditText:"点击即可编辑",
　　　　　　rows:5,
　　　　　　cols:20,
　　　　　　loadTextURL:"InPlaceEditor.asp",
　　　　　　submitOnBlur:true
　　　　}
　　);
}
Event.observe(window,'load',init);InPlaceCollectionEditor

InPlaceCollectionEditor是InPlaceEditor的一个派生控件,它拥有前者的全部选项属性,运行效果是上面的第二个例子,它的区别就是编辑状态下显示的是一个Select标签,它由连个自己的属性

collection: Json对象,Select选项的Value:Text

value:编辑状态下的初始值

上面的第二个例子的关键代码

function init()
{
　　var oEditor=new Ajax.InPlaceCollectionEditor(
　　　　"container",
　　　　"InplaceCollectionEditor.asp",
　　　　{
　　　　　　collection:[[1,"One"],[2,"Two"],[3,"Three"]],
　　　　　　value:3,
　　　　　　ajaxOption:{method:'get'}
　　　　}
　　);
}

Event.observe(window,'load',init);去看看自己的例子,还有一个很重要的内容落下来了,那就是DragDrop,很有意思.下回分解

系列文章：

Script.Aculo.Us开发系列(一):起步

Script.aculo.us开发系列(二):EffectsAPI

Script.aculo.us开发系列(三):核心效果(CoreEffect)

Script.aculo.us开发系列(四):动画弹出菜单的实现-开发自己的动画

Script.aculo.us开发系列(五):Prototype封装的艺术

Script.aculo.us开发系列(六):AutoComplete控件

Script.aculo.us开发系列(七):InPlaceEditor控件的使用

Script.aculo.us开发系列(八):使用DropDrag定义拖拽行为

Script.aculo.us开发系列(九):Slider控件的使用

Prototype1.5.0 API 参考