jQuery外掛程式之jquery editable plugin--點擊編輯文字外掛程式

標籤：下拉   function   llb   html   不同   tool   通過   print   資料   

  jeditable是一個jquery外掛程式，它的優點是可以就地編輯，並且提交到伺服器處理，是一個不可多得的就地編輯外掛程式。(註： 就地編輯，也有稱即時編輯？一般的流程是這樣的，當使用者點擊網頁上的文字時，該文字就會出現在一個編輯框中，使用者對文字進行修改完成後點擊提交按鈕，新的文本將發送到伺服器上，然後表單消失，顯示最新編輯的文本。),你可以通過這個示範頁面來親自體驗下。

    官網:http://www.appelsiini.net/projects/jeditable

基本的使用方法如下：

首先編輯一個 html 檔案，包含這麼一段：

<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>

然後我們使用如下的 JS 代碼來實現即時編輯（要先引入 Jeditable 外掛程式）：

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

 

實現不同內容的編輯以及更多的定製項：

 

$(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...‘    });});

 

上面的定製項包括按鈕的文本，提示資訊以及提交時的 loading 圖片顯示等等。

那麼當使用者點擊了確定按鈕時，發送到伺服器上的是什麼資料呢？

資料內容包含了編輯框的 ID 以及新的內容：id=elements_id&value=user_edited_content

你也可以使用下面的方法來修改預設的參數名：

$(document).ready(function() {    $(‘.edit‘).editable(‘http://www.example.com/save.php‘, {         id   : ‘elementid‘,        name : ‘newvalue‘    });});

修改後傳遞的資料變成：elementid=elements_id&newvalue=user_edited_content

如果單行文字框不注意滿足你的要求，可以使用 textarea 多行文本編輯框：　

 

$(document).ready(function() {    $(‘.edit_area‘).editable(‘http://www.example.com/save.php‘, {         loadurl  : ‘http://www.example.com/load.php‘,        type    : ‘textarea‘,        submit  : ‘OK‘    });});

 

另外 Jeditable 還支援下拉選擇框哦：

$(‘.editable‘).editable(‘http://www.example.com/save.php‘, {     data   : " {‘E‘:‘Letter E‘,‘F‘:‘Letter F‘,‘G‘:‘Letter G‘, ‘selected‘:‘F‘}",    type   : ‘select‘,    submit : ‘OK‘});

 

或者你也可以從伺服器擷取下拉選擇的資料內容：

 

<?php /* http://www.example.com/json.php */ $array[‘E‘] =  ‘Letter E‘;  $array[‘F‘] =  ‘Letter F‘;  $array[‘G‘] =  ‘Letter G‘;  $array[‘selected‘] =  ‘F‘; print json_encode($array);?>

 

然後通過 loadurl 指定這個伺服器輸出資料的 URL 地址：

$(‘.editable‘).editable(‘http://www.example.com/save.php‘, {     loadurl : ‘http://www.example.com/json.php‘,    type   : ‘select‘,    submit : ‘OK‘});

 

如果你希望給組件設定不同的樣式，可以這樣：

 

$(‘.editable‘).editable(‘http://www.example.com/save.php‘, {     cssclass : ‘someclass‘});$(‘.editable‘).editable(‘http://www.example.com/save.php‘, {     loadurl : ‘http://www.example.com/json.php‘,    type    : ‘select‘,    submit  : ‘OK‘,    style   : ‘display: inline‘});　　

 

或者：

$(‘.editable‘).editable(‘http://www.example.com/save.php‘, {     loadurl : ‘http://www.example.com/json.php‘,    type    : ‘select‘,    submit  : ‘OK‘,    style   : ‘inherit‘});

最後來點進階的內容，如果你希望使用一個 JS 函數而不是 URL 來處理提交，可以這樣：

 

$(‘.editable‘).editable(function(value, settings) {     console.log(this);    console.log(value);    console.log(settings);    return(value); }, {     type    : ‘textarea‘,    submit  : ‘OK‘,});

 

處理回調：　

 

$(‘.editable‘).editable(‘http://www.example.com/save.php‘, {     type     : ‘textarea‘,    submit   : ‘OK‘,    callback : function(value, settings) {        console.log(this);        console.log(value);        console.log(settings);    }});

 

使用附加參數：

$(".editable").editable("http://www.example.com/save.php";, {   submitdata : {foo: "bar"};});

 

直接從URL擷取顯示內容：

$(".editable").editable("http://www.example.com/save.php";, {    loadurl : "http://www.example.com/load.php"});

英文原文：http://www.appelsiini.net/projects/jeditable

jQuery外掛程式之jquery editable plugin--點擊編輯文字外掛程式