记录:js秘籍(editable2)
<div>If no background color is set on the Element, or its background color is set to 'transparent', the default end value will be white.</div>
<button class='btn'>Edit</button>
<div>Element shortcut method for tweening the background color. Immediately transitions an Element's background color to a specified highlight color then back to its set background color.</div>
<button class='btn'>Edit</button>
<div>Element shortcut method which immediately transitions any single CSS property of an Element from one value to another.</div>
<button class='btn'>Edit</button>
<script type="text/javascript">
function divClicked() {
var divHtml = $(this).prev('div').html();
var editableText = $("<textarea />");
editableText.val(divHtml);
$(this).prev('div').replaceWith(editableText);
editableText.focus();
// setup the blur event for this new textarea
editableText.blur(editableTextBlurred);
}
function editableTextBlurred() {
var html = $(this).val();
var viewableText = $("<div>");
viewableText.html(html);
$(this).replaceWith(viewableText);
// setup the click event for this new div
viewableText.click(divClicked);
}
$(document).ready(function () {
$(".btn").click(divClicked);
});
</script>
<style media="screen">
div {
margin: 20px 0;
}
textarea {
width: 100%;
}
</style>