文档章节

js 对象插件例子

皇太极
 皇太极
发布于 2016/07/06 11:15
字数 416
阅读 47
收藏 1
js
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>edit01_1</title>
		<meta name="author" content="KongHao" />
		<script type="text/javascript" src="../inc/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="PlaceFieldEdit.js"></script>
		<script type="text/javascript">
			$(function(){
				var e1 = new PlaceFieldEdit("1",document.getElementById("edit"),"输入成绩");
			});
		</script>
		<!-- Date: 2014-05-04 -->
	</head>
	<body>
	<div id="edit"> </div>
	</body>
</html>
/**
 * @author
 */
var PlaceFieldEdit = function(id,parent,value) {
	this.id = id;
	this.parentEle = parent;
	this.value = value||"请输入相应的值";
	
	this.initElement();
	this.attachEvents();
};

PlaceFieldEdit.prototype = {
	constructor:PlaceFieldEdit,
	initElement:function() {
		this.containerEle = document.createElement("div");
		this.parentEle.appendChild(this.containerEle);
		
		this.txtEle = document.createElement("span");
		this.containerEle.appendChild(this.txtEle);	
		this.txtEle.innerHTML = this.value;
		
		this.fieldEle = document.createElement("input");
		this.fieldEle.type = "text";
		this.fieldEle.value = this.value;
		this.containerEle.appendChild(this.fieldEle);
		
		this.saveBtn = document.createElement("input");
		this.saveBtn.type = "button";
		this.saveBtn.value = "存储";
		this.containerEle.appendChild(this.saveBtn);
		
		this.cancelBtn = document.createElement("input");
		this.cancelBtn.type = "button";
		this.cancelBtn.value = "取消";
		this.containerEle.appendChild(this.cancelBtn);
		this.convert2Txt();
	},
	attachEvents:function() {
		var that = this;
		$(this.txtEle).on("click",function(event){ that.convert2Editable(); });
		$(this.saveBtn).on("click",function(event){ that.save(); });
		$(this.cancelBtn).on("click",function(event){ that.cancel(); });
	},
	convert2Editable:function() {
		this.txtEle.style.display = "none";
		this.fieldEle.style.display = "inline";
		this.saveBtn.style.display = "inline";
		this.cancelBtn.style.display = "inline";
		
		this.setValue(this.value);
	},
	save:function() {
		//执行ajax来完成相应的操作
		this.value = this.fieldEle.value;
		var url = "save?id="+this.id+"&value="+this.value;
		alert(url);
		this.convert2Txt();
	},
	cancel:function() {
		this.convert2Txt();
	},
	convert2Txt:function() {
		this.txtEle.style.display = "inline";
		this.fieldEle.style.display = "none";
		this.saveBtn.style.display = "none";
		this.cancelBtn.style.display = "none";
		
		this.setValue(this.value);
	},
	setValue:function(value) {
		this.txtEle.innerHTML = value;
		this.fieldEle.value = value;
	},
	getValue:function() {
		return this.value;
	}
	
};

下面是第二种方式

/**
 * @author
 */
var PlaceFieldEdit = {
	config:function(id,parent,value) {
		this.id = id;
		this.parentEle = parent;
		this.value = value||"请输入相应的值";
		
		this.initElement();
		this.attachEvents();
	},
	initElement:function() {
		this.containerEle = document.createElement("div");
		this.parentEle.appendChild(this.containerEle);
		
		this.txtEle = document.createElement("span");
		this.containerEle.appendChild(this.txtEle);	
		this.txtEle.innerHTML = this.value;
		
		this.fieldEle = document.createElement("input");
		this.fieldEle.type = "text";
		this.fieldEle.value = this.value;
		this.containerEle.appendChild(this.fieldEle);
		
		this.saveBtn = document.createElement("input");
		this.saveBtn.type = "button";
		this.saveBtn.value = "存储";
		this.containerEle.appendChild(this.saveBtn);
		
		this.cancelBtn = document.createElement("input");
		this.cancelBtn.type = "button";
		this.cancelBtn.value = "取消";
		this.containerEle.appendChild(this.cancelBtn);
		this.convert2Txt();
	},
	attachEvents:function() {
		var that = this;
		$(this.txtEle).on("click",function(event){ that.convert2Editable(); });
		$(this.saveBtn).on("click",function(event){ that.save(); });
		$(this.cancelBtn).on("click",function(event){ that.cancel(); });
	},
	convert2Editable:function() {
		this.txtEle.style.display = "none";
		this.fieldEle.style.display = "inline";
		this.saveBtn.style.display = "inline";
		this.cancelBtn.style.display = "inline";
		
		this.setValue(this.value);
	},
	save:function() {
		//执行ajax来完成相应的操作
		this.value = this.fieldEle.value;
		var url = "save?id="+this.id+"&value="+this.value;
		alert(url);
		this.convert2Txt();
	},
	cancel:function() {
		this.convert2Txt();
	},
	convert2Txt:function() {
		this.txtEle.style.display = "inline";
		this.fieldEle.style.display = "none";
		this.saveBtn.style.display = "none";
		this.cancelBtn.style.display = "none";
		
		this.setValue(this.value);
	},
	setValue:function(value) {
		this.txtEle.innerHTML = value;
		this.fieldEle.value = value;
	},
	getValue:function() {
		return this.value;
	}
};


© 著作权归作者所有

共有 人打赏支持
皇太极
粉丝 1
博文 202
码字总数 15983
作品 0
襄阳
私信 提问
强大的JQuery-自定义插件

====jQuery插件编写原则===== 1.命名 jQuery..js 2.插件内部,this指向的是当前选择器取得的JQuery对象,不是内部对象, 例如click(), 内部的this指向的是DOM元素 3.this.each可以遍历所有元素...

chengfei_liu
2018/05/25
0
0
用 Json 来实现 PHP 与 JavaScript 间数据交换

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 简而论之,不管是xml还是json都是为了方便在客户端与服务器端交互数据的中转站,特别是用于对象型数据,比如最常见的数组。...

BENNEE
2011/03/22
0
0
构建 Ext JS 扩展和插件

Ext JS 框架是以一种使它易于扩展的方式构建的。Ext JS 扩展允许开发人员创建衍生自现有 Ext JS 的新类,允许新类同时使用它拥有的新方法和它所扩展的类的方法。Ext JS 插件架构支持开发人员...

IBMdW
2011/11/10
743
1
通过写Babel插件理解抽象语法树(翻译)

原文:https://www.sitepoint.com/understanding-asts-building-babel-plugin/ 每天很多JavaScript开发者使用了浏览器提供商还没有实现的语言版本。很多语言特性都只是草案,将来并不能保证会...

com360
02/27
0
0
GrailsUI的网友评论

GrailsUI 是一个基于 Grails 框架的用于收集有用的内置JavaScript工具,使用Yahoo! UI库(2.6.0版本),使之更方便的进行Web页面UI的开发。 GrailsUI 建立在三个主要的概念上,GrailsUI的主要...

红薯
2009/12/11
226
2

没有更多内容

加载失败,请刷新页面

加载更多

使用Maven打包Docker镜像-Jenkins版

前提:Jenkins服务器上安装好Docker,创建Jenkins任务,配置好代码来源,和Build配置: pom.xml中添加docker-maven-plugin: <plugin> <groupId>com.spotify</groupId> <artifactI......

莫在全
30分钟前
4
0
rabbitmq

灰暗
今天
1
0
Flink

flink HA部署 flink搭建,采用分布式部署方式,分别为A,B,C三个节点。其中A为master;A,B,C为worker。 本文使用的用户是hadoop用户(自己新建) 先决条件 Java 1.8.x or higher scala 自己使用...

-九天-
今天
2
0
数据中台和传统数仓的区别

中台系统把业务层同性的算法能力,服务能力,业务能力高度集成,有效组织 ,动态规划。更好的帮助上层业务。 今天就让我们看看关于数据中台的问答吧。 1 Q : 什么是数据中台? A : 数据中台是...

hblt-j
今天
6
0
Java在什么时候会出现内存泄漏

在Java中,内存泄漏就是存在一些被分配的对象,这些对象有下面两个特点,首先,这些对象是可达的,即在有向图中,存在通路可以与其相连;其次,这些对象是无用的,即程序以后不会再使用这些对...

群星纪元
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部