使用JQuery实现Edit in place效果的Input框

用过Gmail的应该都知道其内置的通讯录，当鼠标移动到联系人的姓名或者电话号码上时候就会自动进入编辑状态。这种方式对用户来说比较友好，没有弹出单独的编辑界面，用户可以再当前上下文环境中进行编辑。实现这种效果的基本思路就是当鼠标移动到可编辑内容上的时候对显示方式进行更改，比如之前的是在一个label中显示一段文字，当鼠标移动到label上时候，使用JavaScript将label替换为一个input，同时保持input中的内容与原来label一致。当然还有更简单的实现方式，一开始就使用input显示内容，不过这时候input的边框不能显示出来，这样用户就看不出那个input框，当鼠标移动到这个input框的时候再将其边框显示出来，下面就是根据这个思路写的一个JQuery Plugin：

;(function($) {
	
	$.fn.wwReadWriteInput = function(options){
		var opts = $.extend({}, $.fn.wwReadWriteInput.defaults, options);
		return this.mouseenter(function(){
			var $this = $(this);
			$this.removeClass(opts.readClass);
			$this.addClass(opts.writeClass);
		}).mouseleave(function(){
			var $this = $(this);
			$this.removeClass(opts.writeClass);
			$this.addClass(opts.readClass);
		});
	};
	
	//default settings
	$.fn.wwReadWriteInput.defaults = {
		readClass: '',
		writeClass: ''
	};
	
})(jQuery);

从代码中容易看出，使用了两个class来表示显示状态和编辑状态，使用者只要分别定义自己的样式就可以使用，比如：我将这两种样式分别定义为：

.writable-ipt {
	border: 1px;
	border-color: #9a9a9a #cdcdcd #cdcdcd #9a9a9a;
	border-style: solid;
}

.readonly-ipt {
	border-color: #fff;
}

在readonly-ipt中将input的边框设置为白色，也就是相应页面的背景色，这样input就和背景融为一体，用户看来就是显示在页面上的一段文字。当鼠标移动到input框的时候它的样式会变为writable-ipt定义的样式，这时候边框设置了颜色，用户明显可以看出这是一个input框，从而可以对其内容进行编辑。下面是实际使用的代码：

	$(".inline-edit-ipt").wwReadWriteInput({
		readClass: 'read-only-ipt',
		writeClass: 'writable-ipt'
	});

大家可以看到这个Plugin相当简陋，只完成了最基本的样式切换，用户编辑完成以后还需要向后台服务器发送Ajax请求来更新数据，这时候只需要在input框的blur事件响应函数中做相应处理即可。