javascript classical extend

fellowlei
于 2013-06-25 19:58:02 发布
阅读量484
点赞数
分类专栏： javascript 文章标签： JavaScript
本文链接：https://blog.csdn.net/fellowlei/article/details/9173163
版权
javascript 专栏收录该内容
2 篇文章 0 订阅
订阅专栏
<!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 extend(subClass, superClass) {
		var F = function() {
		};
		F.prototype = superClass.prototype;
		subClass.prototype = new F();
		subClass.prototype.constructor = subClass;

		subClass.superClass = superClass.prototype;
		if (superClass.prototype.constructor == Object.prototype.constructor) {
			superClass.prototype.constructor = superClass;
		}
	}

	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;
		}
	}

	function EditInPlaceField(id, parent, value) {
		this.id = id;
		this.value = value || 'default value';
		this.parentElement = parent;
		this.createElements(this.id);
		this.attachEvents();
	}

	EditInPlaceField.prototype = {
		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();
			});
		},
		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);
		},
		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();
		},
		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);
		},
		setValue : function(value) {
			this.fieldElement.value = value;
			this.staticElement.innerHTML = value;
		},
		getValue : function() {
			return this.fieldElement.value;
		}
	}

	function EditInPlaceArea(id, parent, value) {
		EditInPlaceArea.superClass.constructor.call(this, id, parent, value);
	}
	extend(EditInPlaceArea, EditInPlaceField);

	EditInPlaceArea.prototype.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.prototype.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.prototype.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 = new EditInPlaceField('title', id('div1'), 'field value');
		var areaField = new EditInPlaceArea('area', id('div2'), 'area value');
		$("#btn1").click(function() {
			alert(field.getValue());
		});
		$("#btn2").click(function() {
			alert(areaField.getValue());
		});
	});
</script>
</head>
<body>
	<h2>2 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>