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

大名鼎鼎的InplaceEditor在Script.aculo.us 中怎么可以少呢,这话其实有点夸大了,InPlaceEditor的人气自然比AutoComplete要差几分,本人也只有在163上看到,这个控件要被大众接受恐怕还有一定的时间,由此也想到Web2.0虽然是一个很时髦的词汇,在开发人员中街谈巷议,在普通的网名中,他们的脑子里Web2.0的概念究竟由多深,Web2.0对用户需要了解的东西知道的多少,我个人觉得还有些时日.当然,即便如此,我们应该用于挑起Web2.0的新潮,然更多的人接受Web2.0.扯远了.

先看今天的主角吧,看两个例子http://www1.qcxy.hb.cn/qphy/Script_Aculo_Us/InPlaceEditor.html http://www1.qcxy.hb.cn/qphy/Script_Aculo_Us/InplaceCollectionEditor.html ,他的特点是操作相当简便,和服务器的交互也相当快捷,而且还应用了一点小效果,若隐若现的.

使用方法

new  Ajax.InPlaceEditor("TargetId","RequestUrl"[,options]);

选项参数 (好多)

• paramName:传送到服务器的参数名,默认为"value"
• okButton:是否显示OK按钮,默认为true
• okText:OK按钮的文本,默认为"OK"
• cancelLink:是否显示Cancel超链接
• cancelText: 取消 超链接的文本,默认为"cancel"
• savingText:保存时文本框中的文本,默认为"Saving..."
• clickToEditText:鼠标放在$(TargetId)上弹出的提示文本,对应$(TargetId)的title属性
• okText:OK按钮文本,默认为"ok"
• rows:文本框的行数,默认为1
• cols:文本框的列数
• highlightcolor:高亮背景颜色,默认为"#FFFF99"
• handleLineBreaks:是否将文本框中的"\n"替换为"<br/>",默认为true
• loadingText:在点击开始编辑时,InplaceEditor会从RequestUrl中请求初始值,这样请求没有参数,所以在服务器段页面处理的时候注意无参情况下会返回文本框的初始文本,loadingText的默认值为"Loading"
• savingClassName:savingText的类名,默认为"inplaceeditor-saving",这些样式都需要自己定义.
• loadingClassName:loadingText的样式类名,默认为"inplaceeditor-loading"
• formClassName:点击编辑时$(TargetId)会替换为一个form,这个form的className,默认为"inplaceeditor-form"
• highlightendcolor:应用HighLight效果的endColor,默认为"#ffffff"
• externalControl:在$(TargetId)元素之外的一个页面元素,当鼠标放在这个元素上,$(TargetId)会来个Effect.HighLight,点击这个元素,可以进入编辑状态,而且这个元素会隐藏,编辑存盘后它又会显示.externalControl就是这个元素的ID
• submitOnBlur: 是否在文本框(编辑框)失去焦点时提交存盘,默认为false
• ajaxOptions:Prototype 框架中的Ajax.Request类中的option,参见Prototype
• evalScripts:是否去除请求的responseText中的script,默认为false.这个属性在Prototype1.5.0之后的版本中可以直接写在ajaxOptions中
• formId,替换$(TargetId)的form的Id,默认为TargetId+"-inplaceeditor"
• textarea:文本框是否显示为TextArea, 默认为false
• 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,很有意思.下回分解