<!--解读 M$ 源代码:JavaScript + CSS 实现动态菜单显示-->
<!--Default.htm-->
<!--小弟的 JavaScript 水平实在有够差劲,故以下注解均为个人理解,有疏漏及不当之处还请各位大虾指正-->
<!--以下源代码来源于 M$ Windows 2000 Professional 安装光盘的 DISCOVER/EASY2USE 目录,更改之处见文档的最后注解-->
<!--有关“单位”与“集合”的定义,请参见文档后面的注解-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>更易使用</TITLE><!--注1-->
<SCRIPT language="javascript">
var whichIm;
var varColor = "DDEEFF";
document.onmouseover = mouseOver;
document.onmouseout = mouseOut;
document.onmousedown = mouseDown;
document.onmouseup = mouseUp;
function mouseOver() {
var vSrc = window.event.srcElement;
if (vSrc.className == "child2" || vSrc.className == "child3" || vSrc.className == "parent")/*判断对象是否为“单位”*/ {
fColor = vSrc.style.backgroundColor;
vSrc.style.backgroundColor = varColor;
/*注2*/
}
}
function mouseOut() {
var vSrc = window.event.srcElement;
if (vSrc.className == "child2" || vSrc.className == "child3" || vSrc.className == "parent") {
vSrc.style.backgroundColor = fColor;
/*注2*/
}
}
function mouseDown() {
var vSrc = window.event.srcElement;
divColl=document.all.tags("DIV");
for (i=0; i < divColl.length; i++) {
if (((divColl(i).className == "parent")||(divColl(i).className == "child2")||(divColl(i).className == "child3"))&&(divColl(i).id != vSrc.id))/*注3*/ {
divColl(i).style.backgroundColor = "";
}
if (((divColl(i).className == "parent")||(divColl(i).className == "child2")||(divColl(i).className == "child3"))&&(divColl(i).id == vSrc.id))/*注3*/ {
divColl(i).style.backgroundColor = "#FFFFFF";
fColor = "#FFFFFF";
}
}
}
function mouseUp() {
var vSrc = window.event.srcElement;
if (vSrc.className == "child2" || vSrc.className == "child3" || vSrc.className == "parent") {
/*注2*/
}
}
//<!-- Navigation functions -->
function closeAll(el) {
divColl=document.all.tags("DIV");
for (i=0; i<divColl.length; i++) {
felEl=eval(el + "Child1");
if ((divColl(i).className == "child1") && (felEl != divColl(i))) {
divColl(i).style.display="none";
}
}
}
function navOnload() {
divColl=document.all.tags("DIV");
for (i=0; i< divColl.length; i++) {
if (divColl(i).className == "child1" || divColl(i).className == "child4") {
if (divColl(i).className == "child4" && divColl(i).style.display == "block") {
whichArrow = eval(divColl(i).Arr);
whichArrow.src = "../images/tocuparw.gif";
}
}
}
}
function expandIE(el) {
whichEl=eval(el + "Child1");
closeAll(el);
if (whichEl.style.display != "block") {
whichEl.style.display = "block";
whichEl.isExpanded=true;
}/*注4*/else {
whichEl.style.display = "none";
whichEl.isExpanded=false;
}/*注4*/
}
function expandIE2(el) {
whichEl=eval(el + "Child3");
whichIm=event.srcElement;
if (whichEl.style.display != "block") {//当被点击对象没有展开下级菜单时,展开下级菜单
whichEl.style.display = "block";
whichEl.isExpanded=true;
whichArrow = eval(whichIm.Arr);
whichArrow.src = "../images/tocuparw.gif";
} else {//当被点击对象已经展开下级菜单时,隐藏下级菜单
whichEl.style.display="none";
whichEl.isExpanded=false;
whichArrow = eval(whichIm.Arr);
whichArrow.src = "../images/tocdnarw.gif";
}
}
</SCRIPT>
<!--注1-->
<style>
A:link
{
color:000000;
text-decoration: none;
}
A:visited
{
color:666666;
text-decoration: none;
}
Body
{
background-repeat:repeat-y ;
font-family:宋体,Arial;
}
.parent
{
position:relative;
display:block;
font-weight:bold;
font-size:9pt;
padding:1pt;
padding-left:8pt;
width:168px;
top:0;
cursor:hand;
margin-bottom:2;
}
.child1
{
display:none;
font-size:9pt;
width:168px;
padding-bottom:4pt;
cursor:hand;
margin-bottom:2;
}
.child2
{
display:block;
font-size:9pt;
padding:1pt;
width:168px;
padding-left:14pt;
cursor:hand;
margin-bottom:2;
}
.child3
{
display:block;
font-size:9pt;
padding:1pt;
padding-left:20pt;
width:168px;
cursor:hand;
margin-bottom:2;
}
.child4
{
display:block;
font-size:9pt;
width:168px;
cursor:hand;
margin-bottom:2;
}
.master
{
position:relative;
display:block;
padding:1pt;
width:168px;
padding-top:12px;
}
#Navigation
{
position:absolute;
top:101;
left:0;
z-index:1;
width:170px;
height:340px;
overflow:auto;
}
</style>
<BASE TARGET="SubMain">
</head>
<Body onload="navOnload();this.focus();" LEFTMARGIN="0" TOPMARGIN="0" bgcolor="White" background="bluetoc.gif" text="Black" link="Black" vlink="#005BAA">
<DIV ID="Navigation">
<DIV ID="MasterOne" CLASS="Master">
<A href="wrkwfile/mainwork.htm">
<DIV ID="Files" onkeypress="expandIE('etuOne');mouseDown()" onClick="expandIE('etuOne')" CLASS="parent">
处理文件
</DIV>
</A>
<DIV ID="etuOneChild1" CLASS="child1">
<A href="wrkwfile/trakdocs.htm">
<DIV onkeypress="expandIE2('etuTwo');mouseDown()" onClick="expandIE2('etuTwo')" ID="Track" CLASS="child2" Arr="Arrow1">
<IMG id="Arrow1" src="../images/tocdnarw.gif" width="9" height="9" border="0" alt="" align="middle" hspace="0">
跟踪文档
</DIV>
</A>
<DIV ID="etuTwoChild3" CLASS="child4" style="display:none" Arr="Arrow1">
<A href="wrkwfile/mynetwrk.htm">
<DIV ID="MyNet" CLASS="child3" onkeypress="mouseDown();">
网上邻居
</DIV>
</A><A href="wrkwfile/mydocs.htm">
<DIV ID="Mydocs" CLASS="child3" onkeypress="mouseDown();">
我的文档
</DIV>
</A><A href="wrkwfile/opensave.htm">
<DIV ID="Open" CLASS="child3" onkeypress="mouseDown();">
文件打开/另存为
</DIV>
</A><A href="wrkwfile/history.htm">
<DIV ID="Histroy" CLASS="child3" onkeypress="mouseDown();">
历史文件夹
</DIV>
</A>
</DIV>
<A href="wrkwfile/associat.htm">
<DIV ID="Assoc" CLASS="child2" onkeypress="mouseDown();">
关联文件类型
</DIV>
</A><A href="wrkwfile/imageman.htm">
<DIV ID="Imageman" CLASS="child2" onkeypress="mouseDown();">
处理图像
</DIV>
</A><A href="wrkwfile/rdyavprt.htm">
<DIV ID="Readily" CLASS="child2" onkeypress="mouseDown();">
管理打印
</DIV>
</A>
</DIV>
<A href="findinfo/mainfind.htm">
<DIV ID="Find" onKeypress="expandIE('etuThree');mouseDown()" onClick="expandIE('etuThree')" CLASS="parent">
查找信息
</DIV>
</A>
<DIV ID="etuThreeChild1" CLASS="child1">
<A href="findinfo/indexing.htm">
<DIV ID="Index" CLASS="child2" onkeypress="mouseDown();">
索引内容
</DIV [1] [2] [3] 下一页 |