html dropdownlist 一个完整的javascript类实现
2006-07-12 20:03
405 查看
<html>
<head>
<SCRIPT TYPE="text/javascript">
function getLeftPostion( theObj )
{
var pos = 0;
while ( theObj != null )
{
pos += theObj.offsetLeft;
//get the Object which contain theObj.
theObj = theObj.offsetParent;
}
return pos;
}
function getTopPostion( theObj )
{
var pos = 0;
while ( theObj != null )
{
pos += theObj.offsetTop;
//get the Object which contain theObj.
theObj = theObj.offsetParent;
}
return pos;
}
function checkVersion()
{
var isBadVersion=true;
var curVer=navigator.appVersion;
var pos=parseInt(curVer.indexOf("MSIE"));
if (pos>=1)
{
var intVer=parseInt(curVer.charAt(pos+5));
if (intVer>=5)
{ isBadVersion=false;}
}
if (isBadVersion)
{
var msg="This page may not be displayed properly:"+
" This product requires Microsoft Internet Explorer 5 or later browser only.";
alert(msg);
}
}
//check the browser version
checkVersion();
// the array of comboBoies
theArray = new Array();
function combobox(objId, objHandler)
{
this.comObj = document.all[objId];
this.comObj.selectedIndex = -1;
this.getValue = getValue;
this.doResize = doResize;
this.doChange = doChange;
this.loseFocus = loseFocus;
this.doSelectIdx = doSelectIdx;
this.focus = focus;
var strMsg="";
//------------------------------------------------------------------------------------------------------
// create the text object
//------------------------------------------------------------------------------------------------------
var txtObjIdName = objId + "_text";
if (document.all[txtObjIdName] != null)
{
strMsg="The following id: '" + txtObjIdName +"' is used internally by the Combo Box!\r"+
"Use of this id in your page may cause malfunction. Please use another id for your controls.";
alert(strMsg);
}
var txtInner = "<INPUT type='text' id=" + txtObjIdName + " name=" + txtObjIdName +
" onblur='" + objHandler + ".loseFocus()' " +
" style='display: none; position: absolute' value='' >";
this.comObj.insertAdjacentHTML("afterEnd", txtInner);
this.txtObj = document.all[txtObjIdName];
//------------------------------------------------------------------------------------------------------
// end
//------------------------------------------------------------------------------------------------------
this.beResizing = false;
this.doResize();
theArray[theArray.length] = this;
}
function loseFocus()
{
var theComObj = this.comObj;
var theTxtObj = this.txtObj;
var i;
theComObj.selectedIndex = -1;
if (theTxtObj.value == "")
{
return;
}
var optLen = theComObj.options.length;
for (i=0; i<optLen; i++)
{
var comVal = theComObj.options[i].text;
var txtVal = theTxtObj.value;
if (comVal == txtVal)
{
theComObj.selectedIndex = i;
return;
}
}
}
function doResize()
{
if (!this.beResizing)
{
this.beResizing = true;
this.txtObj.style.display="none";
this.comObj.style.position="static";
this.txtObj.style.posLeft = getLeftPostion(this.comObj);
this.txtObj.style.posTop = getTopPostion(this.comObj) + 1;
this.txtObj.style.posWidth = this.comObj.offsetWidth - 16;
this.txtObj.style.posHeight = this.comObj.offsetHeight;
this.comObj.style.position ="absolute";
this.comObj.style.posLeft = this.txtObj.style.posLeft;
this.comObj.style.posTop = this.txtObj.style.posTop;
this.offWidth = this.comObj.offsetWidth;
var strRect = "rect(0 "+(this.comObj.offsetWidth)+" "+ this.comObj.offsetHeight +
" "+(this.txtObj.style.posWidth - 2 )+")";
this.comObj.style.clip = strRect;
this.txtObj.style.display="";
this.beResizing = false;
}
}
function doChange()
{
var idx = this.comObj.selectedIndex;
var opt = this.comObj.options[idx];
this.txtObj.value = opt.text;
this.txtObj.focus();
//this.txtObj.select();
this.comObj.selectedIndex=-1;
}
function getValue()
{
return this.txtObj.value;
}
function doSelectIdx(i)
{
var optLen = this.comObj.options.length;
if ((i >=0) && (i < optLen))
{
this.comObj.selectedIndex = i;
this.txtObj.value = this.comObj.options[i].text;
return;
}
this.txtObj.value = "";
}
function focus()
{
this.txtObj.focus();
}
/* resize all combobox when window be resized */
function resetAllSize()
{
var i;
for (i=0; i < theArray.length; i++)
{
theArray[i].doResize();
}
}
</SCRIPT>
</head>
<body>
<BODY onload="init();">
<form name="form1">
<select id="comboBox1" style="POSITION: absolute;
onResize="if (combox1!=null) {combox1.doResize();}"
onChange="if (combox1!=null) {combox1.doChange();}" name="select2">
<option value=www.5DeDesign.com selected>www.5DeDesign.com</option>
<option value=www.baojidesign.com>www.baojidesign.com</option>
<option value=www.sina.com.cn>www.sina.com.cn</option>
</select>
<br><br>
<input type="submit" value="submit" onclick="getselectedvalue()">
<SCRIPT>
var combox1,combox2;
function init()
{
combox1 = new combobox("comboBox1", "combox1");
combox1.doSelectIdx(-1);
}
function getselectedvalue()
{
alert(document.all.comboBox1_text.value);
}
</SCRIPT>
</form>
</body>
</body>
<head>
<SCRIPT TYPE="text/javascript">
function getLeftPostion( theObj )
{
var pos = 0;
while ( theObj != null )
{
pos += theObj.offsetLeft;
//get the Object which contain theObj.
theObj = theObj.offsetParent;
}
return pos;
}
function getTopPostion( theObj )
{
var pos = 0;
while ( theObj != null )
{
pos += theObj.offsetTop;
//get the Object which contain theObj.
theObj = theObj.offsetParent;
}
return pos;
}
function checkVersion()
{
var isBadVersion=true;
var curVer=navigator.appVersion;
var pos=parseInt(curVer.indexOf("MSIE"));
if (pos>=1)
{
var intVer=parseInt(curVer.charAt(pos+5));
if (intVer>=5)
{ isBadVersion=false;}
}
if (isBadVersion)
{
var msg="This page may not be displayed properly:"+
" This product requires Microsoft Internet Explorer 5 or later browser only.";
alert(msg);
}
}
//check the browser version
checkVersion();
// the array of comboBoies
theArray = new Array();
function combobox(objId, objHandler)
{
this.comObj = document.all[objId];
this.comObj.selectedIndex = -1;
this.getValue = getValue;
this.doResize = doResize;
this.doChange = doChange;
this.loseFocus = loseFocus;
this.doSelectIdx = doSelectIdx;
this.focus = focus;
var strMsg="";
//------------------------------------------------------------------------------------------------------
// create the text object
//------------------------------------------------------------------------------------------------------
var txtObjIdName = objId + "_text";
if (document.all[txtObjIdName] != null)
{
strMsg="The following id: '" + txtObjIdName +"' is used internally by the Combo Box!\r"+
"Use of this id in your page may cause malfunction. Please use another id for your controls.";
alert(strMsg);
}
var txtInner = "<INPUT type='text' id=" + txtObjIdName + " name=" + txtObjIdName +
" onblur='" + objHandler + ".loseFocus()' " +
" style='display: none; position: absolute' value='' >";
this.comObj.insertAdjacentHTML("afterEnd", txtInner);
this.txtObj = document.all[txtObjIdName];
//------------------------------------------------------------------------------------------------------
// end
//------------------------------------------------------------------------------------------------------
this.beResizing = false;
this.doResize();
theArray[theArray.length] = this;
}
function loseFocus()
{
var theComObj = this.comObj;
var theTxtObj = this.txtObj;
var i;
theComObj.selectedIndex = -1;
if (theTxtObj.value == "")
{
return;
}
var optLen = theComObj.options.length;
for (i=0; i<optLen; i++)
{
var comVal = theComObj.options[i].text;
var txtVal = theTxtObj.value;
if (comVal == txtVal)
{
theComObj.selectedIndex = i;
return;
}
}
}
function doResize()
{
if (!this.beResizing)
{
this.beResizing = true;
this.txtObj.style.display="none";
this.comObj.style.position="static";
this.txtObj.style.posLeft = getLeftPostion(this.comObj);
this.txtObj.style.posTop = getTopPostion(this.comObj) + 1;
this.txtObj.style.posWidth = this.comObj.offsetWidth - 16;
this.txtObj.style.posHeight = this.comObj.offsetHeight;
this.comObj.style.position ="absolute";
this.comObj.style.posLeft = this.txtObj.style.posLeft;
this.comObj.style.posTop = this.txtObj.style.posTop;
this.offWidth = this.comObj.offsetWidth;
var strRect = "rect(0 "+(this.comObj.offsetWidth)+" "+ this.comObj.offsetHeight +
" "+(this.txtObj.style.posWidth - 2 )+")";
this.comObj.style.clip = strRect;
this.txtObj.style.display="";
this.beResizing = false;
}
}
function doChange()
{
var idx = this.comObj.selectedIndex;
var opt = this.comObj.options[idx];
this.txtObj.value = opt.text;
this.txtObj.focus();
//this.txtObj.select();
this.comObj.selectedIndex=-1;
}
function getValue()
{
return this.txtObj.value;
}
function doSelectIdx(i)
{
var optLen = this.comObj.options.length;
if ((i >=0) && (i < optLen))
{
this.comObj.selectedIndex = i;
this.txtObj.value = this.comObj.options[i].text;
return;
}
this.txtObj.value = "";
}
function focus()
{
this.txtObj.focus();
}
/* resize all combobox when window be resized */
function resetAllSize()
{
var i;
for (i=0; i < theArray.length; i++)
{
theArray[i].doResize();
}
}
</SCRIPT>
</head>
<body>
<BODY onload="init();">
<form name="form1">
<select id="comboBox1" style="POSITION: absolute;
onResize="if (combox1!=null) {combox1.doResize();}"
onChange="if (combox1!=null) {combox1.doChange();}" name="select2">
<option value=www.5DeDesign.com selected>www.5DeDesign.com</option>
<option value=www.baojidesign.com>www.baojidesign.com</option>
<option value=www.sina.com.cn>www.sina.com.cn</option>
</select>
<br><br>
<input type="submit" value="submit" onclick="getselectedvalue()">
<SCRIPT>
var combox1,combox2;
function init()
{
combox1 = new combobox("comboBox1", "combox1");
combox1.doSelectIdx(-1);
}
function getselectedvalue()
{
alert(document.all.comboBox1_text.value);
}
</SCRIPT>
</form>
</body>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html实现一个完整的注册页面
- .使用 HTML+CSS 实现如图布局，border-widht 5px，一个格子大小是 50*50，hover时候边框变为红色（兼容IE6+，考虑语义化的结构）
- 用char*实现的一个完整的类，包含类的基本操作：一般构造、拷贝构造、赋值转换、重载 > >，< <
- 一个简单的 iBatis 实现——完整示例
- 利用全注解实现ssh的一个完整例子
- 【原】HTML + XML + JAVASCIPT 实现翻页，跳页功能 ——一个小小英语学习小手册【有注释，有源码】
- Android UI开发: 横向ListView(HorizontalListView)及一个简单相册的完整实现 (附源码下载)
- ABAP--一个实现Search Help Exits的完整样例
- 一个完整托盘程序的实现
- 一个实现图片上传/产生缩略图/在上传图片上写字功能的完整页面代码
- 应面试公司要求写的一个邮箱中实现邮件为html方式的代码
- 一个封装比较完整的FTP类——clsFTP （转：http://www.cnblogs.com/name-lh/archive/2007/04/28/731528.html）
- Struts2+Ibatis+Spring.30(完整例子，含3.0事务配置，OSCache缓存配置，JreeChart配置,log4j日志输出Sql,对一个表实现完整的查询，批量删除，添加，更新)
- ASP.NET MVC DropDownList扩展,实现foreach@Html.DropDownListFor(p=>p.Type,p.Type,TypeItem)
- 【ife】任务九：使用HTML/CSS实现一个复杂页面
- Android UI开发: 横向ListView(HorizontalListView)及一个简单相册的完整实现 (附源码下载)
- 实现一个《 从下位机到蓝牙模块通讯到Android客户端 》的完整物联网项目。
- 完整的html+css+javascript实现跟随鼠标移动显示选中效果
- html小知识，怎么实现一个td占据2行
- Ajax技术之与服务器通信-一个完整的实例(实现检测用户名是否唯一功能)