jQuery插件之jquery editable plugin点击编辑文字插件

这是一个真正可定制的jQuery editable plugin。当前它能够将任意不可编辑的标签（span、div、p…等）转换成可编辑的text input、password、textarea、下拉列表（drop-down list）等标签。你可以利用它的editableFactory对象来扩展添加自己所需的input type。

    先引入插件的js文件，在页面放置要编辑的文字：

    <div class=”d”>编辑的文字</div>

    接着就是实现功能了

    $(“.d”).editable();

    很简单吧！要实现更多的效果就要给这个插件带入些参数了，若不带参数，是使用插件默认的。

    你可以象下面这样使用：
    $(selector).editable(‘disable’) 
    $(selector).editable(‘enable’) 
    $(selector).editable(‘destroy’)

    上面的三个实例我想不说明你也知道是什么意思了，不明白可以自己亲自试试看，关键我们看看下面的用法
     $(selector).editable(options)

    这个options就稍有点复杂，使用是以下面的形式：
     $(selector).editable({
         type:
         editBy:
         submitBy:
         submit:
         …
      })

我只说几个用的多一点的参数，其他的可以自己看官网。type :可以是 ‘text’,’password’,textarea’,’select’

    比如：
     $(selector).editable({type:textarea})  

    若type是select,就要另外给select指定option了
     $(“.d”).editable({
         type:select,
         options:{‘选项1′:’值1′,’选21′:’21’,’选项3′:’值3′}
     });

editBy ：可以是’click’,’dblclick’,’change’,’blur’，就是说是单击的时候编辑还是双击的时候编辑，…

editClass ：编辑的时候的样式

submitBy ：提交的方式，可以是 ‘blur’,’dblclick’,’change’,’click’

onSubmit ：提交的时候执行的函数

说了这么多，大家能关心的是既然可以编辑文字，那怎么把编辑后的结果保存呢？？这个就要用到onSubmit了，我们可以在onSubmit的时候调用一个函数，执行ajax请求把结果保存到数据库。

/********************************************/以上部是粘贴自别人的部分，我在做开发的时候，也试过这个插件，我从一个用户的角度来考虑用户习惯，当我们要大量在表格中录入数据的时候，我们希望通过点击tab键

就可以切换到下一个表单上，并处于编辑状态，其实综上要实现这个效果并不难

$("#main_table2 tr td").not(":nth-child(9n-5)").editable({
        submitBy:"blur",
        onSubmit:function(){
            $(this).next().trigger("click");
        }
    });
    $("#main_table2 tr td:nth-child(9n-5)").editable({
        type:"select",
        options:{"none":"","man":"男","women":"女"},
        onSubmit:function(){
            $(this).next().trigger("click");
        }
    });

类似上面我写的部分，只要在指定的onsubmit回调函数的时候，通过jquery中的trigger事件模拟用户的点击事件，就可以完成我说的效果了