2009-08-08 101 views
0

我想在現場進行編輯,其中有常規文本(來自模型),旁邊有編輯按鈕。點擊編輯按鈕後,我想要一個可編輯的文本框出現在常規文本的位置,然後通過AJAX提交更改。我已經解決了如何提交,但我不知道如何準確地將編輯控件放置在之前的文本位置。這可能很容易讓你的JS大師在那裏。ASP.NET MVC/jQuery:現場編輯

除了放置問題,我想知道是否應該點擊編輯按鈕時通過AJAX獲取適當的編輯框(常規文本的文本框,日期等的日曆等),或者它會更好地發送它與頁面,並保持隱藏,直到需要?或者我可以以某種方式在客戶端重複使用單個實例嗎?

對不起,這是兩個問題之一,但它們是緊密相關的。

謝謝!

回答

2

我會推薦JEditable我以前用過它,它工作得很好。

一個例子:

標記

<div class="editable_text" id="my_text">My Text</div><a href="#" class="trigger_editable">Edit</a> 

jQuery的

$(".editable_text").editable("YOUREDITURLHERE", { event : "edit" }); 
$(".trigger_editable").bind("click", function() { 
     $(this).prev().trigger("edit"); 
}); 

希望這有助於。

3

不確定要了解按鈕放置問題。不過,爲此設計了一些jquery插件。其中之一是Jeditable,找到演示here

2

商店的標記中的變量編輯,存儲當前的標記在一個變量編輯之前(這樣你就可以恢復,如果按下取消按鈕),然後使用jquery切換出來:

var editmarkupvariable = [editmarkup]; 
var revertmarkup = $("#item").html(); 
<div class="item"> 
    [markup] 
</div> 

$("#item").html(editmarkupvariable); 

本教程提供了更多的細節: http://15daysofjquery.com/edit-in-place-with-ajax-using-jquery-javascript-brary/15/

這應該回答兩個提問。

我會谷歌的jquery插件來做到這一點,除非你必須手工編碼。這裏是一個:http://aktagon.com/projects/jquery/in-place-edit

0

如果問題是嚴格的文本編輯,你爲什麼不能使用有兩種用途的單一文本區域以及單擊編輯按鈕時切換disable屬性(也可能background-color & border風格)?