dhcombobox version 3.0

最新推荐文章于 2017-03-12 16:10:00 发布

dh20156

最新推荐文章于 2017-03-12 16:10:00 发布

阅读量1.5k

点赞数

分类专栏：技术文档文章标签： function null object javascript iframe layer

本文链接：https://blog.csdn.net/dh20156/article/details/1451694

版权

技术文档专栏收录该内容

57 篇文章 0 订阅

订阅专栏

优化后的dhcombobox，大家多交流！

结果集容器采用的是dhLayer类，会在下面贴出！

"<a href=/"javascript:void(0);/">"+o.join("</a><a href=/"javascript:void(0);/">")+"</a>"；
CSS 控制<a>样式；
#dhlayercontent a {display:block;text-decoration:none;color:#000;cursor:default;width:100%;height:18px;line-height:18px;text-indent:4px;}
#dhlayercontent a:hover {background:highlight;color:highlighttext;}
indexOf 匹配；
取结果集前100条记录，滚动到记录集最后一屏时再加载100条直到加载完所有记录；
For IE,fireFox ；
测试地址： http://www.jxxg.com/dh20156/dhcombobox/dhcombobox.htm

dhlayer.js

//定义popupMenu类
function dhlayer(){
//author:dh20156
this.content = null;
this.background = "buttonface";
this.border = "none";
this.fontSize = "12px";
this.padding = "2px;"
this.cursor = "default";
//popupMenu childNodes
this.childNodes = new Array();
//popupMenu body
this.body = null;

//定义popupMenu方式
var layer = document.createElement("DIV");

//popupMenu的显示方法，参数w-width(popupMenu宽),h-height(popupMenu高),o-parent Object(popupMenu的父对象)
this.show = function(l,t,w,h,o){

  l = l+"px";
  t = t+"px";
  w = w+"px";
  h = h+"px";

  //应用IFRAME以遮蔽顶层对象
  var ifr = document.createElement("IFRAME");
  ifr.style.width = "100%";
  ifr.style.height = "100%";
  ifr.style.border = "none";
  ifr.style.zIndex = "-1";
  ifr.style.position = "absolute";
  ifr.style.top = "0px";
  ifr.style.left = "0px";

  //应用DIV以遮蔽IFRAME的右键
  var il = document.createElement("DIV");
  il.id = "dhlayercontent";
  il.style.width = w;
  il.style.height = h;
  il.style.overflowX = "hidden";
  il.style.overflowY = "auto";
  il.style.border = this.border;
  il.style.background = this.background;
  il.style.zIndex = "100";
  il.style.position = "absolute";
  il.style.top = "0px";
  il.style.left = "0px";
  il.style.padding = this.padding;
  il.style.fontSize = this.fontSize;
  il.innerHTML = this.content;
  il.style.cursor = this.cursor;

  layer.id = "dhlayer";
  layer.style.padding = "0px";
  layer.style.background = this.background;
  layer.style.border = "none";
  layer.style.zIndex = "1";
  layer.style.width = w;
  layer.style.height = h;
  layer.style.position = "absolute";
  layer.style.left = l;
  layer.style.top = t;
  layer.appendChild(ifr);
  layer.appendChild(il);
  if(document.getElementById("dhlayer")!=null){
   o.replaceChild(layer,document.getElementById("dhlayer"));
  }else{
   o.appendChild(layer);
  }
  this.childNodes = il.childNodes;
  this.body = il;
}

//popupMenu hide
this.hide = function(){
  layer.style.display = "none";
}
if(document.all){
  document.attachEvent("onclick",this.hide);
}else{
  document.addEventListener("click",this.hide,true);
}

}

dhcombobox.js

function dhCombobox(){

var dh = this;
this.callbackName = null;
this.datasource = [];
this.trgetObj = null;
this.w = 250;
this.h = 150;

function ats(o,s,e){
return "<a href=/"javascript:void(0);/" οnclick=/"return "+dh.callbackName+".ac(this);/">"+o.slice(s,e).join("</a><a href=/"javascript:void(0);/" οnclick=/"return "+dh.callbackName+".ac(this);/">")+"</a>";
}

var dhPopMenu;

var selectedoption = 0;

var oldvalue = null;

//choose the result use mouse
this.ac = function(o){
  if(this.targetObj!=null){
   oldvalue = this.targetObj.value = o.innerHTML;
  }
  dh.selectedoption = 0;
  return false;
}

//匹配
function searchKey(e){
  if(e!=13 && e!=38 && e!=40 && e!=37 && e!=39){
   var str = dh.targetObj.value;
   if(str!=oldvalue){
    if(str.replace(//s/g,"") != ""){
     tempArr = dh.datasource.contains(str);
     totalL = tempArr.length;
     startL = 0;
     if(100<totalL){
      endL = 100;
     }else{
      endL = totalL;
     }
     showPop(ats(tempArr,startL,endL));
     selectedoption = 0;
    }
    oldvalue = str;
   }
   if(typeof dhPopMenu=="object" && dhPopMenu.childNodes[selectedoption]){
    dhPopMenu.childNodes[selectedoption].style.border = "1px dotted #630";
    dhPopMenu.childNodes[selectedoption].style.color = "red";
   }
  }
}

//追加数据
function showmore(){
  if(endL<totalL){
   if(typeof dhPopMenu=="object"){
    var ch = dhPopMenu.body.scrollHeight;
    var sh = dhPopMenu.body.scrollTop;
    if(ch-sh<=dh.h){
     startL = endL;
     if(100<totalL-endL){
      endL += 100;
     }else{
      endL += totalL-endL;
     }
     if(document.all){
      dhPopMenu.body.insertAdjacentHTML("beforeEnd",ats(tempArr,startL,endL))
     }else{
      dhPopMenu.body.innerHTML += ats(tempArr,startL,endL);
     }
    }
   }
  }
}

this.setup = function(){
  var targetObj = this.targetObj;
  if(targetObj!=null){
   targetObj.onkeydown = function(e){e=e || window.event; e=e.which || e.keyCode;pressKey(e);}
   targetObj.onkeyup = function(e){e=e || window.event; e=e.which || e.keyCode;searchKey(e);}
  }
}
}

调用 dhcombobox.htm

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>array join test</title>
<style type="text/css">
#dhlayercontent * {font-size:12px;font-family:verdana;}
#dhlayercontent a {display:block;text-decoration:none;color:black;cursor:default;width:100%;height:18px;line-height:18px;text-indent:4px;}
#dhlayercontent a:hover {color:highlighttext;background:highlight;}
</style>
<script language="javascript" type="text/javascript" src="dhlayer.js"></script>
<script language="javascript" type="text/javascript" src="dhcombobox.js"></script>
</head>
<body>
<input type="text" id="show" style="width:250px;"><br/>
<select><option>Search In 10,000 Number Recordsets</option></select><br/>
<input type="text" id="show2" style="width:250px;"><br/>
<select><option>Search In 10,000 Number Recordsets</option></select><br/>
<ul>
<li>"<a href=/"javascript:void(0);/">"+o.join("</a><a href=/"javascript:void(0);/">")+"</a>"；</li>
<li>CSS 控制<a>样式；<br/>
#dhlayercontent a {display:block;text-decoration:none;color:#000;cursor:default;width:100%;height:18px;line-height:18px;text-indent:4px;}<br/>
#dhlayercontent a:hover {background:highlight;color:highlighttext;}
</li>
<li>indexOf 匹配</li>
<li>取结果集前100条记录，滚动记录集时加载100条直到加载完所有记录；</li>
<li>For IE,fireFox</li>
<li>在第一个文本框输入数字进行测试</li>
</ul>

var dc = new dhCombobox();
dc.callbackName = "dc";
dc.datasource = arr;
dc.targetObj = document.getElementById("show");
dc.setup();

var arr2 = [" ","<a href='#'>hello</a>","abcd","a@a.com","1000231","20657","104578"];
var dc2 = new dhCombobox();
dc2.callbackName = "dc2";
dc2.datasource = arr2;
dc2.targetObj = document.getElementById("show2");
dc2.w = 100;
dc2.h = 200;
dc2.setup();
</script>

</body>
</html>