jquery EditInPlace插件之(Jeditable)

先来看下效果：
http://www.appelsiini.net/projects/jeditable/default.html
http://www.appelsiini.net/projects/jeditable/custom.html
官方网站：
http://www.appelsiini.net/projects/jeditable
使用方法：
先定义XHTML元素，如：

<div class="edit" id="div_1">Dolor</div>
<div class="edit_area" id="div_2">Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat.</div>

 当我们调用Jeditable插件的时候，必须有一个参数即　将内容提交到服务器的那个网址，

 $(document).ready(function() {
     $('.edit').editable('http://www.example.com/save.php');
 });

 以上代码实现了几个事件：edit元素　通过鼠标单击可以形成一个可编辑的input元素，他的长度和宽度，都取决于它的父元素。 如果用户点击页面的其他地方,那么edit元素将会还原．当然如果用户安esc操作，效果也是一样的，如果用户安enter(回车)键form将会被提交。
更有趣的是：我们可以为等待返回的时候加入文字提示和图片提示

$(document).ready(function() {
     $('.edit').editable('http://www.example.com/save.php', {
         indicator : 'Saving',
         tooltip   : 'Click to edit'
     });
     $('.edit_area').editable('http://www.example.com/save.php', { 
         type      : 'textarea',
         cancel    : 'Cancel',
         submit    : 'OK',
         indicator : '<img src="img/indicator.gif">',
         tooltip   : 'Click to edit'
     });
 });

当我们点击提交时，发送了些什么呢，数据格式如下：
elementid=elements_id&newvalue=user_edited_content



有些情况下我们不想用默认的参数名称，想自己定义参数名称 如下面形式

elementid=elements_id&newvalue=user_edited_content
那我们在js里面需要加两个参数 如:
$(document).ready(function() {
     $('.edit').editable

('http://www.cnjquery.com/demo/Jeditable/save.php', {
         id   : 'elementid',
         name : 'newvalue'
     });
 });
看看支持的其它小部件：

$(document).ready(function() {
  $(".charcounter").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", { 
      indicator : "<img src='img/indicator.gif'>",
      type      : "charcounter",
      submit    : 'OK',
      tooltip   : "Click to edit",
      onblur    : "ignore",
      charcounter : {
         characters : 60
      }
  });
    $(".autogrow").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", { 
        indicator : "<img src='img/indicator.gif'>",
        type      : "autogrow",
        submit    : 'OK',
        tooltip   : "Click to edit",
        onblur    : "ignore",
        autogrow : {
           lineHeight : 16,
           minHeight  : 32
        }
    });
    $(".masked").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", { 
        indicator : "<img src='img/indicator.gif'>",
        type      : "masked",
        mask      : "99/99/9999",
        submit    : 'OK',
        tooltip   : "Click to edit"
    });
    $(".datepicker").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", { 
        indicator : "<img src='img/indicator.gif'>",
        type      : 'datepicker',
        tooltip   : "Click to edit"
    });
    $(".timepicker").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", { 
        indicator : "<img src='img/indicator.gif'>",
        type      : 'timepicker',
        submit    : 'OK',
        tooltip   : "Click to edit"
    });
    $(".time").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", { 
        indicator : "<img src='img/indicator.gif'>",
        type      : 'time',
        submit    : 'OK',
        tooltip   : "Click to edit"
    });
    $(".ajaxupload").editable("http://www.appelsiini.net/projects/jeditable/php/upload.php", { 
        indicator : "<img src='img/indicator.gif'>",
        type      : 'ajaxupload',
        submit    : 'Upload',
        cancel    : 'Cancel',
        tooltip   : "Click to upload"
    });