javascript prototypal extend

fellowlei

于 2013-06-25 20:00:52 发布

阅读量706

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/fellowlei/article/details/9173181

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在网页上实现内联编辑功能的方法，包括字段和区域的编辑。通过JavaScript实现了元素之间的转换，使用户可以方便地在查看模式和编辑模式间切换，并保存更改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
	function id() {
		var elements = [];
		for ( var i = 0, len = arguments.length; i < len; ++i) {
			var element = arguments[i];
			if (typeof element === 'string') {
				element = document.getElementById(element);
			}
			if (arguments.length === 1) {
				return element;
			}
			elements.push(element);
		}
		return elements;
	}
	function clone(object) {
		function F() {
		}
		F.prototype = object;
		return new F;
	}

	function addEvent(el, type, fn) {
		if (window.addEventListener) {
			el.addEventListener(type, fn, false);
		} else if (window.attachEvent) {
			el.attachEvent('on' + type, fn);
		} else {
			el['on' + type] = fn;
		}
	}

	var EditInPlaceField = {
		configure : function(id, parent, value) {
			this.id = id;
			this.value = value || 'defalut value';
			this.parentElement = parent;

			this.createElements(this.id);
			this.attachEvents();
		},
		createElements : function(id) {
			this.containerElement = document.createElement('div');
			this.parentElement.appendChild(this.containerElement);

			this.staticElement = document.createElement('span');
			this.containerElement.appendChild(this.staticElement);
			this.staticElement.innerHTML = this.value;

			this.fieldElement = document.createElement('input');
			this.fieldElement.type = 'text';
			this.fieldElement.value = this.value;
			this.containerElement.appendChild(this.fieldElement);

			this.saveButton = document.createElement('input');
			this.saveButton.type = 'button';
			this.saveButton.value = 'Save';
			this.containerElement.appendChild(this.saveButton);

			this.cancelButton = document.createElement('input');
			this.cancelButton.type = 'button';
			this.cancelButton.value = 'Cancel';
			this.containerElement.appendChild(this.cancelButton);

			this.convertToText();
		},
		attachEvents : function() {
			var that = this;
			addEvent(this.staticElement, 'click', function() {
				that.convertToEditable();
			});
			addEvent(this.saveButton, 'click', function() {
				that.save();
			});
			addEvent(this.cancelButton, 'click', function() {
				that.cancel();
			});
		},
		convertToEditable : function() {
			this.staticElement.style.display = 'none';
			this.fieldElement.style.display = 'inline';
			this.saveButton.style.display = 'inline';
			this.cancelButton.style.display = 'inline';

			this.setValue(this.value);
		},
		save : function() {
			this.value = this.getValue();
			var that = this;
			var callback = {
				success : function() {
					that.convertToText();
				},
				failure : function() {
					alert('Error saving value.');
				}
			}
			this.convertToText();
		},
		cancel : function() {
			this.convertToText();
		},
		convertToText : function() {
			this.fieldElement.style.display = 'none';
			this.saveButton.style.display = 'none';
			this.cancelButton.style.display = 'none';
			this.staticElement.style.display = 'inline';

			this.setValue(this.value);
		},
		setValue : function(value) {
			this.fieldElement.value = value;
			this.staticElement.innerHTML = value;
		},
		getValue : function() {
			return this.fieldElement.value;
		}
	}

	var EditInPlaceArea = clone(EditInPlaceField);

	EditInPlaceArea.createElements = function(id) {
		this.containerElement = document.createElement('div');
		this.parentElement.appendChild(this.containerElement);

		this.staticElement = document.createElement('p');
		this.containerElement.appendChild(this.staticElement);
		this.staticElement.innerHTML = this.value;

		this.fieldElement = document.createElement('textarea');
		this.fieldElement.value = this.value;
		this.containerElement.appendChild(this.fieldElement);

		this.saveButton = document.createElement('input');
		this.saveButton.type = 'button';
		this.saveButton.value = 'Save';
		this.containerElement.appendChild(this.saveButton);

		this.cancelButton = document.createElement('input');
		this.cancelButton.type = 'button';
		this.cancelButton.value = 'Cancel';
		this.containerElement.appendChild(this.cancelButton);

		this.convertToText();
	};
	EditInPlaceArea.convertToText = function() {
		this.fieldElement.style.display = 'none';
		this.saveButton.style.display = 'none';
		this.cancelButton.style.display = 'none';
		this.staticElement.style.display = 'block';

		this.setValue(this.value);
	};

	EditInPlaceArea.convertToEditable = function() {
		this.staticElement.style.display = 'none';
		this.fieldElement.style.display = 'block';
		this.saveButton.style.display = 'inline';
		this.cancelButton.style.display = 'inline';

		this.setValue(this.value);
	};

	$(document).ready(function() {
		var field = clone(EditInPlaceField);
		field.configure('field', id('div1'), 'field value');
		$("#btn1").click(function() {
			alert(field.getValue());
		});
		var area = clone(EditInPlaceArea);
		area.configure('area', id('div2'), 'area value');
		$("#btn2").click(function() {
			alert(area.getValue());
		});
	});
</script>
</head>
<body>
	<h2>3 page</h2>
	<hr>
	<div id="div1"></div>
	<input type="button" id="btn1" value="btn1">
	<div id="div2"></div>
	<input type="button" id="btn2" value="btn2">
	<br>

</body>
</html>