`
catlovefox
  • 浏览: 26877 次
  • 性别: 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下拉框 function replaceSelects() { try{ for (i=0;i;i++){ // 隐藏 select selects[i].style.display = 'none'; select_divTag = document.createElement('div'); select_divTag.id = ...

    select ——使用DIV 实现 Select

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

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

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

    DIV模拟select下拉框

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

    div 模拟select 单选

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

    div模拟select实用版

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

    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+css select效果

    然后，我们将在`div`内嵌套一个`&lt;select&gt;`元素，并将其`position`设置为`absolute`，这样可以使其脱离正常文档流并定位在`div`的特定位置。 接下来，我们需要用CSS来定制`select`的外观。由于`select`元素在不同...

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