zoukankan
html css js c++ java
Div显示/隐藏
<
style
type
="text/css"
>
.myInput
{
}
{
border
:
1px solid cadetblue
;
font-size
:
9pt
;
font-family
:
Tahoma,Courier New
;
padding-left
:
2px
;
padding-right
:
2px
;
}
.center
{
}
{
left
:
50%
;
top
:
50%
;
z-index
:
1
;
}
</
style
>
=================================
<
script
language
="javascript"
type
="text/javascript"
>
<!--
//
显示隐藏/隐藏附件列表
function
showDiv()
{
var
objDiv
=
document.getElementById(
"
divAnnexList
"
);
var
objLnk
=
document.getElementById(
"
lnk
"
);
if
(objDiv
==
"
undefined
"
)
return
;
if
(objDiv.style.display
==
"
none
"
)
{
showMenu(objLnk,objDiv);
//
objLnk.innerHTML = "隐藏附件列表";
}
else
{
hideMenu(objDiv);
//
objLnk.innerHTML = "显示附件列表";
}
}
//
显示附件列表
var
outDiv;
var
outObj;
var
displayTip
=
"
隐藏附件列表
"
;
var
hiddenTip
=
"
显示附件列表
"
;
function
showMenu(spnobj, hdnDiv)
{
outDiv
=
hdnDiv;
outObj
=
spnobj;
outObj.innerHTML
=
displayTip;
var
selstyle
=
(hdnDiv).style;
var
ttop
=
spnobj.offsetTop;
var
tleft
=
spnobj.offsetLeft;
var
thei
=
spnobj.clientHeight;
while
(spnobj
=
spnobj.offsetParent)
{
ttop
+=
spnobj.offsetTop;
tleft
+=
spnobj.offsetLeft;
}
if
((ttop
+
thei
+
4
+
selstyle.offsetHeight)
>
(document.body.scrollTop
+
document.body.offsetHeight)
&&
(selstyle.offsetHeight)
<
(ttop
-
1
))
{
selstyle.top
=
ttop
-
1
-
selstyle.offsetHeight;
//
超出边界时
}
else
{
selstyle.top
=
ttop
+
thei
+
16
;
}
selstyle.left
=
tleft;
selstyle.zIndex
=
1000
;
selstyle.display
=
'';
}
//
隐藏附件列表
function
hideMenu(sellayer)
{
outObj.innerHTML
=
hiddenTip;
if
(sellayer
!=
null
)
sellayer.style.zIndex
=-
1
;
sellayer.style.display
=
'none';
}
document.onclick
=
show;
function
show(e)
{
if
(
!
document.all)
{
var
srcEl
=
e.srcElement
?
e.srcElement : e.target;
if
(srcEl
!=
outDiv
&&
srcEl
!=
outObj)
{
if
(outDiv
&&
outDiv
!=
'undefined')
{
hideMenu(outDiv);
}
}
}
else
{
with
(window.event)
{
if
(event.srcElement
!=
outDiv
&&
event.srcElement
!=
outObj)
{
if
(outDiv
&&
outDiv
!=
'undefined')
{
hideMenu(outDiv);
}
}
}
}
}
//
-->
</
script
>
=============================================
<
table
width
="100%"
height
="35"
border
="0"
>
<
tr
>
<
td
height
="28"
><
input
type
="file"
name
="accessories2"
class
="myInput"
size
="55"
>
<
input
type
="button"
value
="上传"
class
="btn3_mouseout"
onmouseover
="this.className='btn3_mouseover'"
onmouseout
="this.className='btn3_mouseout'"
onmousedown
="this.className='btn3_mousedown'"
onmouseup
="this.className='btn3_mouseup'"
onclick
="javascript:location.replace('add_apply.jsp?actionName=InsertAccessoriesAllFile&applyid=<%= this.value("
apply_id") %
>
');">
<
a
id
="lnk"
href
="#lnk"
onclick
="javascript:showDiv();"
>
显示附件列表
</
a
>
</
td
>
</
tr
>
</
table
>
<!--
// 附件列表div
-->
<
div
class
="center"
id
="divAnnexList"
style
="100%; display:none; Z-INDEX: -1; POSITION: static;"
>
<
table
>
<
caption
align
="left"
>
附件列表:
<
hr
><
caption
>
<
exp:dataview
id
="listAccessories"
>
<%
CommonVO vo
=
( CommonVO )request.getAttribute(
"
listAccessories.vo
"
);
%>
<
tr
>
<
td
><
a
href
="#"
onclick
="javascript:location.replace('framework/common/download.jsp?subject=$bigtext_subject$');"
>
$subject$
</
a
></
td
>
<
td
>
<
a
href
="#"
onclick
="javascript:location.replace('add_apply.jsp?actionName=doDelAccessories&AccessoriesId=$bigtext_subject$');"
>
删除
</
a
></
td
>
</
tr
>
</
exp:dataview
>
</
table
>
</
div
>
<!--
附件列表div //
-->
查看全文
相关阅读:
vue-动画
vue笔记-路由,组件
自定义键盘信息
自定义指令
vue-笔记2
轻松搭建基于 Serverless 的文档图片在线转换服务
轻松搭建基于 SpringBoot + Vue 的 Web 商城应用
一小时快速搭建基于阿里云容器服务-Kubernetes的Web应用
阿里云正式推出内容平台“云栖号”:全面助力企业和个人上云决策
云原生安全-更安全的密文管理 Vault on ACK
原文地址:https://www.cnblogs.com/ding0910/p/624080.html
最新文章
PostgreSQL可视化客户端工具
数据的定时脱敏
javaer有福了,基于Web的mysql数据库管理工具TreeSoft发布了。
快速导出云服务器mysql的表数据
云数据库远程连接管理的解决办法
大数据分析处理必备工具
mongodb远程连接访问
python学习笔记-控制流(if for while break continue)
robot framework-tags(标签)实例
robot framework-断言
热门文章
robot framework-接口测试实例一
3XX重定向
Requests Header | Http Header
robot framework学习笔记之十一--第三方库requests详解
robot framework学习笔记之十-模板
Git初识
robot framework踩坑记录
vue-路由多层
vue-路由
vue-父子组件
Copyright © 2011-2022 走看看