<div id="container">
  <h1>Ajax Editing</h1>
  <p>鼠标移动到列表上，双击即可以进行编辑！</p>
  <div class="block">
    <h2>一、电影列表</h2>
    <ul class="editable">
      <li>《建国大业》，<span class="color_red">更新中...</span></li>
      <li><a href="http://www.ihiro.org/film-eternal-beloved">《爱有来生》</a></li>
      <li><a href="http://www.ihiro.org/movie-coco-chanel">《COCO Chanel》</a></li>
      <li><a href="http://www.ihiro.org/one-night-in-supermarket">《夜店》</a></li>
      <li><a href="http://www.ihiro.org/the-legend-of-1900">《海上钢琴师–1900的传说》</a></li>
      <li><a href="http://www.ihiro.org/film-xinsushijian-feedback">《新宿事件》</a></li>
    </ul>
  </div>
  <div class="block">
    <h2>二、书籍列表</h2>
    <ul class="editable">
      <li>《精通Javascript》</li>
      <li>《jQuery基础教程》</li>
      <li>《Flex入门到精通》</li>
      <li>《PHP与MySQL Web开发》</li>
      <li>《Google，你可以做什么》</li>
      <li>《不抱怨的世界》</li>
    </ul>
  </div>
</div>

* { margin:0; padding:0;}
body { font:12px/20px Georgia, "Times New Roman", Times, serif; color:#404040;}
 
h2 { font-size:24px;}
 
.color_red { color:#F00;}
 
#container { width:400px; margin:30px auto; overflow:hidden; height:1%;}
 
	/* 标题样式 */
	#container h1 { text-align:center; font:32px "Lucida Sans Unicode", "Lucida Grande", sans-serif; margin-bottom:20px;}
 
	.block { width:180px; float:left; margin:30px 20px 0 0;}
 
	/* 列表li的样式 */
	ul.editable li { padding:10px 0; list-style:none;}
 
	/* 高亮当前编辑的列表li */
	.hover { background:#E8F3FF;}
 
	/* 高亮当前的input输入框 */
	.editInput { width:160px; border:2px solid #E8F3FF; display:block;}
 
 
	/* save和cancel按钮的效果，鼠标移动到上面的效果 */
	.btnSave, .btnCancel { padding:0 5px; border:1px solid #09F; background:#36F; color:#fff; text-decoration:none; margin:10px 0 0 20px;}
	.btnSave:hover, .btnCancel:hover  { border:1px solid #36F; color:#39F; background:#fff;}

$(function() {
 
	var oldText, newText;
 
	//鼠标移动到列表li上后，添加一个高亮的背景
	$('.editable li').hover(function() {
		$(this).addClass('hover');
	}, function() {
		$(this).removeClass('hover');
	}).bind('dblclick', function() {
 
		//获得列表li中原先的html代码
		oldText = $(this).html().replace(/"/g, """);
 
		//将原先的html代码放在一个input中，并追加save和cancel按钮后插入到列表li中
		$(this).html('<input type="text" class="editInput" value="' + oldText +'" /><a href="#" class="btnSave">save</a><a href="#" class="btnCancel">cancel</a>');
	}).children('a').attr('target', '_blank');	//链接在新窗口中打开
 
	//点击save按钮，将新的值插入在列表li中
	$('.btnSave').live('click', function() {
		newText = $(this).siblings('input').val().replace(/"/g, "&quot;");
 
		$(this).parent('li').html(newText);
 
		//设置超链接a的跳转为否
		return false;
	});
 
	//若点击cancel按钮，则将最初的html代码插入在列表li中
	$('.btnCancel').live('click', function() {
		$(this).parent('li').html(oldText);
 
		//设置超链接a的跳转为否
		return false;
	});
 
});