怎样在网页中实现WINDOWS资源管理器式界面?
在网页中模仿资源管理器式管理,怎么办. 问题点数：20、回复次数：6Top
1 楼net_lover（【孟子E章】）回复于 2001-07-16 12:12:54 得分 0
用JavaScript编写代码！！Top
2 楼prettywolf（多情自古空余恨,此恨绵绵无绝期）回复于 2001-07-16 13:35:59 得分 0
我知道用javascript,具体?
Top
3 楼net_lover（【孟子E章】）回复于 2001-07-16 16:36:44 得分 20
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=gb2312">
<script language="JavaScript1.2">
<!--
document.onmouseover = doDocumentOnMouseOver ;
document.onmouseout = doDocumentOnMouseOut ;
function doDocumentOnMouseOver() {
var eSrc = window.event.srcElement ;
if (eSrc.className == "item") {
window.event.srcElement.className = "highlight"; // change class
}
}
function doDocumentOnMouseOut() {
var eSrc = window.event.srcElement ;
if (eSrc.className == "highlight") {
window.event.srcElement.className = "item"; // change class
}
}
var bV=parseInt(navigator.appVersion);
NS4=(document.layers) ? true : false;
IE4=((document.all)&&(bV>=4))?true:false;
ver4 = (NS4 || IE4) ? true : false;
function expandIt(){return}
function expandAll(){return}
//-->
</script>
<script language="JavaScript1.2">
<!--
isExpanded = false;
function getIndex(el) {
ind = null;
for (i=0; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.id == el) {
ind = i;
break;
}
}
return ind;
}
function arrange() {
nextY = document.layers[firstInd].pageY + document.layers[firstInd].document.height;
for (i=firstInd+1; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.visibility != "hide") {
whichEl.pageY = nextY;
nextY += whichEl.document.height;
}
}
}
function initIt(){
if (NS4) {
for (i=0; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide";
}
arrange();
}
else {
tempColl = document.all.tags("DIV");
for (i=0; i<tempColl.length; i++) {
if (tempColl(i).className == "child") tempColl(i).style.display = "none";
}
}
}
function expandIt(el) {
if (!ver4) return;
if (IE4) {expandIE(el)} else {expandNS(el)}
}
function expandIE(el) {
whichEl = eval(el + "Child");
whichIm = event.srcElement;
if (whichEl.style.display == "none") {
whichEl.style.display = "block";
whichIm.src = "hdopen.gif";
}
else {
whichEl.style.display = "none";
whichIm.src = "hdclose.gif";
}
window.event.cancelBubble = true ;
}
function expandNS(el) {
whichEl = eval("document." + el + "Child");
whichIm = eval("document." + el + "Parent.document.images['imEx']");
if (whichEl.visibility == "hide") {
whichEl.visibility = "show";
whichIm.src = "hdopen.gif";
}
else {
whichEl.visibility = "hide";
whichIm.src = "hdclose.gif";
}
arrange();
}
function showAll() {
for (i=firstInd; i<document.layers.length; i++) {
whichEl = document.layers[i];
whichEl.visibility = "show";
}
}
function expandAll(isBot) {
newSrc = (isExpanded) ? "hdopen.gif" : "hdclose.gif";
if (NS4) {
document.images["imEx"].src = newSrc;
for (i=firstInd; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.id.indexOf("Parent") != -1) {
whichEl.document.images["imEx"].src = newSrc;
}
if (whichEl.id.indexOf("Child") != -1) {
whichEl.visibility = (isExpanded) ? "hide" : "show";
}
}
arrange();
if (isBot && isExpanded) scrollTo(0,document.layers[firstInd].pageY);
}
else {
divColl = document.all.tags("DIV");
for (i=0; i<divColl.length; i++) {
if (divColl(i).className == "child") {
divColl(i).style.display = (isExpanded) ? "none" : "block";
}
}
imColl = document.images.item("imEx");
for (i=0; i<imColl.length; i++) {
imColl(i).src = newSrc;
}
}
isExpanded = !isExpanded;
}
with (document) {
write("<STYLE TYPE='text/css'>");
if (NS4) {
write(".parent {font-size:9pt; color:black; text-decoration:none; margin-top: 5px; margin-bottom: 5px; position:absolute; visibility:hidden; color: black;}");
write(".child {text-decoration:none; font-size:9pt; position:absolute; visibility:hidden}");
write(".item { color: darkblue; text-decoration:none;}");
write(".regular {position:absolute; visibility:hidden}");
write("DIV { color:black; }")
}
else {
write(".child {font:9pt; display:none}");
write(".parent {font:9pt Times; color:black; font-weight:bold; text-decoration:none; margin-top: 5px; margin-bottom: 5px; color: black;}");
write(".item { color: darkblue; text-decoration:none;}");
write(".highlight { color: red; }");
write(".heada { font: 9pt;}");
write("DIV { color:black; }")
}
write("</STYLE>");
}
onload = initIt;
//-->
</script>
<base target="main">
<style>
<!--
A:link {text-decoration: none; color: 0000ff}
A:visited {text-decoration: none; color: 000088}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: ff0000}
-->
</style>
</head>
<body bgcolor="#ffffff">
<p><img src="hdtop3.gif" width="33" height="16"><a class="item" color="#FF8000">网络天地</a> </p>
<div id="elDrawParent" class="parent"><a href="#" class="item" onclick="expandIt('elDraw'); return false"><img name="imEx" src="hdclose.gif" border="0" width="33" height="14">LINUX</a></div>
<div id="elDrawChild" class="child"><img src="blank2.gif" width="49" height="14"> <a class="item" target="main" href="linux/ref.html">参考手册</a></div><div id="elTwoParent" class="parent"><a class="item" href="#"
onclick="expandIt('elTwo'); return false">
<img name="imEx" src="hdclose.gif" border="0" width="33" height="14">FreeBSD</a>
</div><div id="elTwoChild" class="child">
<img src="blank2.gif" width="49" height="14"> <a class="item" target="main"
href="freebsd/ref.html">参考手册</a><br>
</div><div id="elThreeParent" class="parent"><a class="item" href="#"
onclick="expandIt('elThree'); return false">
<img name="imEx" src="hdclose.gif" border="0" width="33" height="14">数据库</a>
</div><div id="elThreeChild" class="child">
<img src="blank2.gif" width="49" height="14"> <a class="item" target="main"
href="database/mysql/index.html">MYSQL</a><br>
<img src="blank2.gif" width="49" height="14"> <a class="item" target="main"
href="database/ref.html">其他</a><br>
</div>
<div id="elFour1Parent" class="parent"><a class="item" href="#"
onclick="expandIt('elFour1'); return false">
<img name="imEx" src="hdclose.gif" border="0" width="33" height="14">编程</a>
</div><div id="elFour1Child" class="child">
<img src="blank2.gif" width="49" height="14"> <a class="item" target="main"
href="program/ref.html" >参考手册</a><br>
</div>
<div id="elTwo2Parent" class="parent"><a class="item" href="#"
onclick="expandIt('elTwo2'); return false">
<img name="imEx" src="hdclose.gif" border="0" width="33" height="14">JAVA</a>
</div><div id="elTwo2Child" class="child">
<img src="blank2.gif" width="49" height="14"> <a class="item" target="main"
href="java/ref.html">参考手册</a><br>
</div>
</body>
</html>
然后做几个小的图片，打开和关闭的图片！Top
4 楼ldy（罗大佑）回复于 2001-07-16 17:49:23 得分 0
:)Top
5 楼prettywolf（多情自古空余恨,此恨绵绵无绝期）回复于 2001-07-16 20:28:16 得分 0
这么复杂
不过还是给分吧。
顺便邦我看看这个为什么不行？
<html>
<head>
<title>在网页中实现资源管理器式管理</title>
<style >
.div1{display:none}
.div2{display:none}
a{text-decoration:none;font-size:24px}
</style>
</head>
<body>
<a href="#"
onclick="javascript:if (div1.style.display=='none')
div1.style.display='block'; else div1.style.display='none';
">
电脑报</a><br>
<div id="div1" class="div1" >
综合报道<br>
软件世界<br>
网络与通信<br>
<a href="#" onclick="javascript:if (div2.style.display=='none')
div2.style.display='block'; else div2.style.display='none';" >
其它版面</a><br>
</div>
<div id="div2" class="div2" >
游戏广场<br>
硬件天地<br>
</div>
</body>
</html>
为什么一进去要点两次才打开？
Top
6 楼prettywolf（多情自古空余恨,此恨绵绵无绝期）回复于 2001-07-16 20:32:10 得分 0
TO 孟子E章：
答对后面这个再加10分。
Top
