`
mlzboy
  • 浏览: 702248 次
  • 性别: 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设置contentEditable=true时,重置其内容后无法光标定位

    最近在做一评论功能,需要能够评论表情,那 contentEditable 这个属性就首当其冲了,结果,问题来了… 首先 评论区 长这样:   当输入内容超过限制的时候,清空用户输入超过限制后的内容。   这个好说… 但是清空...

    c#本身的树,在div无法全部显示的区域内时,可以定位了

    c#本身的TreeView在网页的div中无法全部显示时,点+或者选择节点同时回调服务器方法加载选择的节点的子节点,如果不用脚本定位,则div的滚动条回滚动到初始位置,那么就需要涉及到定位技术。 如果不涉及服务器回调,...

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

    position定位如果有重叠的时候,z-index愈大,就显示在最上面 此时我们就可以设置div的css样式z-index:99999,那么该div就显示在最前面

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

    点击页面链接后根据参数调用后台方法,获取数据并显示数据到弹出div上 包含了js调用后台方法,点击链接显示的div定位到链接后面位置

    div的position属性

    由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动...

    CSS鼠标悬浮DIV后显示DIV外的按钮解决方法

    昨天写样式遇到个问题,如何让鼠标悬浮DIV后,显示DIV外的按钮,可以点击到按钮。 效果如下: 问题: 在DIV hover时候将按钮设为display: block,这是很直接的想法,但是这有个问题,就是在悬浮出现按钮后,鼠标要...

    DIV+CSS.ppt

    主要学会: 一、DIV+CSS的概述 二、盒子模型 三、css中的定位与显示(相对定位、绝对定位等等) 四、div+css中常见的错误

    DIV可编辑模式在光标位置插入内容

    NULL 博文链接:https://canlynet.iteye.com/blog/2340751

    html5定位并在百度地图上显示的示例

    在开发移动端 web 或者webapp时,使用百度地图 API 的过程中,经常需要通过手机定位获取当前位置并在地图上居中显示出来,这就需要用到html5的地理定位功能。 复制代码代码如下:navigator.geolocation....

    《精通CSS+DIV网页样式与布局》光盘源码

     第10章 理解CSS定位与div布局   10.1 div 标记与 span 标记  10.2 盒子模型  10.3 元素的定位   10.4 定位实例一:轻轻松松给图片签名   10.5 定位实例二:文字阴影效果   第11章 CSS+div布局...

    html—div固定

    html 基础应用 div层在浏览器的定位显示

    精通CSS.DIV.网页样式与布局 源码

     第10章 理解CSS定位与div布局   10.1 div 标记与 span 标记  10.2 盒子模型  10.3 元素的定位   10.4 定位实例一:轻轻松松给图片签名   10.5 定位实例二:文字阴影效果   第11章 CSS+div...

    jquery鼠标放上去显示悬浮层即弹出定位的div层

    主要介绍了使用jquery实现的鼠标放上去显示悬浮层即弹出定位的div层,需要的朋友可以参考下

    IE6中DIV使用了relative不定义宽度导致right定位误差

    老是碰到在IE6中显示总是比自己定义的right要小,没时间想那么多迫不得已就使用了hack方法解决,于是晚上闲余时特意测试了一下,最后终于找到原因之所在了:IE6中如果使用absolute标签的父级DIV(此DIV使用了...

    精通CSS+DIV网页样式与布局视频教材

    第10章 理解CSS定位与div布局 10.1 div标记与span标记 10.1.1 概述 10.1.2 div与span的区别 10.2 盒子模型 10.2.1 盒子模型的概念 10.2.2 border 10.2.3 padding 10.2.4 margin 10.3 ...

    利用定位来显示垂直局中的图片

    不用table,纯div+css利用定位来显示垂直局中的图片

    vue+高德地图实现地图搜索及点击定位操作

    最近有个需求是实现一个使用地图搜索定位的功能,在网上参考了下其他的文章,感觉不是很完善,自己整理了一下,可以实现点击定位,搜索列表定位等功能,可能有些地方是多余的,需要的自己看着改下 [removed]...

    高德地图显示定位地点,设置上下左右边框距离

    高德地图显示定位地点,设置上下左右边框距离 高德地图显示定位地点,设置上下左右边框距离

    JavaScript与Div对层定位和移动获得坐标的实现代码

    1:移动图层 获得点的x轴y轴坐标,从而进行绝对定位(注意:竖拉框会影响 x 轴 y 轴坐标值) 代码如下: var x,y,z,down=false,obj function init(){ obj=event.srcElement //事件触发对象 obj.setCapture() //设置属于...

    Div+Css实现图层固定,吊窗

    在页面中,经常会遇到这样的效果,一个图层总是在某一个位置,无论滚动条滚动与否,这个Div始终都在这个位置显示。刚开始以为是用js实现的,确实,可以利用js去实现,但是在css中有更好的方法。利用position属性...

Global site tag (gtag.js) - Google Analytics