//Ajax 下拉动态提示类
//使用示例:
//var newAjaxDropDown = new AjaxDropDown("WebFormTest.aspx?", ASPxTextBoxTest);
//newAjaxDropDown.Init(newAjaxDropDown);
function AjaxDropDown(Url, DevControl)
{
//-Private---AjaxDropDown类变量定义区
this.m_Div; //Div对象
this.m_TabBody; //TableBody对象
this.m_ItemHeight; //下拉部分条目高度
this.m_DivBackGroundColor = "#FFFFFF"; //框架Div的背景颜色
this.m_DivBorder = "1px solid #BDB68C"; //框架Div的边框设置
this.m_DivOverflowX = "auto"; //框架Div的横向滚动条设置
this.m_DivOverflowY = "auto"; //框架Div的纵向滚动条设置
this.m_MaxRow = 5; //最大行数
//-Private---AjaxDropDown类函数定义区
//创建DIV
this._CreateDiv = function(thisObj)
{
var divName;
divName = DevControl.name + "Div";
if (!document.getElementById(divName))
{
var newDiv = document.createElement("div");
newDiv.setAttribute("id",divName);
document.body.appendChild(newDiv);
}
//获取DIV对象的引用
this.m_Div = document.getElementById(divName);
//对div设置格式
this.m_Div.style.backgroundColor = this.m_DivBackGroundColor;
this.m_Div.style.border = this.m_DivBorder;
this.m_Div.style.position = "absolute";
this.m_Div.style.overflowX = this.m_DivOverflowX;
this.m_Div.style.overflowY = this.m_DivOverflowY;
this.m_Div.style.zIndex = 10000;
this.HiddenDropDown();
//对div附加事件
this.m_Div.onmouseover = function(){_Divonmouseover();};
this.m_Div.onmouseout = function(){_Divonmouseout();};
this.m_Div.onblur = function(){_DivBlur(thisObj);};
}
// 计算Div左上角的位置以及宽度
this._SetDivPoint = function()
{
var DevControlTable = document.getElementById(DevControl.name);
var x = DevControlTable.offsetLeft;
var y = DevControlTable.offsetTop + DevControlTable.offsetHeight;
var parent = DevControlTable;
while (parent.offsetParent)
{
parent = parent.offsetParent;
x += parent.offsetLeft;
y += parent.offsetTop;
}
//由于Dev控件问题,所以x,y需要加1的偏移
x = x + 2;
y = y + 1;
this.m_Div.style.width = DevControlTable.offsetWidth + "px";
this.m_Div.style.left = x + "px";
this.m_Div.style.top = y + "px";
}
//创建Table
this._CreateTable = function()
{
var DropTable = document.createElement("table");
DropTable.id = DevControl.name + "Table";
DropTable.border = "0";
DropTable.width = "100%";
DropTable.cellSpacing = "0";
DropTable.style.tableLayout= "fixed";
this.m_TabBody = document.createElement("tbody");
DropTable.appendChild(this.m_TabBody);
this.m_Div.appendChild(DropTable);
}
//创建条目
this._GreateTableItem = function(ItemText, Num, thisObj)
{
var DropRow = document.createElement("tr");
var DropCell = document.createElement("td");
DropRow.appendChild(DropCell);
//条目id
DropCell.id = DevControl.name + Num;
//记载当前行数,方便上下移动选择行
DropCell.Num = Num;
DropCell.innerHTML = "<nobr>" + ItemText + "</nobr>";
//为Item附加事件
DropCell.onmouseover = function(){_onmouseover();};
DropCell.onmouseout = function(){_onmouseout();};
DropCell.onclick = function(){_onclick(thisObj);};
//设置Item样式
DropCell.style.cursor = "hand";
this.m_TabBody.appendChild(DropRow);
if(this.m_ItemHeight == 1) this.m_ItemHeight = DropCell.offsetHeight;
}
//调用 Ajax
this._AjaxPage = function(SearchString)
{
var AjaxPage = new AjaxToPage(Url + SearchString);
AjaxPage.Send();
return AjaxPage.GetValue();
}
//DevControl事件(文本改变)
this._TextChanged = function(source,e, thisObj)
{
if(!m_ClickItem) thisObj.CreateDropDown(thisObj, "ItemSearch=" + source.GetText());
}
//DevControl事件(失去焦点)
this._LostFocus = function(source,e, thisObj)
{
if(!m_ClickItem) thisObj.HiddenDropDown();
}
//DevControl事件(按键抬起)
this._KeyUp = function(source,e, thisObj)
{
if (e.keyCode == HK_ENTER)
{
var temp = _GetText();
if(temp != "") source.SetText(temp);
thisObj.HiddenDropDown();
}
}
//DevControl事件(按键按下)
this._KeyDown = function(source,e, thisObj)
{
if (e.keyCode == HK_UP)
{
_MovePrevious(thisObj);
var temp = _GetText();
if(temp != "") source.SetText(temp);
}
if (e.keyCode == HK_DOWN)
{
_MoveNext(thisObj);
var temp = _GetText();
if(temp != "") source.SetText(temp);
}
}
//*********************************************************************************************
//-Public---AjaxDropDown类函数定义区
//初始化
//参数 thisObj:创建的自身对象
this.Init = function(thisObj)
{
//为DevControl附加事件
DevControl.LostFocus.AddHandler(function(source,e){thisObj._LostFocus(source, e, thisObj);});
DevControl.KeyUp.AddHandler(function(source,e){thisObj._KeyUp(source, e, thisObj);});
DevControl.KeyDown.AddHandler(function(source,e){thisObj._KeyDown(source, e, thisObj);});
DevControl.TextChanged.AddHandler(function(source,e){thisObj._TextChanged(source, e, thisObj);});
this.m_ItemHeight=1;
//创建DIV
this._CreateDiv(thisObj);
//创建表格
this._CreateTable();
}
//下拉部分内容
this.CreateDropDown = function(thisObj, SearchString)
{
// 计算div左上角的位置以及宽度
this._SetDivPoint();
//创建XMl对象
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
//装载信息
xmlDoc.loadXML(this._AjaxPage(SearchString));
//查找元素节点
nodeList = xmlDoc.selectNodes("//dataset//table");
//如果表格中有内容则清除
while (this.m_TabBody.childNodes.length > 0)
this.m_TabBody.removeChild(this.m_TabBody.childNodes[0]);
var num = 1;
for (var ii=0; ii<nodeList.length; ii++)
{
//创建条目
this._GreateTableItem(nodeList.item(ii).childNodes.item(1).text, num, thisObj);
num++;
}
//设置最大行数,如果超过此行数,则出现滚动条
if(num > this.m_MaxRow) this.m_Div.style.height = this.m_MaxRow * this.m_ItemHeight;
//默认选择第一行
_Select("1", thisObj);
//显示下拉列表
this.ShowDropDown();
}
//返回DevControl对象
this.GetDev = function()
{
return DevControl;
}
//返回Div边框对象
this.GetBorderDiv = function()
{
return this.m_Div;
}
//返回下拉条目高度
this.GetItemHeight = function()
{
return this.m_ItemHeight;
}
//显示下拉部分
this.ShowDropDown = function()
{
this.m_Div.style.visibility = "visible";
}
//隐藏下拉部分
this.HiddenDropDown = function()
{
this.m_Div.style.visibility = "hidden";
}
}
待续......
