ویرایش

[mah.tab]

من میخام دکمه ای قرار بدم که بعد از کلیک شدن بدون تغیر صفحه همونجا فیلد های مطلب قابل ویرایش شوند.
از چه چیزی باید استفاده کنم ؟

[hakan648]

شاید این کدی که نوشتم ایده ای از نحوه ی انجام کار بهتون بده. ( شاید هم کتابخانه ای برای انجام این کار باشه، ولی من اطلاعی ندارم. )


<form>
<span
class="editable"
data-input-type="text"
data-input-name="name">some text</span><br/>

<span
class="editable"
data-input-type="check"
data-input-name="gender">Yes</span><br/>

<input type="button" value="edit" id="btn_edit"/>
</form>


var isInEditMode;

document.getElementById("btn_edit").onclick = function()
{
if(!isInEditMode)
{
enableEditForm();
isInEditMode = !isInEditMode;
}
}

function enableEditForm()
{
var $editableElems = $("form .editable");

$editableElems.each(function(i, e){
var $elem = $(e);
enableEditElem($elem);
});
}

function enableEditElem($elem)
{
var
value = $elem.text(),
type = getEditElemType($elem),
name = $elem.attr("data-input-name"),
$label = $("<label/>").text(name + ":"),
$editElem = getEditElem(value, type, name);

$elem
.hide()
.after($editElem)
.after($label);
}

function getEditElemType($elem)
{
return $elem.attr("data-input-type");
}

function getEditElem(value, type, name)
{
var $elem;

switch(type)
{
case 'text':
$elem = $("<input/>").attr("type","text").val(value);
break;
case 'check':
$elem = $("<input/>").attr("type","checkbox");

if(value && value == "Yes")
$elem.attr("checked", "checked");
break;
//other types
}

$elem.attr("name", name);

return $elem;
}


Test
http://jsfiddle.net/E5pRv/1/