javascrip layercontrol.txt

c #.net2005 WEB开发。在asp.net 2.0上测试成功。

http://community.csdn.net/Expert/topic/5589/5589971.xml?temp=.1889002
//javascript代码
<script language="javascript" type="text/javascript">
function Custmousemove(SendObj){
  event.cancelBubble=true;
}
function CustMouseOut(SendObj,Obj2,Obj3){
   event.cancelBubble=true;
}

//droplist在网页上的鼠标移动事件
 function DropOnMouseMove(evt,SendObj) {
 event.cancelBubble=true;
  evt=(evt)?evt:((window.event)?window.event:"")
    if(evt){
        var elem=(evt.target)?evt.target:evt.srcElement
        elem.className=(evt.type=="mouseover")?"highlight":"normal"
        var LayObj=document.getElementById("LayerCust");
        var TextObj=document.getElementById("TextCust");
        var ListObj=document.getElementById("ListBoxCust");
        AddList(ListObj,SendObj,TextObj,LayObj);
        LayObj.style.left=SendObj.getBoundingClientRect().left;
        LayObj.style.top=SendObj.getBoundingClientRect().top;
        LayObj.style.visibility="hidden";
        LayObj.style.visibility="visible";
        SendObj.style.visibility="hidden";
        TextObj.value=SendObj.value;
        TextObj.focus();
        if(ListObj.length==0){
          LayObj.style.width=SendObj.getBoundingClientRect().right-SendObj.getBoundingClientRect().left;
        }
        
    }
}
//droplist在网页上的鼠标移动事件
 function DropOnMouseMove(evt,SendObj) {
 event.cancelBubble=true;
  evt=(evt)?evt:((window.event)?window.event:"")
    if(evt){
        var elem=(evt.target)?evt.target:evt.srcElement
        elem.className=(evt.type=="mouseover")?"highlight":"normal"
        var LayObj=document.getElementById("LayerCust");
        var TextObj=document.getElementById("TextCust");
        var ListObj=document.getElementById("ListBoxCust");
        AddList(ListObj,SendObj,TextObj,LayObj);
        LayObj.style.left=SendObj.getBoundingClientRect().left;
        LayObj.style.top=SendObj.getBoundingClientRect().top;
        LayObj.style.visibility="hidden";
        LayObj.style.visibility="visible";
        SendObj.style.visibility="hidden";
        TextObj.value=SendObj.value;
        TextObj.focus();
        if(ListObj.length==0){
          //ListObj.style.width="100%";
          LayObj.style.width=SendObj.getBoundingClientRect().right-SendObj.getBoundingClientRect().left;
          //TextObj.style.width="100%";
          //ListObj.style.width="100%";
        }
        
    }
}

//将drop添加到层的list中。
function AddList(ListObj,DropListObj,TextObj,LayObj){
event.cancelBubble=true;
var opt
var i;
    LayObj.droplistname=DropListObj.id;
    ListObj.droplistname=DropListObj.id;
    TextObj.droplistname=DropListObj.id;
    ListObj.length=0;
   for(i=0;i<DropListObj.length;i=i+1){
     opt=document.createElement("OPTION");
     ListObj.options.add(opt);
     opt.innerHTML=DropListObj.item(i).text;
     opt.value=DropListObj.item(i).value;
   }
}
function FormMouseMove(){
event.cancelBubble=true;
if(document.getElementById("TextCust")!=null){
 if(document.getElementById("LayerCust")!=null){
    var LayerObj=document.getElementById("LayerCust");
    LayerObj.style.visibility="hidden";
    var ListObj=document.getElementById("ListBoxCust")
    if(ListObj.droplistname!=""){
       var DropListObj=document.getElementById(ListObj.droplistname)
       DropListObj.style.visibility="visible";
    }
  }
 }
}
//根据textstr查找listobj中匹配项的序号。找到了，返回第一个序号，否则返回-1。
function getPos(TextStr,ListObj){
   if (TextStr==null || !TextStr){
       return -1;
   }
   for (var i=0;i<ListObj.options.length;i++ ){
      if(ListObj.options[i].text.indexOf(TextStr)>=0){
        return i;
        break;
      }
   }
   return -1;
}
//将不匹配textstr的listobj项删除。
function getPosDelete(TextStr,ListObj){
 if (TextStr==null )
 {

 }else{ 
   var i=0;
   while(i<ListObj.options.length)
   {
     if(ListObj.options[i].text.indexOf(TextStr)>=0) { 
       i++;
     }else{
       ListObj.remove(i);
     }
   }
 }
}
//将跟textstr匹配的，但是不存在listobj的dropobj项添加到listobj中。
function AppendList(TextStr,ListObj,DropObj){
var TempStr;
var opt
  for(var i=0;i<DropObj.length;i++){
    if(DropObj.item(i).text.indexOf(TextStr)>=0){
      if(getPos(DropObj.item(i).text,ListObj)==-1){
        opt=document.createElement("OPTION");
        ListObj.options.add(opt);
        opt.innerHTML=DropObj.item(i).text;
        opt.value=DropObj.item(i).value;
      }
    }
  }
}
//查找textstr在listobj和dropobj匹配项目，将他们无重复的显示在listobj中。
function SearchList(TextStr,ListObj,DropObj){
   getPosDelete(TextStr,ListObj);
   AppendList(TextStr,ListObj,DropObj);
   if(ListObj.length>0){
     return 0;
   }else{
     return -1;
   }
}
//TextBox的keyup事件
function IndexText(evt,SendObj){
event.cancelBubble=true;

if(SendObj!=null){
 if(SendObj.id=="TextCust"){
  var ListObj=document.getElementById("ListBoxCust");
  var DropListObj=document.getElementById(ListObj.droplistname); 
  var LayObj=document.getElementById("LayerCust");
  ListObj.selectedIndex=SearchList(SendObj.value,ListObj,DropListObj);
  if(SendObj.value.length==0){
     AddList(ListObj,DropListObj,SendObj,LayObj);
   }else{
     if(evt.keyCode==13){
       if(ListObj.selectedIndex>=0){
         SendObj.value=ListObj.item(ListObj.selectedIndex).text;
       }
     }
   }
 }
 }
}
function IsEmpty(ListObj){
  for(var i=0;i<ListObj.length;i++){
    if(ListObj.item(i).text==""){
      return 1;
      break;
    }
  }
  return 0;
}
//textbox的失去焦点事件
function Textonblur(SendObj){
event.cancelBubble=true;
  if(SendObj!=null){
    if(SendObj.id=="TextCust"){
      var ListObj=document.getElementById("ListBoxCust");
      var DropListObj=document.getElementById(SendObj.droplistname);
      if(getPos(SendObj.value,ListObj)==-1){
        if(SendObj.value!=""){
          alert("您输入的数据不在列表中，请重新输入,如果数据为空，请单击列表的空项");
        }else{
          if(IsEmpty(DropListObj)==1){
            DropListObj.value="";
          }else{
            if(DropListObj.length!=0){
               alert("不能为空");
            }
          }
        }
      }else{
        //SendObj.value=ListObj.item(getPos(SendObj.value,ListObj)).value;
        DropListObj.selectedIndex=getPos(SendObj.value,DropListObj);
      }
    }
  }
}

//选择列表中的list单击事件
function ListClick(ListObj,TextObj){
event.cancelBubble=true;
if(ListObj.id=="ListBoxCust"){
  if(ListObj.length>0){
    TextObj.value=ListObj.item(ListObj.selectedIndex).text
    var DropListObj=document.getElementById(ListObj.droplistname);
    DropListObj.selectedIndex=getPos(TextObj.value,ListObj);
    DropListObj.value=TextObj.value;
  }
}
}
</script>

aspx代码：
层，text，select组合框代码：
     <!-- 一个层，层中有个text，有个list-->
<div id="LayerCust"  onmousemove="Custmousemove(this)"  droplistname="" style="position:absolute; width:141px; height:144px; z-index:2; left: 233px; top: 246px; vertical-align: top; text-align: left; visibility: hidden; clear: none;"> 
<input id="TextCust" type="text"  onkeyup="IndexText(event,this);"  onblur="Textonblur(this);" style="width:100%"   droplistname="" tabindex="100" />
<select size="4" name="ListBoxCust" id="ListBoxCust"   onclick="ListClick(this,TextCust);" droplistname="" style="height:100px;width:100%;" tabindex="101">
</select>
</div>
cs代码：
/// <summary>
        /// 这个在page load事件中调用，不管IsPostBack是否为真为假，向sourdropdownlist添加web页面的onmouseover属性，鼠标移动到dropdownlist上，就显示层。
        /// </summary>
        /// <param name="SourDropDownList"></param>
        public void SetDropListScript(DropDownList SourDropDownList)
        {
            
            SourDropDownList.Attributes.Add("onmouseover", "DropOnMouseMove(event,this)");
        }
        /// <summary>
        ///  这个在page load事件中调用，不管IsPostBack是否为真为假，向page添加onmousemove属性，这样鼠标移开层的范围，就让层隐藏。
        /// </summary>
        /// <param name="SourPage"></param>
        public void SetFormMouseMove(System.Web.UI.Page SourPage)
        {
            SourPage.Form.Attributes.Add("onmousemove", "FormMouseMove();");
            
        }
        /// <summary>
        /// 这个在page load事件中调用，不管IsPostBack是否为真为假，将用户输入的返回到dropdownlist的text属性中。
        /// </summary>
        /// <param name="SourDropDownList"></param>
        /// <param name="SourPage"></param>
        public void GetDropListScript(DropDownList SourDropDownList,System.Web.UI.Page SourPage)
        {
            if (SourPage.Request.Form[SourDropDownList.ID] != null)
                if (SourDropDownList.Items.FindByText(SourPage.Request.Form[SourDropDownList.ID].ToString()) != null)
                    SourDropDownList.Text = SourPage.Request.Form[SourDropDownList.ID].ToString();
        }
//功能1：鼠标移动到dropdwonlist上，就显示层。将鼠标移动到层外，就消失，不是很好的效果
//大家可以测试
//2：在text上按回车，检测用户输入的是否在列表中，如果不在，就提示。但是如果页面中存在
//服务器上的button，那么请把UseSubmitBehavior设置为false，否则该button会响应回车事件
//3：单击列表，选中项在text中显示。但是在页面比较多服务器控件的时候，这功能会消失，如
//页面上只有dropdwonlist和层，就能显示在text中。
//4：在asp.net2.0,c#.net2005,winxp,win2000,iis5.0以上，ie6.环境下测试成功。
//我不会封装成服务器控件，各位高手可以考虑封装。
//该代码完全自由开放。使用后果作者不负责。转载请注明出处和原作者。