超级好的快速编辑器,用户点击表单内的文本便可以直接进入编辑状态,编辑成功后保存将显示编辑后的文本,图片也可以直接点击更换,太酷了
下载:
点击下载全部源代码及相关资源
程序调用说明:
第一步:创建HTML代码
这里我们创建了一个标准的HTML表单
<form>
<h1>Click on the names and adresses </h1>
<table id="personalCard">
<tr>
<td>First name:</td>
<td><span id="firstname">Alf Magne</span></td>
</tr>
<tr>
<td>Last name:</td>
<td><span id="lastname">Kalleland</span></td>
</tr>
<tr>
<td>Address:</td>
<td><div id="address">Somewhere<br>In Norway</div></td>
</tr>
<tr>
<td>Country:</td>
<td><span id="country">Norway</span></td>
</tr>
<tr>
<td>Gender:</td>
<td><span id="gender">Male</span></td>
</tr>
</table>
</form>
第二步:指定编辑方式
通过 <style> 实现.把Style的类型指定为 "text/aVquickEdit".
<style type="text/aVquickEdit">
#personalCard span,#personalCard div{
action: 'change.php',
params: 'var=' + element.id + '&val',
condition: 1
}
#personalCard div {
type: 'textarea'
}
#country{
type:'select',
selectValues: ['Denmark','Finland','France','Germany','Norway','Spain','Sweden','United Kingdom','United States']
}
#gender{
type:'select',
selectValues: ['female','male']
}
</style>
属性:
这里有部分属性需要在 <style> 块中指定:
action: 修改的提交文件路径
type: 如: select, textarea, text
selectValues: 可供选择的值, 如: ['Female','Male']
fade: 淡入淡出效果
params: 参数是随着URL提交到服务器用的. 如: 'var=' + element.id + '&val=something'




