javascript mixin extend

最新推荐文章于 2023-03-06 12:01:18 发布

fellowlei

最新推荐文章于 2023-03-06 12:01:18 发布

阅读量566

点赞数

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

本文链接：https://blog.csdn.net/fellowlei/article/details/9173191

版权

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 argument(receivingClass, givingClass) {
		if (arguments[2]) {
			for ( var i = 2, len = arguments.length; i < len; i++) {
				receivingClass.prototype[arguments[i]] = givingClass.prototype[arguments[i]];
			}
		} else {
			for (methodName in givingClass.prototype) {
				if (!receivingClass.prototype[methodName]) {
					receivingClass.prototype[methodName] = givingClass.prototype[methodName];
				}
			}
		}
	}

	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 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 EditInPlaceMixin = function() {
	};

	EditInPlaceMixin.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();
			})
		},
		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;
		}
	}

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

	argument(EditInPlaceField, EditInPlaceMixin);

	function EditInPlaceArea(id, parent, value) {
		this.id = id;
		this.value = value || 'default value';
		this.parentElement = parent;

		this.createElements(this.id);
		this.attachEvents();
	}

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

	argument(EditInPlaceArea, EditInPlaceMixin);

	$(document).ready(function() {
		var field = new EditInPlaceField('title', id('div1'), 'field value');
		$("#btn1").click(function() {
			alert(field.getValue());
		});

		var area = new EditInPlaceArea('area', id('div2'), 'area value');
		$("#btn2").click(function() {
			alert(area.getValue());
		});
	});
</script>
</head>
<body>
	<h2>4 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">
</body>
</html>

fellowlei

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript mixin extend

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; cha
复制链接

扫一扫