<title>Edit-in-Place with jQuery</title> <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script> <script src="js/jqueryEIP2.js" type="text/javascript"></script>
</head>
<body>
<h1>Edit-in-Place with jQuery</h1>
<div id="editInPlace"> <p>Dashing <strong>through</strong> the snow on a
one-horse open sleigh, over the fields we go, laughing all the way; bells on
bob-tail ring, making spirits bright, what fun it is to ride and sing a sleighing
song tonight. Jingle bells, jingle bells, Jingle all the way! O what fun it
is to ride in a one-horse open sleigh. Oh! Jingle bells, jingle bells, Jingle
all the way! O what fun it is to ride in a one-horse open sleigh.</p> <p>Let's see what another p does</p> <p><strong>Note:</strong> This example does not send the results to a server side script for active saving of changed content. It would not be difficult to use jQuery to send the saved content to a PHP or perl script (or Rails) using AHAH.</p>
</div>
</body> </html
jqueryEIP2.js文件
Code $(document).ready(function(){
setEdit();
});
function setEdit()
{
$(".edit").click(function(){
$(this).remove(); var textarea ='<div><textarea rows="10" cols="60">'+ $("#dialog").html() +'</textarea>'; var button ='<div><input type="button" value="保存" class="save" /> <input type="button" value="取消" class="cancel"/></div></div>'; var revert = $("#dialog").html();
$("#dialog").after(textarea+button).remove();
$(".save").click(function(){saveChanges(this,false);});
$(".cancel").click(function(){saveChanges(this,revert);});
});
};
function saveChanges(obj,cancel)
{ if (!cancel)
{ var t = $(obj).parent().siblings(0).val();
} else { var t = cancel;
} if(t=='') t='(click to add text)'; var bt='<input type="button" class="edit" value="编辑" />';
$(obj).parent().parent().after('<div id="dialog">'+t+'</div><br />'+bt).remove();
setEdit();
Code
浙公网安备 33010602011771号