📄 index.htm

📁 仿3721模块拖拽移动层移动的javascript
💻 HTM
📖 第 1 页 / 共 2 页
字号:
12 下一页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>呵，做了一些细致的处理</title>

<style type="text/css">
html, body {
	width:100%;
	height:100%;
	padding:0px;
	margin:0px;
}

body {
	text-align:center;
	font-size:14px;
}

.cell_left, .cell_right {
	width:202px;
}

.cell_center {
	width:404px;
}

.left {
	float:left;
}

.row {
	clear:both;
}

.r_nbsp {
	width:20px;
}

.root {
	width:876px;
	height:auto;
	margin:auto;
}

.root * {
/*此属性FF的说*/
	-moz-user-select:none;
}

.line {
	width:100%px;
	height:0px;
	overflow:hidden;
}

.move {
	border:#CCCCCC 1px solid;
	width:100%;
	height:aotu;
	margin-top:5px;
	margin-bottom:5px;
	display:none;
}

.title {
	height:24px;
	line-height:24px;
	background:#0080C0;
}

.title_a {
	width:auto;
	margin-right:80px;
	cursor:move;
	font-size:12px;
	font-weight:bold;
	color:#FFFFFF;
	text-align:left;
	padding-left:10px;
}

.title_reduce, .title_lock, .title_edit, .title_close {
	float:right;
	width:20px;
	font-size:9px;
	color:#CCCCCC;
}

.title_reduce, .title_lock, .title_edit {
	cursor:pointer;
}

.title_close {
	cursor:default;
}

.content {
	height:100px;
	border-top:#CCCCCC 1px solid;
	background-color:#F7F7F7;
	font-size:12px;
	line-height:130%;
}

.CDrag_temp_div {
	border:#CCCCCC 1px dashed;
	margin-top:5px;
	margin-bottom:5px;
}

a#DEL_CDrag, a#ADD_CDrag {
	color:#6699CC;
	text-decoration:none;
}

a#DEL_CDrag:hover, a#ADD_CDrag:hover {
	color:#FF0000;
}


.Dall_screen, .Iall_screen {
	position:absolute;
	left:0px;
	top:0px;
}

.Dall_screen {
	z-index:99;
	background-color:#000000;
	filter:alpha(opacity=30);
	opacity:0.3;
}

.Iall_screen {
	z-index:98;
	filter:alpha(opacity=0);
	opacity:0;
}

.Nall_screen {
	position:absolute;
	z-index:100;
	left:300px;
	top:100px;
	width:300px;
	height:auto;
	border:#6699CC 1px solid;
	background-color:#F0FAFF;
	padding:10px 0 10px 0;
}

.Call_screen {
	width:100%;
	height:auto;
	line-height:30px;
	font-size:12px;
	padding-bottom:10px;
}
</style>

<script type="text/javascript">
var Class = {
//创建类
	create : function () {
		return function () {
			this.initialize.apply(this, arguments);
		};
	}
};

var $A = function (a) {
//转换数组
	return a ? Array.apply(null, a) : new Array;
};

var $ = function (id) {
//获取对象
	return document.getElementById(id);
};

var Try = {
//检测异常
	these : function () {
		var returnValue, arg = arguments, lambda, i;
	
		for (i = 0 ; i < arg.length ; i ++) {
			lambda = arg[i];
			try {
				returnValue = lambda();
				break;
			} catch (exp) {}
		}
	
		return returnValue;
	}
	
};

Object.extend = function (a, b) {
//追加方法
	for (var i in b) a[i] = b[i];
	return a;
};

Object.extend(Object, {

	addEvent : function (a, b, c, d) {
	//添加函数
		if (a.attachEvent) a.attachEvent(b[0], c);
		else a.addEventListener(b[1] || b[0].replace(/^on/, ""), c, d || false);
		return c;
	},
	
	delEvent : function (a, b, c, d) {
		if (a.detachEvent) a.detachEvent(b[0], c);
		else a.removeEventListener(b[1] || b[0].replace(/^on/, ""), c, d || false);
		return c;
	},
	
	reEvent : function () {
	//获取Event
		return window.event ? window.event : (function (o) {
			do {
				o = o.caller;
			} while (o && !/^\[object[ A-Za-z]*Event\]$/.test(o.arguments[0]));
			return o.arguments[0];
		})(this.reEvent);
	}
	
});

Function.prototype.bind = function () {
//绑定事件
	var wc = this, a = $A(arguments), o = a.shift();
	return function () {
		wc.apply(o, a.concat($A(arguments)));
	};
};

var CDrag = Class.create();

CDrag.IE = /MSIE/.test(window.navigator.userAgent);

CDrag.load = function (obj_string, func, time) {
//加载对象
	var index = 0, timer = window.setInterval(function () {
		try {
			if (eval(obj_string + ".loaded")) {
				window.clearInterval(timer);
				func(eval("new " + obj_string));
			}
		} catch (exp) {}

		if (++ index == 20) window.clearInterval(timer);
	}, time + index * 3);
};

CDrag.database = {
//数据存储
	json : null,
	
	parse : function (id) {
	//查找资源
		var wc = this, json = wc.json, i;
		for (i in json) {
			if (json[i].id == id)
				return json[i];
		}
	}
};

CDrag.Ajax = Class.create();

Object.extend(CDrag.Ajax, {

	getTransport: function() {
		return Try.these(
			function () { return new ActiveXObject('Msxml2.XMLHTTP') },
			function () { return new ActiveXObject('Microsoft.XMLHTTP') },
			function () { return new XMLHttpRequest() }
		) || false;
	}
	
});

CDrag.Ajax.prototype = {

	initialize : function (url) {
	//初始化
		var wc = this;
		wc.ajax = CDrag.Ajax.getTransport();
	},
	
	load : function (func) {
		var wc = this, ajax = wc.ajax;
		if (ajax.readyState == 4 && ajax.status == 200)
			func(ajax.responseText);
	},
	
	send : function (url, func) {
		var wc = this, ajax = wc.ajax,
			querys = url + "&" + new Date().getTime() + (10000 + parseInt(Math.random() * 10000));
		ajax.open("get", querys, true);
		ajax.onreadystatechange = wc.load.bind(wc, func);
		ajax.send(null);
	}
	
};

CDrag.Table = Class.create();

CDrag.Table.prototype = {
//列的拖拽暂时不考虑

	initialize : function () {
	//初始化
		var wc = this;
		wc.items = []; //创建列组
	},
	
	add : function () {
	//添加列
		var wc = this, id = wc.items.length, arg = arguments;
		return wc.items[id] = new CDrag.Table.Cols(id, wc, arg[0]);
	}
};

CDrag.Table.Cols = Class.create();

CDrag.Table.Cols.prototype = {
	
	initialize : function (id, parent, element) {
	//初始化
		var wc = this;
		wc.items = []; //创建列组
		wc.id = id;
		wc.parent = parent;
		wc.element = element;
	},
	
	add : function () {
	//添加行
		var wc = this, id = wc.items.length, arg = arguments;
		return wc.items[id] = new CDrag.Table.Rows(id, wc, arg[0], arg[1], arg[2]);
	},
	
	ins : function (num, row) {
	//插入行
		var wc = this, items = wc.items, i;
		
		if (row.parent == wc && row.id < num) num --; //同列向下移动的时候
		for (i = num ; i < items.length ; i ++) items[i].id ++;
		
		items.splice(num, 0, row);
		row.id = num, row.parent = wc;
		
		return row;
	},
	
	del : function (num) {
	//删除行
		var wc = this, items = wc.items, i;
		
		if (num >= items.length) return;
		for (i = num + 1; i < items.length ; i ++) items[i].id = i - 1;
		return items.splice(num, 1)[0];
	}
	
};

CDrag.Table.Rows = Class.create();

CDrag.Table.Rows.prototype = {
	
	
	initialize : function (id, parent, element, window, locks) {
	//初始化
		var wc = this, temp;
		
		wc.id = id;
		wc.parent = parent;
		wc.root_id = element;
		wc.window = window;
		wc.element = wc.element_init();
		
		temp = wc.element.childNodes[0];
		wc.title = temp.childNodes[4];
		wc.reduce = temp.childNodes[3];
		wc.lock = temp.childNodes[2], wc.locks = locks;
		wc.edit = temp.childNodes[1];
		wc.close = temp.childNodes[0];
		wc.content = wc.element.childNodes[1];
		
		wc.Class = wc.mousedown = wc.reduceFunc = wc.lockFunc = wc.editFunc = wc.closeFunc = null;
		
		wc.init();
		wc.load();
	},
	
	element_init : function () {
	//初始化元素
		var wc = this, div = $("root_row").cloneNode(true);
		
		wc.parent.element.appendChild(div);
		div.style.display = "block";
		return div;
	},
	
	init : function () {
	//初始化信息
		var wc = this;
		if (wc.window == 0) {
			wc.content.style.display = "none";
			wc.reduce.innerHTML = "放大";
		} else {
			wc.content.style.display = "block";
			wc.reduce.innerHTML = "缩小";
		}
		
		wc.lock.innerHTML = !wc.locks ? "锁定" : "解除";
	},
	
	load : function () {
	//获取相关信息
		var wc = this, info = CDrag.database.parse(wc.root_id), script;
		
		wc.title.innerHTML = info.title;
		
		if (info.src) {
			wc.content.innerHTML = "loading";
			script = document.createElement("script");
			script.src = info.src + ".js"//, script.defer = true;
			document.getElementsByTagName("head")[0].appendChild(script);
			CDrag.load(info.className, wc.upload.bind(wc), 5);
		} else	wc.content.innerHTML = info.className;
	},
	
	upload : function (obj) {
	/*加载类信息
		注：这里给行加入了一个扩展类，这里行的内容可以通过扩展类来控制^o^
		不过扩展类的格式必须有open方法和edit方法，还有类名.静态成员loaded = true；为了检测是否加载完毕
		扩展类需放到单独的.js文件里，然后从database结构体内设定其参数即可
	*/
		var wc = this;
		wc.Class = obj;
		wc.Class.parent = wc;
		wc.editFunc = Object.addEvent(wc.edit, ["onclick"], wc.lockF(wc.Class, wc.Class.edit, wc));
		wc.Class.open();
	},
	
	lockF : function () {
	//检索锁定
		var wc = this, arg = $A(arguments), root = arg.shift(), func = arg.shift();
		return function () {
			if (!wc.locks) func.apply(root, arg.concat($A(arguments)));
		};
	}
	
};

CDrag.Add = Class.create();

CDrag.Add.prototype = {
	
	initialize : function (parent) {
	//初始化参数
		var wc = this;
		wc.div = document.createElement("div"); //最外层div
		wc.iframe = document.createElement("iframe"); //协助wc.div盖select的iframe
		wc.node = document.createElement("div"); //内容底层div
		wc.content = document.createElement("div"); //内容层div
		wc.button = document.createElement("button"); //内容处理按钮
		wc.parent = parent;
		wc.json = null;
		
		wc.button.onclick = wc.execute.bind(wc, wc.content); //向按钮指向方法
		wc.init_element();
	},
	
	init_element : function () {
	//初始化元素
		var wc = this;
		wc.div.setAttribute(CDrag.IE ? "className" : "class", "Dall_screen");
12 下一页
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -