jquery EditInPlace插件之(Jeditable)

luinstein

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

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

复制代码

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

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

复制代码

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

1. $(document).ready(function() {
   
2. 
   
3.      $('.edit').editable('http://www.example.com/save.php', {
   
4. 
   
5.          indicator : 'Saving',
   
6. 
   
7.          tooltip   : 'Click to edit'
   
8. 
   
9.      });
   
10. 
    
11.      $('.edit_area').editable('http://www.example.com/save.php', {
    
12. 
    
13.          type      : 'textarea',
    
14. 
    
15.          cancel    : 'Cancel',
    
16. 
    
17.          submit    : 'OK',
    
18. 
    
19.          indicator : '<img src="img/indicator.gif">',
    
20. 
    
21.          tooltip   : 'Click to edit'
    
22. 
    
23.      });
    
24. 
    
25. });

复制代码

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

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

elementid=elements_id&newvalue=user_edited_content
那我们在js里面需要加两个参数 如:

1. $(document).ready(function() {
   
2.      $('.edit').editable
   
3. 
   
4. ('http://www.cnjquery.com/demo/Jeditable/save.php', {
   
5.          id   : 'elementid',
   
6.          name : 'newvalue'
   
7.      });
   
8. });

复制代码

看看支持的其它小部件：

1. $(document).ready(function() {
   
2.   $(".charcounter").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", {
   
3.       indicator : "<img src='img/indicator.gif'>",
   
4.       type      : "charcounter",
   
5.       submit    : 'OK',
   
6.       tooltip   : "Click to edit",
   
7.       onblur    : "ignore",
   
8.       charcounter : {
   
9.          characters : 60
   
10.       }
    
11.   });
    
12.     $(".autogrow").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", {
    
13.         indicator : "<img src='img/indicator.gif'>",
    
14.         type      : "autogrow",
    
15.         submit    : 'OK',
    
16.         tooltip   : "Click to edit",
    
17.         onblur    : "ignore",
    
18.         autogrow : {
    
19.            lineHeight : 16,
    
20.            minHeight  : 32
    
21.         }
    
22.     });
    
23.     $(".masked").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", {
    
24.         indicator : "<img src='img/indicator.gif'>",
    
25.         type      : "masked",
    
26.         mask      : "99/99/9999",
    
27.         submit    : 'OK',
    
28.         tooltip   : "Click to edit"
    
29.     });
    
30.     $(".datepicker").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", {
    
31.         indicator : "<img src='img/indicator.gif'>",
    
32.         type      : 'datepicker',
    
33.         tooltip   : "Click to edit"
    
34.     });
    
35.     $(".timepicker").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", {
    
36.         indicator : "<img src='img/indicator.gif'>",
    
37.         type      : 'timepicker',
    
38.         submit    : 'OK',
    
39.         tooltip   : "Click to edit"
    
40.     });
    
41.     $(".time").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", {
    
42.         indicator : "<img src='img/indicator.gif'>",
    
43.         type      : 'time',
    
44.         submit    : 'OK',
    
45.         tooltip   : "Click to edit"
    
46.     });
    
47.     $(".ajaxupload").editable("http://www.appelsiini.net/projects/jeditable/php/upload.php", {
    
48.         indicator : "<img src='img/indicator.gif'>",
    
49.         type      : 'ajaxupload',
    
50.         submit    : 'Upload',
    
51.         cancel    : 'Cancel',
    
52.         tooltip   : "Click to upload"
    
53.     });

复制代码

from:http://go.cxweb.com.cn/zh-8h