`
mlzboy
  • 浏览: 729430 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

关于div的定位显示问题

阅读更多




代码如下:

  1
  2
  3
  4
  5<html>
  6    <head>
  7        <title>NetShop Management Category Add Panel
  8        </title>
  9        <meta http-equiv=Expires content=0> 
 10<meta http-equiv=Pragma content=no-cache> 
 11<meta http-equiv=Cache-Control content=no-cache> 
 12        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 13        <link type="text/css" rel="stylesheet" href="css/xtree2.css">
 14        <script type="text/javascript" src="js/xtree2.js"></script>
 15        <!-- xloadtree2.js文件依赖xtree2.js文件  -->
 16        <script type="text/javascript" src="js/xloadtree2.js"></script>
 17        <script>
 18 function showTree(a)
 19{
 20    document.getElementById('divTree').style.display = "block";
 21    document.getElementById('divTree').style.left=a.offsetLeft+'px'
 22    document.getElementById('divTree').style.top=a.offsetTop+ a.offsetHeight+'px'
 23}

 24function hideTree(a)
 25{
 26    document.getElementById('divTree').style.display="none";
 27}

 28function insertValue(oNode)
 29{
 30    document.getElementById('parentCategoryName').value = oNode.text;
 31    document.getElementById('parentCategoryId').value = oNode.id;
 32    document.getElementById('divTree').style.display = "none";
 33    //alert(oNode.id);
 34}

 35 
</script>
 36    </head>
 37    <body>
 38        <form name="categoryForm" method="post" action="/NetShop/manage/categoryAdd.do">
 39            <br />
 40            <br />
 41            <table border="1" cellpadding="4" cellspacing="0" width="600"
 42                align="center">
 43                <tr>
 44                    <td></td>
 45                    <td></td>
 46                    <td></td>
 47                </tr>
 48                <tr>
 49                    <td>
 50                        Select Parent Category Name:
 51                    </td>
 52                    <td>
 53                        <input type="text" name="parentCategoryName" value="" onfocus="showTree(this);">
 54                    </td>
 55                    <td>
 56                        
 57                    </td>
 58                </tr>
 59                <tr>
 60                    <td>
 61                        Category Name:
 62                    </td>
 63                    <td>
 64                        <input type="text" name="categoryName" value="">
 65                    </td>
 66                    <td>
 67                        
 68                    </td>
 69                </tr>
 70                <tr>
 71                    <td>
 72                        Description:
 73                    </td>
 74                    <td>
 75                        <textarea name="categoryDescription"></textarea>
 76                    </td>
 77                    <td>
 78                        
 79                    </td>
 80                </tr>
 81                <tr>
 82                    <td>
 83                        Status:
 84                    </td>
 85                    <td>
 86                        <select name="categoryStatus" size="1"><option value="NORMAL">Normal</option>
 87                            <option value="LOCKED">Locked</option>
 88                            <option value="DELETED">Deleted</option></select>
 89
 90                    </td>
 91                    <td>
 92                        
 93                    </td>
 94                </tr>
 95            </table>
 96            <input type="hidden" name="parentCategoryId" value="">
 97            
 98            <br />
 99            
100            <br />
101            <br />
102            <input type="submit" value="Submit">
103            <input type="submit" name="org.apache.struts.taglib.html.CANCEL" value="Reset" onclick="bCancel=true;">
104        </form>
105        <div id="divTree"
106            style="overflow-y:auto;height:200px;width:70px;display:none;position:relative;background-color:#FFF;z-index:1000;border-style:solid;border-color:#ACAA9C;border-width:1px">
107            <script type="text/javascript">
108var tree=new WebFXLoadTree("dictionaries","dictionaries.xml");
109var ti0 = new WebFXTreeItem("Item 0");
110tree.add(ti0);
111tree.write();
112tree.expand();
113
</script>
114        </div>
115    </body>
116</html>
117
118

改了后:

  1
  2
  3
  4
  5<html>
  6    <head>
  7        <title>NetShop Management Category Add Panel
  8        </title>
  9        <meta http-equiv=Expires content=0> 
 10<meta http-equiv=Pragma content=no-cache> 
 11<meta http-equiv=Cache-Control content=no-cache> 
 12        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 13        <link type="text/css" rel="stylesheet" href="css/xtree2.css">
 14        <script type="text/javascript" src="js/xtree2.js"></script>
 15        <!-- xloadtree2.js文件依赖xtree2.js文件  -->
 16        <script type="text/javascript" src="js/xloadtree2.js"></script>
 17        <script>
 18 function showTree(a)
 19{
 20    document.getElementById('divTree').style.display ="";
 21    document.getElementById('divTree').style.left=a.offsetLeft+'px'
 22    document.getElementById('divTree').style.top=a.offsetTop+ a.offsetHeight+'px'
 23}

 24function hideTree(a)
 25{
 26    document.getElementById('divTree').style.display="none";
 27}

 28function insertValue(oNode)
 29{
 30    document.getElementById('parentCategoryName').value = oNode.text;
 31    document.getElementById('parentCategoryId').value = oNode.id;
 32    document.getElementById('divTree').style.display = "none";
 33    //alert(oNode.id);
 34color: #008000; background-color: #f5f5
分享到:
评论

相关推荐

    div弹出层 定位问题的 处理

    在实现弹出层时,我们通常将`div`设置为绝对或固定定位,使其能脱离文档流,独立于其他元素显示。 1. **绝对定位**:使用`position: absolute;`可以让`div`相对于最近的非静态定位祖先元素进行定位。如果没有这样的...

    DIV弹出层+定位

    在`DIV定位`方面,`position:absolute`属性使得`DIV`可以相对于其最近的非静态定位祖先元素进行定位,如果没有这样的祖先,它将相对于整个文档定位。通过设置`top`和`left`属性,我们可以精确地控制弹出层在页面上的...

    鼠标移动到div上显示制定信息或者div(自适应显示位置)

    /* 使div相对于文档定位 */ background-color: white; padding: 10px; border: 1px solid #ccc; display: none; /* 默认隐藏 */ } ``` 现在,我们需要使用JavaScript(这里我们可以使用jQuery库,因为它简洁...

    onclick事件实现div的隐藏和显示

    在网页开发中,JavaScript 是一种常用的脚本语言,用于实现页面的交互效果。...在这个场景中,我们讨论的是如何利用 "onclick...同时,熟悉源码阅读和开发者工具的使用,能帮助开发者更好地理解代码逻辑,定位并解决问题。

    多个iframe,显示其中一个frame中的div,并处于最上层显示

    为了实现描述中的弹出`div`,我们通常会使用JavaScript动态创建和定位这个`div`。可以设置其样式,如`position: fixed`使其固定在屏幕中央,`display: none`使其初始为隐藏状态,然后在需要时通过JavaScript更改这些...

    多个iframe,其中一个的div能够处于最上层显示

    当有多个 `iframe` 并存时,可能会出现重叠或者层级问题,特别是当其中某个 `iframe` 中有一个需要突出显示的 `div` 元素时。这个问题的关键在于理解 `z-index` 和层叠上下文的概念,以及如何正确地应用它们来确保...

    div浮于页面固定位置、展开与隐藏、锚点定位

    本主题主要探讨如何让div元素浮于页面固定位置、实现展开与隐藏的效果,以及利用锚点进行精确定位。这些技巧对于创建交互性强、用户体验良好的网页至关重要。 一、div元素的固定定位 在CSS中,我们可以使用`...

    妙用z-index让一个div显示在最前面

    如果想要让某一个div无论在什么情况下都显示在最前面,可以给它设定一个很大的z-index值,如99999,这样它几乎可以覆盖页面上所有其他定位元素的堆叠顺序。 但是需要注意的是,虽然使用一个非常大的z-index值可以让...

    html中一个div层在另外一个div或者img上显示

    对于本问题,我们需要使用`absolute`或`fixed`定位来使`div`层覆盖在另一个元素之上。 其次,了解CSS的层级概念,即`z-index`属性。`z-index`用于控制在同一堆叠上下文中的定位元素的前后顺序。具有更高`z-index`值...

    div左边点击链接右边显示内容特效

    这里的CSS代码将左侧容器设置为固定宽度并浮动,右侧内容区域则根据左侧容器的宽度进行定位。 最后,使用JavaScript(这里以jQuery为例)处理点击事件,实现点击链接后显示右侧内容: ```javascript $(document)....

    图片居中到div中显示

    ### 图片居中到div中显示 在网页设计与开发过程中,经常需要将图片精确地居中显示在某个`div`容器内。这种布局需求在实际应用中非常常见,例如在设计网页横幅、广告位或者任何需要将图片美观展示的地方。本文将详细...

    弹出DIV,显示阻挡层

    "弹出DIV,显示阻挡层"是利用JavaScript、DWR(Direct Web Remoting)以及CSS来实现的一种技术,它使得网页可以动态地显示一个浮动窗口,并在窗口弹出时覆盖页面其他部分,提高用户的注意力焦点。 首先,让我们了解...

    漂浮鼠标显示div

    在这个场景中,我们将创建一个隐藏的div,当鼠标移动到特定元素上时,这个div会被显示出来。 接着,我们引入JavaScript,尤其是jQuery库,来实现动态效果。这里出现了两个jQuery相关的文件:`jquery-1.3.2.min.js`...

    div弹出层,根据参数不同div层显示不同内容

    本文将详细探讨如何利用`div`元素实现动态弹出层,并根据传入的不同参数显示不同的内容。这在交互式用户体验设计中非常常见,例如,用于展示详细信息、提供用户确认或展示各种警告消息。 首先,我们要理解`div`的...

    DIV遮罩层 div div

    通常,这个`&lt;div&gt;`元素被设置为绝对定位(`position: absolute`),并覆盖在整个页面之上,其宽度和高度根据页面的实际大小动态调整,以确保遮罩层可以完全覆盖页面的所有内容。遮罩层的背景色一般设为半透明,以...

    javascript DIV隐藏、显示 弹出式窗口样式

    隐藏和显示`&lt;div&gt;`通常涉及到修改`style.display`属性。默认情况下,`&lt;div&gt;`的`display`属性为`block`,意味着它会占据一整行。如果将其设置为`none`,则该`&lt;div&gt;`将不再占用任何空间,即被隐藏。例如: ```...

    DIV_CSS图片缩略显示

    - 隐藏焦点图片,推测是为了解决显示上的延迟问题。 #### 四、总结 本文通过详细的分析和解释,介绍了如何使用DIV_CSS技术实现图片缩略显示。通过设置不同的CSS样式和JavaScript逻辑,我们可以轻松地实现图片的...

    当鼠标悬停在文本上面的时候显示相对位置的div

    标题“当鼠标悬停在文本上面的时候显示相对位置的div”描述了一种常见的用户界面(UI)设计技术,即使用JavaScript或者CSS来实现动态效果。这种效果使得当用户将鼠标光标悬停在特定文本上时,一个div元素会出现在...

    点击页面链接后根据参数调用后台方法,获取数据并显示数据到弹出div上

    要使div定位到链接下方,你需要考虑CSS布局和JavaScript的配合。可以使用绝对定位,并通过JavaScript获取链接的坐标,然后设置div的`top`和`left`属性。CSS样式和JavaScript定位部分需要结合实际的页面结构和样式来...

Global site tag (gtag.js) - Google Analytics