combox.js

OA.....其他人不需帐号就可自由下载此源码其他人不需帐号就可自由下载此源码

// JavaScript Document
//version:1.0
//create at 2007-6-26
//author: roly 
//mail: [e-mail]
function getAbsolutePos(el) {
	var SL = 0, ST = 0;
	var is_div = /^div$/i.test(el.tagName);
	if (is_div && el.scrollLeft)
		SL = el.scrollLeft;
	if (is_div && el.scrollTop)
		ST = el.scrollTop;
	var r = { x: el.offsetLeft - SL, y: el.offsetTop - ST };
	if (el.offsetParent) {
		var tmp = this.getAbsolutePos(el.offsetParent);
		r.x += tmp.x;
		r.y += tmp.y;
	}
	return r;
}
//修改了=========================
function Roly_Combox(input,button) {
	this._input = $(input);
	this._button = $(button);
	this._items = new Array();
	this._layer = null;
	this._debug = false;
	this._focus = false;	
}

Roly.Combox.prototype.addItem = function( value ) {
	this._items[this._items.length] = value;
	this.refreshLayer();
}

Roly.Combox.prototype.removeAllItem = function() {
	this._items = new Array();
	this._input.value = "";
	this.refreshLayer();
}

Roly.Combox.prototype.init = function() {
	//add event handler
	this._button.style.cursor = "pointer";
	this._button.obj = this;
	this._button.onclick = this.onClickProxy;
	this._button.onmouseover = this.bind(this.onmouseover,this);
	this._button.onmouseout = this.bind(this.onmouseout,this);
	this._input.obj = this;
	this._input.onclick = this.showLayer;
	this._input.onblur = this.hideLayer;
}

Roly.Combox.prototype.onClickProxy = function() {
	var S = event.srcElement;
	var obj = S.obj;
	obj.onClick();
}

Roly.Combox.prototype.onClick = function() {
	var layer = this._layer;
	if(layer == null) {
		layer = this.createLayer();
		layer.style.display = "";
		this.autoFrameHeight();
	}else{
		//change position
		var width = this._input.offsetWidth + 19;
		var p = this.getAbsolutePos(this._input);
		var left = p.x;
		var top = p.y+20;
		layer.style.width = width;
		layer.style.top = top;
		layer.style.left = left;
		//show layer
		if(layer.style.display == "none")
			layer.style.display = "";
		else
			layer.style.display = "none";
	}
}

Roly.Combox.prototype.showLayer = function() {
	var S = event.srcElement;
	var obj = S.obj;
	var layer = obj._layer;
	if(layer == null) {
		layer = obj.createLayer();
		layer.style.display = "";
		obj.autoFrameHeight();
	}else{
		//change position
		var width = obj._input.offsetWidth + 19;
		var p = obj.getAbsolutePos(obj._input);
		var left = p.x;
		var top = p.y+20;
		layer.style.width = width;
		layer.style.top = top;
		layer.style.left = left;
		//show layer
		layer.style.display = "";
	}
}

Roly.Combox.prototype.hideLayer = function() {
	var S = event.srcElement;
	var obj = S.obj;
	var layer = obj._layer;
	if(layer != null && !obj._focus)
		layer.style.display = "none";
}

Roly.Combox.prototype.createLayer = function() {
	var div = document.createElement("div");
	div.className = "combox-layer";
	div.id = "combox"+Math.floor(Math.random()*100+1);
	div.onmouseover = this.bind(this.onmouseover,this);
	div.onmouseout = this.bind(this.onmouseout,this);
	var h = 0;

	var ul = document.createElement("ul");
	for(var i=0;i<this._items.length;i++) {
		var li = document.createElement("li");
		li.appendChild(document.createTextNode(this._items[i]));
		li.obj = this;
		li.onclick = this.chooseItem;
		li.onmouseover = this.alterBgColor;
		li.onmouseout = this.alterBgColor;
		ul.appendChild(li);
		h += 19;
	}
	div.appendChild(ul);
	
	//change position 
	if(this._debug)
		alert("width^top^left:"+this._input.offsetWidth+"^"+this._input.offsetTop+"^"+this._input.offsetLeft);
	var width = this._input.offsetWidth + 19;
	var p = this.getAbsolutePos(this._input);
	var left = p.x;
	var top = p.y+20;
	//var top = this._input.offsetTop + 20;
	//var left = this._input.offsetLeft;
	div.style.width = width;
	div.style.top = top;
	div.style.left = left;
	if(this._debug)
		alert("width^top^left:"+div.style.width+"^"+div.style.top+"^"+div.style.left);
	
	//create filter
	var filter = this.createFilter(width,h);
	div.appendChild(filter);

	this._layer = div;
	document.body.appendChild(div);
	return div;
}

Roly.Combox.prototype.refreshLayer = function() {
	var layer = this._layer;
	if(layer != null) {
		document.body.removeChild(layer);
		this._layer = null;
	}
}

Roly.Combox.prototype.chooseItem = function() {
	var S = event.srcElement;
	var value = S.innerText;
	var obj = S.obj;
	obj._input.value = value;
	obj._layer.style.display = "none";
}

Roly.Combox.prototype.alterBgColor = function () {
	var S = event.srcElement;
	var color = S.currentStyle.backgroundColor;
	var overColor = "#f0f8ff";
	var outColor = "transparent";
	if(color != overColor) {
		S.style.backgroundColor = overColor;
		//S.style.color = "#fff";
	} else {
		S.style.backgroundColor = outColor;
		//S.style.color = "#000";
	}
}

Roly.Combox.prototype.createFilter = function(w,h) {
	var filter = document.createElement("iframe");
	filter.style.width = w-2;
	filter.style.height = h+1;
	filter.style.top = 0;
	filter.style.left = 0;
	filter.style.zIndex = -1;
	filter.style.position = "absolute";
	filter.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";
	filter.frameBorder = 0;
	return filter;
}

Roly.Combox.prototype.getAbsolutePos = function (el) {
	var SL = 0, ST = 0;
	var is_div = /^div$/i.test(el.tagName);
	if (is_div && el.scrollLeft)
		SL = el.scrollLeft;
	if (is_div && el.scrollTop)
		ST = el.scrollTop;
	var r = { x: el.offsetLeft - SL, y: el.offsetTop - ST };
	if (el.offsetParent) {
		var tmp = this.getAbsolutePos(el.offsetParent);
		r.x += tmp.x;
		r.y += tmp.y;
	}
	return r;
}

Roly.Combox.prototype.onmouseover = function() {
	this._focus = true;
}

Roly.Combox.prototype.onmouseout = function() {
	this._focus = false;
}

Roly.Combox.prototype.bind = function(fuc,obj) {
  var args = [];
  if(arguments) {
  	for (var i = 0, length = arguments.length; i < length; i++)
      args.push(arguments[i]);
  }
  var method = args.shift();
  var object = args.shift();
  return function() {
    return method.apply(object, args);
  }
}

Roly.Combox.prototype.autoFrameHeight = function() {
	var height = document.body.scrollHeight+20;
	if(window.parent!=undefined) {
		var iframe = window.parent.document.getElementById(window.name);
		if(iframe!=undefined && parseInt(iframe.style.height) < height)
			iframe.style.height = height;
	}
}
/*
usage:
<style type="text/css">
<!--
.combox-layer {
	position:absolute;
	z-index:1;
	border: 1px solid #CCCCCC;
	border-top:none;
	background-color:#FFFFFF;
}
.combox-layer ul {
	margin:		0;
	padding:	0;
}
.combox-layer ul li {
	list-style-type:none;
	line-height:19px;
	width:100%;
	cursor:hand;
}
.combox-input
{
	font-family:		Arial, Verdana, Helvetica, sans-serif;
	font-size:			12px;
	width:				100%;
	height:				19px;
	border:				1px solid #CCCCCC;
	border-right:none;
}
-->
</style>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td><input type="text" name="depart" id="depart" value="" class="combox-input"></td>
		<td width="19" height="20"><img src="combox_b.jpg" id="departButton" width="19" height="20" border="0"/></td>
	</tr>
</table>
<script>
var combox = new Roly.Combox("depart","departButton");
combox.addItem("鑻规灉");
combox.addItem("姊ㄥ瓙");
combox.addItem("棣欒晧");
combox.addItem("钁¤悇");
combox.init();
</script>

*/