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事件模擬用戶的點擊事件，就可以完成我說的效果了