点击文本可以直接进行编辑的JavaScript脚本

2008-12-26 10:50:59 | 【

超级好的快速编辑器,用户点击表单内的文本便可以直接进入编辑状态,编辑成功后保存将显示编辑后的文本,图片也可以直接点击更换,太酷了

查看演示页面 View Demo

下载:
点击下载全部源代码及相关资源


程序调用说明:
第一步:创建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'

下载"点击文本可以直接进行编辑的JavaScript脚本"

  • 本地下载
  • 本地下载2

相关资源