multiselect.htc

HTC,demo WEB用于。 超大型

	strSelect += "</select>";

	objSelect = objDIVSelect.insertAdjacentHTML("afterBegin",strSelect);//生成select元素
	objSelect = objDIVSelect.children(0);
	objSelect = objDIVSelect.appendChild(objSelect);//邦定到objDIVSelect

  //设置select的显示的条目数

	collNodes = objXMLDoc.selectNodes("/*/*");
	size = selectsize ;//select的条目数
	if(selectsize > collNodes.length){//如果设置值大于数据长度
		size = collNodes.length;  //设置与可选数量相当
	}
	objSelect.size = size;
  
	//设置select的宽度(width)及位置
	objSelect.style.width = parseInt(width) + 1;
	objSelect.style.top = 0;
	objSelect.style.right= 1;
	objSelect.style.border="1px solid #FF0000";

	//重新设置objDIVSelect的形状位置
	objDIVSelect.style.height = objSelect.offsetHeight + 24  ;
  topofDIV = -1*parseInt(objSelect.offsetHeight)/2;//计算DIV的上边距
	if (parseInt(topofDIV) + parseInt( comtop)  < 4){//是顶部超过了客户区(即组件的顶太低)
	  topofDIV = 0 ;  //顶部对齐
	}
	objDIVSelect.style.top = topofDIV;

  with(objSelect){
    ondblclick = dbClickSelect;
    onkeypress = keyPress;
  }
  
}//end function createobjSelect()


function dbClickSelect(){//双击时确定
  onClickOK();
}
function keyPress(){//处理回车与ESC键
 switch(window.event.keyCode){
  case 27:
    onClickCancel();
    break;
  case 13:
    onClickOK();
    break;
  default:
    break;
 
 }
}

function putXMLSource(argSource){ //设置XML文档的来源
  objXMLDoc = inputXML(argSource);
  if(objDIVSelect){
    refresh();
	  if(objSelect)
    if(objSelect.tagName.toUpper() = 'SELECT'){
      objDIVSelect.removeChild(objSelect);
    }
  }
}

function inputXML(argSource){//返回xmlDOMFragement对象
 	  return window.parent.__objGlobalCommonInst.inputXML(argSource);
}


function createCaption(inCaption){//创建Caption
  if(objCaption == null){
    objCaption = element.insertAdjacentHTML("afterBegin","<span id=\"theCaptionObj\" style='top:4px'></span>");
    objCaption = element.children(0);
    objCaption = element.appendChild(objCaption);
  }
  objCaption.innerText = inCaption;
  
  objDIVInput.style.left = objCaption.offsetWidth;
  objDIVSelect.style.left = objCaption.offsetWidth;
  objCaption.style.width = objCaption.offsetWidth ;
  objCaption.style.position = "absolute";
}

function createInputDIV(){//创建可容纳输入框与选择按钮的容器
  
  var objInput; //文本框Input
  var btnChose; //选择按钮
  
	//创建容纳objInput 和btnChose 的父元素
	objDIVInput = element.document.createElement("<DIV style=\"position:absolute;display:block;border:1px solid #7B9EBD;\">");//创建此父元素
	objDIVInput = element.appendChild(objDIVInput) ;//与组件邦定
	objDIVInput.style.top = 0;  //指定父元素的上边距
	
	objDIVInput.style.width = width;  //指定父元素objDIVInput的宽
	objDIVInput.style.height = 20;//指定父元素objDIVInput的高
	//创建输入框
	objInput = element.document.createElement ("<input type='text' style=\"position:absolute;border:0px solid red;/>");
	objInput = objDIVInput.appendChild(objInput) ;
	objInput.style.width = width - 20 ;
	with(objInput) {
		onfocus = blurInput;    //文本框得到焦点
		onmouseover =onOverInput;//鼠标经过文本框
		ondblclick = onClickChose;  //鼠标双击文本框
	}
	
	//创建选择按钮
	//btnChose = objDIVInput.insertAdjacentHTML("afterBegin","<v:group style='top:1px;right:1px;position:absolute;width:16px; height:20px;z-index:3;' coordsize='14,16'><v:roundrect arcsize='0.1' style='width:14;height:12;' fillcolor='#B5CFFF' strokecolor='#ADC3F7'><v:fill type='gradientradial' color2='#DEE3FF' angle='75'/></v:roundrect><v:polyline style='position:absolute;top:4; left:3' points='0,0 4,4 8,0' strokecolor='#4A6184' strokeweight='2px' filled='false'/></v:group><xml:namespace ns='schemas-microsoft-com:VML' prefix='v'/>");
	btnChose = objDIVInput.insertAdjacentHTML("afterBegin","<v:group style='top:1px;right:2px;position:absolute;width:17px; height:20px;z-index:3;' coordsize='14,16'><v:roundrect arcsize='0.1' style='width:14;height:12;padding-left:2' fillcolor='#B5CFFF' strokecolor='#ADC3F7'>...<v:fill type='gradientradial' color2='#DEE3FF' angle='75'/></v:roundrect></v:group><xml:namespace ns='schemas-microsoft-com:VML' prefix='v'/>");
	btnChose = objDIVInput.children(0); //邦定按钮到objDIVInput
	btnChose = objDIVInput.appendChild(btnChose);//设置文本按钮库objDIVInput的子元素
	
	with(btnChose){
		onmousedown = onClickChose;//点击时弹出列表框
		onmouseover = onOverInput;  
	}
}//end function createSelectDIV

function blurInput(){ //文本框失去焦点
	window.event.srcElement.blur();
}//end function blurInput

function onOverInput(){ //设置鼠标过文本框时的形状
	window.event.srcElement.style.cursor = "default";
}//end function onOverInput

function onClickChose(){  //当点击选择按钮时。
  window.clearTimeout(textTimeer);
  if(IsReadOnly){//如果是只读
    return ;
  }
  CanCreateSec = true;
  createObjSelect();

  textTimeer = window.setTimeout(firsttime,1);
}//end function okClickChose

function firsttime(){ //第一次赋值时,利用定时.这样可以自动定位到已经选中项目

	TextToList(); //从数组变量arrValue到列表框已经选中项目的转化
	objDIVInput.style.visibility = "hidden";//隐藏文本框

	objDIVSelect.style.visibility = "visible"; //显示列表框
  element.style.zIndex = 100000;
	lostFocus();//设定焦点失去时的邦定动作
}


function onClickOK(){//当鼠标点击确定按钮时

	var text = ListToText();  //获得将要放进input内的文本
	
	objDIVInput.style.visibility = "visible";//显示文本框
	objDIVSelect.style.visibility = "hidden"; //隐藏列表框
  element.style.zIndex = 0;
	objDIVInput.children(0).value = text; //设置Input里面的文本
}//end function onClickOK

function onClickCancel(){ //不显示列表框
  
	objDIVInput.style.visibility = "visible";//显示文本框
	objDIVSelect.style.visibility = "hidden"; //隐藏列表框
  element.style.zIndex = 0;

	while(objSelect.selectedIndex != -1){
    nindex = objSelect.selectedIndex;
    objSelect.options[nindex].selected = false;			
	} //end for

}

function ListToText(){//将Select 里面的项目转换成文本和数组并放进arrValue,arrText里,返回一个字符串

  var text = "";//以分隔符分开的选项的字符串
	var isfirst = false;  //循环时是否库第一个被选中项目的标志位
	var arrValueindex = 0;//arrValue数组的下标
  var nindex = -1;
	
//	var objSelect = objDIVSelect.children(2); //列表框的临时变量
	var numselect = objSelect.length; //列表框的条目数
	
	//先清空输入的框的内容
	arrValue = new Array();
	arrText = new Array();
	
//	for(var nindex = 0; nindex < numselect; nindex ++)	{//循环已经选中的项目
	while(objSelect.selectedIndex != -1){
    nindex = objSelect.selectedIndex;
    objSelect.options[nindex].selected = false;			
    //用分隔符格式化所选的条目到文本框的显示样式
			if(isfirst){//如果不是第一个元素
				text += departsymbol;
			} //end if 
			isfirst = true;
			
			arrValue[arrValueindex] = objSelect.options[ nindex ].value;	//将值放进arrValue
			arrText[arrValueindex] = objSelect.options[ nindex ].text;   //将text放进arrText
			
			text += objSelect.options [ nindex ].text;
			arrValueindex ++;
	} //end for
	return text; //返回一个用,做分隔的的字字符串
}

function TextToList(){//将已经选中的数组再转成列表项
//	var objSelect = objDIVSelect.children(2);//SELECT的元素变量
	
	var times = arrValue.length;  //arrValue的长度(已选中的项目的数量)
	var numselect = objSelect.length; //Select中已经有的可选数

	for(var i = 0; i < times; i++)	{//遍历已经选的值
    if(objSelect.all(arrValue[i]))
      objSelect.all(arrValue[i]).selected = true;
  }

}// end functionTextToList

function refresh(){//初始化组件的形状大小位置
  createCaption(textCaption);
  element.style.top = comtop;//组件的位置（上边距）
  element.style.left =  comleft;//组件的位置（左边距）
  arrValue = new Array();//清空已经选的项目
  arrText = new Array();//清空已经选的项目的文本
  objDIVInput.children(0).value = "";//清空显示在input里面的文本

}

function initialize(){//初始化
  element.style.top = comtop;//组件的位置（上边距）
  element.style.left =  comleft;//组件的位置（左边距）
  element.style.width = "";
  element.style.border = "none";//设置元素外边框库不可见
	element.runtimeStyle.visibility = "hidden";
  createInputDIV(); //创建InputDIV（即文本框及其按钮）
  createSelectDIV();//创建SelectDIV（即列表框及其按钮）
//  createCaption(textCaption);//创建Caption
	element.runtimeStyle.visibility = "visible";
}

//-->
</script>
</public:component>