`
catlovefox
  • 浏览: 26620 次
  • 性别: Icon_minigender_2
  • 来自: 济南
社区版块
存档分类
最新评论

解决 动态生成div,被select挡住的问题。。

    博客分类：
  • ajax
AjaxJSFJ#Apache浏览器 
阅读更多
注意：
<iframe   id='ifmout' style='position:absolute;z-index:0;width:expression(this.nextSibling.offsetWidth);height:expression(this.nextSibling.offsetHeight);top:expression(this.nextSibling.offsetTop);left:expression(this.nextSibling.offsetLeft);'   frameborder='0'   ></iframe>
很多资料都写-1，，

这是浏览器IE7版本之前会出现的问题，IE7,是不会有这个问题的啦。。
哈哈哈。。这是，整理后的代码。。防止自己忘了。做个备份啦。。
再次，感谢老公的帮助哟。
在生成div时，先生成的Ifame，在移除DIV时，也要移除ifame......



<script>
var inputname;
var now;//
var menuFocusIndex;  //当前选中行
var arrylist;//当前返回数组
var resultlength=0;//当前数组长度
function getPosition(obj)//获取当前操作坐标
{
    var top = 0,left = 0;
    do
    {
       top += obj.offsetTop;
       left += obj.offsetLeft;
    }
    while ( obj = obj.offsetParent );     
    var arr = new Array();     
    arr[0] = top;
    arr[1] = left;   
    return arr;   
}
function createMenu(result)//生成div
{ 
    var textBox=inputname;
    var menuid="divout";
    var divouter;
   if( document.getElementById(menuid) == null )
   {
    ifm=document.createElement("<iframe   id='ifmout' style='position:absolute;z-index:0;width:expression(this.nextSibling.offsetWidth);height:expression(this.nextSibling.offsetHeight);top:expression(this.nextSibling.offsetTop);left:expression(this.nextSibling.offsetLeft);'   frameborder='0'   ></iframe>");
        var left_new=getPosition(textBox)[1];
        var top_new=getPosition(textBox)[0];   
        var newControl = document.createElement("div");
        newControl.id = menuid;
  document.body.appendChild(ifm);
        document.body.appendChild(newControl);
        newControl.style.position = "absolute";
        newControl.style.border = "solid 1px #0000CC";
        newControl.style.backgroundColor = "#FFFFFF";
        newControl.style.width = 350 + "px";
        newControl.style.left = left_new + "px";        
        newControl.style.top = top_new+ 2 +20+ "px";
        try{
        newControl.style.font=14+"px";}
        catch(err){}
        divouter= newControl;
   }
   else
      divouter= document.getElementById( menuid );
   divouter.innerHTML =result;
}
function createMenuBody(resultlist)//根据返回数组生成div中行
{
    var result="";
    var j = 0;
    arr = resultlist;
arrylist =arr;
    if(arr.length > 10)
    {
        j = 10;
    }
    else
    {
       j = arr.length;
    }
    resultlength=j;
   if(j >0)
   { 
        for ( var i = 0; i < j; i++ ){
          arrtab = arr[i].childNodes;
          text1 ="";
          text2 ="";
          text3 ="";
          if(arrtab.length>=1)text1 = arrtab[0].childNodes[0]==null?"":arrtab[0].childNodes[0].nodeValue;
          if(arrtab.length>=2)text2 = arrtab[1].childNodes[0]==null?"":arrtab[1].childNodes[0].nodeValue;
          if(arrtab.length>=3)text3 = arrtab[2].childNodes[0]==null?"":arrtab[2].childNodes[0].nodeValue;
          result += "<table border='0' cellpadding='2' cellspacing='0' id='menuItem"+(i+1)+"' onmouseover='forceMenuItem( "+(i+1)+");'width='100%' onclick='givNumber("+i+");'><tr><td align='left' width='100px'>" + text1+ "</td><td align='left' width='180px'>" + text2+ "</td><td align='left' width='70px'>" + text3+ "</td></tr></table>";
    createMenu(result);
  }
   }
   else
   {
        var div = document.getElementById("divout");
   if(div)div.parentNode.removeChild(div); 
  var ifm = document.getElementById("ifmout");
   if(ifm)document.body.removeChild(ifm);
   }
}
function forceMenuItem(index)//div中颜色变化
{
    lastMenuItem = document.getElementById("menuItem" + menuFocusIndex);
    if (lastMenuItem != null)
    {
        lastMenuItem.style.backgroundColor="white";      
        lastMenuItem.style.color="#000000";
    }
    var menuItem = document.getElementById("menuItem" + index);
    if (menuItem == null)
    {
        document.getElementById("txt1").focus();
    }
    else
    {
        menuItem.style.backgroundColor = "#5555CC";
        menuItem.style.color = "#FFFFFF";
        menuFocusIndex = index;
    }
}
function givNumber(index)//赋值移除div
{
inputname.value =  arrylist[index].childNodes[0].childNodes[0].nodeValue ;
    inputname.focus();
    var div = document.getElementById("divout");
  if(div)div.parentNode.removeChild(div); 
var ifm = document.getElementById("ifmout");
  if(ifm)document.body.removeChild(ifm);
    menuFocusIndex=null;              
}
function catchKeyBoard()//按键事件
{
   var keyNumber = event.keyCode;
   if(document.getElementById("divout")==null){
  return;
   }
   if(keyNumber=='40') //向下
   {    
            if (menuFocusIndex==null) //当焦点在文本框中间时，按向下跳到第一个主体。
            {
               forceMenuItem(1);
            }
            else if(menuFocusIndex==resultlength)//当焦点超出界限时跳转到第一个主体
            {
               forceMenuItem(1);
            }
            else
            {
               forceMenuItem(menuFocusIndex+1); //焦点增加1
            }
   }
   else if(keyNumber=='38')//向上
   {
  
        if(menuFocusIndex==1)
         {
            forceMenuItem(resultlength);
         }else if(menuFocusIndex == null){
           forceMenuItem(1); //焦点1
  }else
        {
           forceMenuItem(menuFocusIndex-1); //焦点减少1
        }
  }
  else if(keyNumber=='13')
  {
        givNumber(menuFocusIndex-1);
  }
}
function DisplayUserInformation(obj,tonow)//ajax方法调用
{
now = tonow;
inputname=obj;
   var keyNumber = event.keyCode;
   if(keyNumber=='40'||keyNumber=='38'||keyNumber=='13')
  catchKeyBoard();
   else//调用ajax
   {
       var url = "";
       var canshu=inputname.value;
       if(canshu!="")
       {
   ajaxStart(canshu);  
       }
       else
       {
        var div = document.getElementById("divout");
           if(div)div.parentNode.removeChild(div); 
  var ifm = document.getElementById("ifmout");
     if(ifm)document.body.removeChild(ifm);
    
       }
   }
}
function InputOnBlur()//失去焦点
{   
  setTimeout("InputOnBlurTimeOut()",300);
}
function InputOnBlurTimeOut()//失去焦点
{   
  menuFocusIndex=null;
        var div = document.getElementById("divout");
   if(div)div.parentNode.removeChild(div); 
  var ifm = document.getElementById("ifmout");
   if(ifm)document.body.removeChild(ifm);
}
//ajax
var XmlHttpObject;
function StateEvent()
{

if(XmlHttpObject.readyState == 4)
{
if(XmlHttpObject.status == 200)
{
xmlDoc=XmlHttpObject.responseXML.documentElement;
result=xmlDoc.getElementsByTagName("Sssq");

if(result.length==0){
  inputobj = inputname;
  inputobj.value=inputobj.value.substring(0,inputobj.value.length-1);
}else{
  createMenuBody(result);
}

result=xmlDoc.getElementsByTagName("ZhiYe");
if(result.length==0){
  inputobj = inputname;
  inputobj.value=inputobj.value.substring(0,inputobj.value.length-1);
}else{
  createMenuBody(result);
}
}
}
}
function CreateXmlHttp()
{
if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
{
return new XmlHttpRequest();
}
}
function ajaxStart(q)
{
var ParamString = "q="+q+"&now="+now;
XmlHttpObject = CreateXmlHttp();
XmlHttpObject.onreadystatechange = StateEvent;
XmlHttpObject.open("post","ajaxjsp.jsp",true);
XmlHttpObject.setRequestHeader("Content-Type","application/x-www-form-urlencoded;"); //设置服务器响应请求体参数
XmlHttpObject.send(ParamString);
}
</script>
分享到：
| Java中读取Excel，数据导入Excel
评论
6 楼 catlovefox 2009-02-02  
大家仔细看哟，我是用的ajax，自动画得div,所以显得代码多了。。其实最关键的只有2句代码而已啦。。
5 楼 kimmking 2009-01-12  
激活的传统activex，iframe压根挡不住。

hidden的比较通用的流行的方案，跟其他两个方案比可以减少内存泄露。
4 楼 hanjs 2009-01-12  
kimmking 写道
hanjs 写道
这个方法不仅仅可以解决这个问题，而且还可以处理div无法遮挡住activex控件的问题。

ie6的著名bug：
select iframe object这三个标记不同于其他html控件，
一般情况下zindex不起作用。
嵌套div在iframe的方法可以解决select的问题。好像不能解决activex。

还有两种常用的方法：
1、放到object标记的src里，这个可以解决这三种组件的问题。
2、计算弹出的div的范围内的这三种组件，hidden掉（比如jsf的apache myface tomhawk里的menu这么做的）。



我不指定你所指的是什么控件，反正我这边能达到我要的目的，就是利用上面的方法可以挡住Object。

因为我们要用这个控件显示内容，填报的数据。如果hidden了，不是很适合。
3 楼 congjl2002 2009-01-11  
还是hidden掉这些控件比较方便吧，代码量应该是你的十分之一都不到
2 楼 kimmking 2009-01-11  
hanjs 写道
这个方法不仅仅可以解决这个问题，而且还可以处理div无法遮挡住activex控件的问题。

ie6的著名bug：
select iframe object这三个标记不同于其他html控件，
一般情况下zindex不起作用。
嵌套div在iframe的方法可以解决select的问题。好像不能解决activex。

还有两种常用的方法：
1、放到object标记的src里，这个可以解决这三种组件的问题。
2、计算弹出的div的范围内的这三种组件，hidden掉（比如jsf的apache myface tomhawk里的menu这么做的）。

1 楼 hanjs 2009-01-11  
这个方法不仅仅可以解决这个问题，而且还可以处理div无法遮挡住activex控件的问题。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    动态生成div框并且同时加载数据

    在网页开发中，动态生成div框并同时加载数据是一种常见的优化技术，特别是在处理大量数据时。这种方法能够显著提高用户体验，因为它允许数据分批次或者按需加载，而不是一次性加载所有内容，从而减少网络负担和...

    JQuery 动态生成DIV、Table并处理数据

    标题 "JQuery 动态生成DIV、Table并处理数据" 涉及的是使用JavaScript库JQuery来动态创建HTML元素，特别是DIV和Table，并且处理其中的数据。这在Web开发中非常常见，尤其是在构建交互式用户界面时。下面将详细阐述这...

    解决div总是被select遮挡的问题.rar

    在本案例中，"解决div总是被select遮挡的问题.rar"提供了解决方案，通过引入一个透明的`iframe`来规避这一现象。 首先，我们需要理解Z轴顺序的概念。在CSS中，`z-index`属性用于指定元素在堆叠上下文中的层级。具有...

    解决 Ie 6下 select挡住div的通用函数

    让iframe 显示在 指定的div下面 针对ie6 select挡住div 的bug 采用 iframe来当作div的底 * * @param string divId 需要解决的div层 * @param string iframeId 采用的 IFRAME ,如果不指定 自动生成一个...

    DIV模拟select下拉框

    "DIV模拟select下拉框"就是一种利用JavaScript库，如jQuery，来实现这一目标的技术。它通过用CSS样式化的DIV元素替换原生的SELECT元素，从而提供更灵活的外观和交互体验。 标题中的"DIV模拟select下拉框"意味着我们...

    Div 制作的SELECT

    用DIV模仿SELECT下拉框 function replaceSelects() { try{ for (i=0;i;i++){ // 隐藏 select selects[i].style.display = 'none'; select_divTag = document.createElement('div'); select_divTag.id = ...

    解决IE6 中select 穿透 div 等层的问题

    在互联网的早期，Internet Explorer 6 (简称IE6) 是一款广泛应用的浏览器，但它的兼容性和渲染机制存在诸多问题，其中一个问题就是“select穿透div”的现象。这个问题在现代浏览器中通常不会出现，但在IE6中，`...

    div 模拟select 单选

    select 在ie6下覆盖div bug 解决方案。 div 模拟select 单选 在 body onload事件中调用init_select方法就可，参数传相关背景图片就可。我都已经放到资源包下了。

    div模拟select实用版

    这种做法通常被称为“div模拟select”。本教程将深入探讨如何利用`div`实现这一功能，并提供一个实用版的示例。 `select`元素是HTML中的一个标准组件，用于创建下拉列表，用户可以通过单击下拉箭头选择一个选项。...

    select ——使用DIV 实现 Select

    select ——使用DIV 实现 Select js源码

    div 模拟 select 多选

    div 模拟 select 多选 实现还有点bug，望大家一起改正。

    option挡住div解决方法

    Div下拉菜单被Select挡住的解决办法 下拉菜单 bbbbbbb ccccccc ccccccc ccccccc ccccccc test0 test1 test2 test3 Div被Select挡住，是一个比较常见的问题。 有的朋友通过把div的内容放入iframe或object里来...

    div模拟select自定义下拉列表框（jQuery）

    `div模拟select自定义下拉列表框`是一种常见做法，它利用JavaScript（如jQuery）和CSS来实现，可以提供比原生`&lt;select&gt;`元素更丰富的样式控制和交互体验。本篇将详细介绍这种技术及其应用。 一、为什么使用div模拟...

    根据id获取angularjs动态生成的div对象

    参考这篇文章实现了动态生成div对象，在利用id获取这些对象时结果一直是undefined，分析发现是因为div由ng-repeat动态生成，在页面渲染完成前id是未知的，因此不能用id去获取div，只要把相关代码写在页面渲染完成的...

    jquery 拖拽动态添加div 保存拖拽后的效果

    本篇文章将聚焦于一个特定的应用场景：使用jQuery实现拖拽功能来动态添加div，并保存拖拽后的位置效果。这个功能在网页布局、可配置界面或者拖放式应用设计中非常常见。 首先，我们需要理解jQuery UI中的Draggable...

    Div Select挡住的解决办法

    在网页设计中，有时会遇到一个常见的问题，即`Div`元素下的下拉菜单（`Select`元素）会被`Div`本身挡住，导致用户无法正常交互。这个问题在标题和描述中提到，我们可以从HTML和CSS的角度来探讨解决方法。 首先，...

    解决IE6中 Div层挡不住Select组件

    "解决IE6中 Div层挡不住Select组件"这个问题是一个典型的例子，它反映了IE6在CSS层叠样式和Z-index处理上的独特行为。 在现代浏览器中，我们可以利用CSS的`z-index`属性来控制元素的前后堆叠顺序，从而让某些元素...

    div模拟下拉菜单(select)jquery插件.gz

    为了解决这个问题，开发者常常使用`div`元素配合CSS和JavaScript来模拟下拉菜单，以实现更加灵活和美观的效果。在这个"div模拟下拉菜单(select)jquery插件.gz"压缩包中，包含的就是这样一个基于`div`和jQuery的...

    Div实现仿SelectDemo

    本教程将围绕“Div实现仿SelectDemo”这一主题，探讨如何利用jQuery创建一个高度可定制的Select插件。 首先，"Div实现仿SelectDemo"意味着我们不再依赖HTML的Select标签，而是用一个简单的Div元素作为基础结构。...

    最顶层div被flash或者下拉列表遮挡的问题解决

    ### 最顶层div被flash或者下拉列表遮挡的问题解决 在网页设计中，有时会出现顶层的div元素被其他元素如Flash或下拉列表遮挡的情况。这种遮挡问题通常是由于CSS定位属性设置不当造成的，尤其是`z-index`值的设置不...

Magicbox
Global site tag (gtag.js) - Google Analytics