随笔-16  评论-8  文章-30  trackbacks-0
  1<html>
  2<head>
  3<title>Untitled Document</title>
  4<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5<style>
  6.table1{background-color:white;FONT-FAMILY: Courier New, Courier;font-size:12px}
  7.td_out{FONT-FAMILY: Courier New, Courier;font-size:12px;color:#000000;height:15px;border:1
 solid #ffffff;}
  8.td_over{FONT-FAMILY: Courier New, Courier;font-size:12px;cursor:default;background-color:#3366cc;border:1 solid #000000
;color:#ffffff;height:15px}
  9.slv{vertical-align:bottom;FONT-FAMILY: Courier New, Courier;font-size:12px;border-left-width:0;border-top-width:0;border-bottom-width:0;border-right:0 solid #000000;vertical-align:middle;height:18px;color:#000000
;}
 10.down{position:relative;left:-2px;font-size:11px;vertical-align:middle;width:16;height:16;color:#2050b0;background-color:#D0DFF7;border:1 solid #9fA3Ce;writing-mode:tb-rl;font-
weight:bold;
 11
}
 12
.seldiv{
 13position:absolute;z-index:1000;overflow-x:hidden;border-left:1 solid #000000;border-bottom:1 solid #000000;border-right:1 solid #000000
;
 14SCROLLBAR-FACE-
COLOR: #d0dff7; 
 15SCROLLBAR-HIGHLIGHT-
COLOR: #d0dff7; 
 16SCROLLBAR-SHADOW-
COLOR: #FFFFFF; 
 17SCROLLBAR-3DLIGHT-
COLOR: #FFFFFF; 
 18SCROLLBAR-ARROW-
COLOR: #ffffff; 
 19SCROLLBAR-TRACK-
COLOR: #ffffff; 
 20SCROLLBAR-DARKSHADOW-
COLOR: #d0dff7;}
 21</style>

 22<script language="JavaScript">
 23document.onclick=hiddenDiv;
 24function
 getDivCount() {
 25 var arr=
document.all; 
 26 re=0
;
 27 for (i=0;i<arr.length;i++
) {
 28  str=
arr[i].id;  
 29  if (str.indexOf("ZfDiv_")==0
) {   
 30   re++
;  
 31
  }
 32
 } 
 33 return
 re;
 34
}
 35

 36function getI(ObjId) {//取得objId的最后一位数字

 37 for (i=0;i<ObjId.length;i++) {
 38  if (ObjId.charAt(i)=="_"return ObjId.substr(i+1,ObjId.length-1
);
 39
 }
 40 return 0
;
 41
}
 42

 43function select_edit(TextObj){//鼠标经过高亮度 

 44 TextObj.focus();TextObj.select();
 45
}
 46

 47function
 checkValue(ID){   
 48 var sl=document.all["ZfText_"+
ID]; 
 49 var sv=document.all["ZfDiv_"+
ID];
 50 var da=document.all["ZfData_"+
ID];   
 51 sv.style.display=
''
 52
 
 53 for(i=0;i<da.rows.length;i++)da.rows[i].style.display=
''
 54
 
 55 for(i=0;i<da.rows.length;i++
){
 56  if(da.rows[i].cells[0].innerText.indexOf(sl.value)!=0)da.rows[i].style.display=
'none';
 57
  getPosition(ID);
 58
 } 
 59
}
 60

 61function
 getL(e){
 62 var l=
e.offsetLeft;
 63 while(e=
e.offsetParent){
 64  l+=
e.offsetLeft;
 65
 }
 66 return
 l
 67
}
 68function
 getT(e){
 69 var t=
e.offsetTop;
 70 while(e=
e.offsetParent){
 71  t+=
e.offsetTop;
 72
 }
 73 return
 t
 74
}
 75

 76function
 getPosition(ID){ 
 77 var sv=document.all["ZfDiv_"+
ID];
 78 var sl=document.all["ZfText_"+
ID];
 79 var spn=document.all["ZfSpan_"+
ID];
 80 var da=document.getElementById("ZfData_"+
ID);
 81 sv.style.pixelWidth=
spn.offsetWidth;
 82 da.style.pixelWidth=
sv.offsetWidth;
 83 sv.style.pixelLeft=
getL(spn);
 84 sv.style.pixelTop=getT(spn)+sl.offsetHeight+3
;
 85 if(da.offsetHeight>200
){
 86  sv.style.pixelHeight=200
;
 87  sv.style.overflowY=
'scroll';
 88
 }
 89 else
 {
 90  sv.style.pixelHeight=
da.offsetHeight;
 91  sv.style.overflowY=
'hidden';
 92
 }
 93
}
 94

 95function
 dropDown(ID){ 
 96 var sv=document.all["ZfDiv_"+
ID]
 97 var tb=document.all["ZfData_"+
ID]
 98
 
 99 if(sv.style.display==
'none'){  
100  sv.style.display=
'';  
101  for(i=0;i<tb.rows.length;i++)tb.rows[i].style.display=
''
102
  getPosition(ID);  
103 } else
 {  
104  sv.style.display=
'none';
105
 }
106}//下拉摸拟层

107
108function hiddenDiv(){
109 var o=
window.event.srcElement.id;
110 var
 tb 
111 var
 sv 
112 if(o==""
) {
113  for (j=0;j<getDivCount();j++
) {
114   tb=document.getElementById('ZfData_'+
j);
115   sv=document.getElementById('ZfDiv_'+
j);   
116   for(i=0;i<tb.rows.length;i++) tb.rows[i].style.display=
'';
117   sv.style.display=
'none';   
118
  }
119
  
120
 }
121

122}//隐藏模拟层

123
124
125function
 setValue(obj){
126var i=
getI(obj.parentElement.parentElement.parentElement.id);
127//alert(obj.parentElement.parentElement.parentElement.id);

128
129var sl=document.all["ZfText_"+i];
130var sv=document.all['ZfDiv_'+
i];
131sl.value=
obj.innerText;
132sv.style.display=
'none';
133//sldIndex=obj.parentElement.rowIndex;

134}//给文本框赋值
135
136function over(obj){
137 obj.className="td_over"

138 obj.title=obj.innerText
139
 obj.focus();
140}//鼠标经过变色

141
142function out(obj){
143 obj.className="td_out"

144}//鼠标离开还原
145
146function String.prototype.Trim(){return this.replace(/(^\s*)|(\s*$)/g,'')}//自定义去空格函数Trim()
147
148
149//增加list的接口,ID表示该组控件是页面中的第几个

150function add(v,ID){
151var sv=document.all['ZfDiv_'+
ID];
152if(!v.Trim()){return
;}
153var tb=document.all['ZfData_'+
ID];
154var c=
tb.insertRow(tb.rows.length).insertCell();
155c.innerHTML='<nobr>'+v.Trim()+'</nobr>
';
156c.onmouseover=new Function("over(this)"
);
157c.onmouseout=new Function("out(this)"
);
158c.onclick=new Function("setValue(this)"
);
159c.className="td_out"
;
160v=
'';
161
}
162//增加inpnubox的接口,在页面中产生一个inputbox控件,下拉列表为空

163function addText(name,DefValue) {
164 var i=
getDivCount();
165 document.write('<span id="ZfSpan_'+i+'" style="border:1 solid #9CA0CB">
');
166 document.write('<input type="text" value="'+DefValue+'" name="'+name+'" id="ZfText_'+i+'" ondblclick="ZfDrop_'+i+'.click()" class="slv" onmouseover="select_edit(this)"  onkeyup="checkValue('+i+')"><input type=button id="ZfDrop_'+i+'" value=">" onclick="this.hideFocus=true;dropDown('+i+');" class="down" onmouseover="this.style.backgroundColor=#EEF3FD" onmouseout="this.style.backgroundColor=\'\'" onmousedown="this.style.backgroundColor=#ABC4F5" onmouseup="this.style.backgroundColor=\'\'"></span>
');
167 document.write('<div id="ZfDiv_'+i+'" class="seldiv" style="display:none;"><table id="ZfData_'+i+'" onselectstart="return false" border="0"  cellspacing="0" cellpadding="0" class="table1"></table></div>
');
168
}
169

170
 
171

172</script>

173</head>
174<body>
175
176<script language="JavaScript">

177addText("name1","a");
178add("1234",0
);
179add("1234",0
);
180</script>

181</body>
182</html>
183
184
posted on 2005-06-10 14:13 楚客 阅读(246) 评论(0)  编辑  收藏 所属分类: HTML

只有注册用户登录后才能发表评论。


网站导航: