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 "
    });

转载于:https://www.cnblogs.com/orez88/articles/1415456.html