JS的滑动折叠菜单

以下是代码片段:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0030)http://127.0.0.1/left-main.jsp -->
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>BODY {
   MARGIN-TOP: 0px; MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px
}
</STYLE>

<STYLE>TABLE {
   FONT-SIZE: 12px; CURSOR: default; COLOR: #330000
}
TD {
   TEXT-ALIGN: center
}
.clicked {
   BORDER-RIGHT: #c0c0c0 1px inset; BORDER-TOP: #c0c0c0 1px inset; BORDER-LEFT: #c0c0c0 1px inset; BORDER-BOTTOM: #c0c0c0 1px inset
}
.mouseon {
   BORDER-RIGHT: black 1px outset; BORDER-TOP: white 1px outset; BORDER-LEFT: white 1px outset; BORDER-BOTTOM: black 1px outset
}
.tab {
   BORDER-LEFT-COLOR: #808080; BORDER-BOTTOM-COLOR: black; WIDTH: 100%; COLOR: black; BORDER-TOP-COLOR: #808080; BACKGROUND-COLOR: #5a82d6; BORDER-RIGHT-COLOR: black
}
.tab {
   BORDER-RIGHT: #aaa 1px solid; WIDTH: 100%; COLOR: #fff; BORDER-BOTTOM: #aaa 1px solid; HEIGHT: 20px; BACKGROUND-COLOR: #5a82d6
}
.button {
   WIDTH: 16px; POSITION: absolute; HEIGHT: 16px
}
.buttonmouseon {
   BORDER-RIGHT: black 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; BORDER-BOTTOM: black 1px solid
}
.buttonclicked {
   BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: #ffffff 1px solid
}
</STYLE>

<META content="MSHTML 6.00.2900.2912" name=GENERATOR></HEAD>
<BODY id=bodycontents bgColor=#ffffff leftMargin=0 topMargin=0 scroll=no>
<SCRIPT language=JScript.Encode>
var clickedButton
var clickedImage
var oldButton
var oldImage
var nowButtonIndex
var nowBarIndex
var nowBar
var numButton
var bds
var bus

grayScale = true
indexOfBar = new Array
underBarHeight = 0
numBar = 0

features = "toolbar=yes, location=yes, status=yes, menubar=yes, scrollbars=yes, resizable=yes"

var mainhref

function addbar(text, href, target)
{
return new bar(text, href, target)
}

function bar(text, href, target)
{
indexOfBar[numBar] = this
this.text = text
this.href = href
this.target = target
this.index = numBar++
this.children = new Array
this.nChildren = 0
}

function addbutton(parent, text, href, target, image, status)
{
parent.children[parent.nChildren++] = new button(text, href, target, image, status)
}

function button(text, href, target, image, status)
{
this.text = text
this.href = href
this.target = target
this.image = image
this.status = status
}

function initializeBar(selectButton)
{
var i = 0
with(document)
     {
     for (i = 0; i < numBar; i++)
         {
         write("<table id='table" + i + "' onclick=clickOnBar(" + i +") class=tab onmouseover=style.color=txtovercolor onmouseout=style.color=txtoutcolor border=0 cellspacing=0 cellpadding=0 >"
              + "<tr><td>" + indexOfBar[i].text + "</td></tr></table>")
         indexOfBar[i].tabObj = all["table" + i].style
         }
     write("<table height=7><tr><td></td></tr></table>")
     }
     
   for (i = 0; i < numBar; i++)
    {
       nowBarIndex = i
       showitem(indexOfBar[i])
    }
   nowBar = indexOfBar[numBar - 1]
   nowBarIndex = numBar - 1
   for(i = 0; i < numBar - 1; i++) displayButton(indexOfBar[i], "none")
   numButton = nowBar.nChildren
   lastButton = document.all["s" + nowBarIndex + (numButton - 1)]
   maxHeight = lastButton.offsetTop + 55
   nowButtonIndex = 0
   bds = buttondown.style
   bus = buttonup.style
   fcs = frameClose.style
   fcs.left = bodycontents.clientWidth - 16
   fcs.display = ""
   if(bodycontents.clientHeight < maxHeight)
      {
         bds.top = bodycontents.clientHeight - 20
         bds.left = bodycontents.clientWidth - 20
         bds.display = ""
      }
   if(selectButton)
   {
      if (grayScale)
      {
         clickedImage = document.images["imgs" + selectButton]
         clickedImage.style.filter = 0
      }
      clickedButton = document.all["s" + selectButton]
      clickedButton.className = "clicked"
   }
   pathName = document.location.href
   pathName = pathName.substring(0, pathName.lastIndexOf("/") + 1) + "image/display.gif"
}

function showitem(bar)
{
   var i = 0
   nChildren = bar.nChildren
   for (i = 0; i < nChildren; i++)
    {
       button = bar.children[i]
       target = (button.target)? "' target='" + button.target : ""
       Status = (button.status)? "' status='" + button.status : ""
       filter = (grayScale)? "id='imgs" + nowBarIndex + i + "' style='filter:gray' " : ""
       with(document)
      {
          write("<table id='s" + nowBarIndex + i + "' url='" + button.href + target + Status + "' cellspacing=0 cellpadding=0 width=37 height=37 onmouseover=mouseon(this) onmouseout=mouseout(this) onmousedown=mousedown(this) onmouseup=mouseup(this)>"
                 + "<tr><td><img style='cursor:hand;' " + filter + "src='" + button.image + "'></td></tr></table>"
                 + "<table id='label" + nowBarIndex + i + "'><tr><td>" + button.text + "</td></tr><tr height=6><td></td></tr></table>")
         button.imgObj = all["s" + nowBarIndex + i].style
         button.labObj = all["label" + nowBarIndex + i].style
      }
   }
}

function displayButton(bar, displayStyle)
{
nChildren = bar.nChildren
for (i = 0; i < nChildren; i++)
    with (bar.children[i])
         {
         imgObj.display = displayStyle
         labObj.display = displayStyle
         }
}

function clickOnBar(index)
{
if (nowBar != indexOfBar[index])
   {
      for(i = index; i > nowBarIndex; i--)
          with (indexOfBar[i].tabObj)
               {
               position = "relative"
               left = 0
               top = ""
               }
      for (i = index + 1; i <= nowBarIndex; i++)
          with (indexOfBar[i].tabObj)
               {
               position = "absolute"
               left = 0
               top = bodycontents.clientHeight - 20 * (numBar - i)
               }
   
      displayButton(nowBar, "none")
   
      nowBar = indexOfBar[index]
      nowBarIndex = index
      displayButton(nowBar, "")
      underBarHeight = 20 * (numBar - nowBarIndex - 1)
      numButton = nowBar.nChildren
      lastButton = document.all["s" + nowBarIndex + (numButton - 1)]
      maxHeight = lastButton.offsetTop + 55 + underBarHeight
      window.onresize()
      nowButtonIndex = 0
      bus.display = "none"
   }

if(nowBar.href)
   {
      window.open(nowBar.href, nowBar.target)
      if (clickedButton)
      {
         clickedButton.className = ""
         clickedButton = ""
         if (grayScale)
               {
                  clickedImage.style.filter = "gray"
                  clickedImage = ""
               }
         }
   }
}

function mouseon(button)
{
if (clickedButton != button)
   {
   button.className = "mouseon"
   if (grayScale) document.images["img" + button.id].style.filter = 0
   }
if (button.status) window.status = button.status
}

function mouseout(button)
{
if (clickedButton != button)
   {
   button.className = ""
   if (grayScale) document.images["img" + button.id].style.filter = "gray"
   }
window.status = ""
}

function mousedown(button)
{
if (window.event.button == 1)
   {
   oldButton = clickedButton
   clickedButton = button
   if (grayScale)
      {
      oldImage = clickedImage
      clickedImage = document.images["img" + button.id]
      }
   button.className = "clicked"
   }
}

function mouseup(button)
{
if (window.event.button == 1)
   {
   if (oldButton && oldButton != clickedButton)
      {
      oldButton.className = ""
      if (grayScale) oldImage.style.filter = "gray()"
      }
   window.open(button.url,(window.event.shiftKey)?"_blank":button.target,features);
   }
}

function upclick()
{
if (nowButtonIndex)
   {
   document.all["s" + nowBarIndex + --nowButtonIndex].style.display = ""
   document.all["label" + nowBarIndex + nowButtonIndex].style.display = ""
   maxHeight = lastButton.offsetTop + 55 + underBarHeight
   window.onresize()
   }
if (!nowButtonIndex) bus.display = "none"
}

function downclick()
{
if (nowButtonIndex < numButton - 1)
   {
   document.all["s" + nowBarIndex + nowButtonIndex].style.display = "none"
   document.all["label" + nowBarIndex + nowButtonIndex++].style.display = "none"
   if (bus.display = "none")
      {
      bus.top = 20 * (nowBarIndex + 1) + 5
      bus.left = bodycontents.clientWidth - 20
      bus.display = ""
      }
   maxHeight = lastButton.offsetTop + 55 + underBarHeight
   window.onresize()
   }
}

function window.onresize()
{
bodyHeight = bodycontents.clientHeight
bodyWidth = bodycontents.clientWidth
if (bodyHeight < maxHeight)
   {
   bds.top = bodyHeight - 20 - underBarHeight
   bds.left = bodyWidth - 20
   bds.display = ""
   }
else
   {
   if (bodyHeight > maxHeight + 66) upclick()
   bds.display = "none"
   }
bus.left = bodyWidth - 20
fcs.left = bodyWidth - 16
if (nowBarIndex < numBar - 1)
   for (i = numBar - 1; i > nowBarIndex; i--)
       indexOfBar[i].tabObj.top = bodyHeight - 20 * (numBar - i)
}

function document.onkeydown()
{
return false
}

function document.ondragstart()
{
return false
}

function document.onselectstart()
{
return false
}

function document.oncontextmenu()
{
return false
}

function document.onmousedown()
{
if (window.event.ctrlKey) location.reload()
}

function closeFrame()
{
frameClose.className = ""
window.parent.index.cols = "0,*"
window.parent.frames(1).document.body.innerHTML += "<button style='height: 15; width: 15; position: absolute; top: 10; left: 10' onclick=\"style.display = 'none'; window.parent.index.cols = '100,*'\"><img alt=显示 src=" + pathName + " width=19 height=18></button>"
mainhref = window.parent.frames(1).document.location.href
scout()
}

function scout()
{
with (window.parent.frames(1).document)
     if (location.href != mainhref && readyState == "complete")
        {
        window.parent.frames(1).document.body.innerHTML += "<button style='height: 15; width: 15; position: absolute; top: 10; left: 10' onclick=\"style.display = 'none'; window.parent.index.cols = '100,*'\"><img alt=显示 src=" + pathName + " width=19 height=18></button>"
        mainhref = location.href
        }
if (window.parent.index.cols == "0,*") setTimeout("scout()", 1000)
}

function window.onload()
{
window.onresize()
}
</SCRIPT>
<BUTTON class=button id=buttonup style="DISPLAY: none" onclick=upclick()><IMG
height=4 src="" width=7></BUTTON><BUTTON class=button id=buttondown
style="DISPLAY: none" onclick=downclick()><IMG height=4 src="" width=7></BUTTON>

<TABLE onmouseup=closeFrame() onmousedown="className = 'buttonclicked'"
id=frameClose onmouseover="className = 'buttonmouseon'" title=关闭
style="DISPLAY: none; VISIBILITY: hidden; POSITION: absolute; TOP: 3px"
onmouseout="className = ''" height=14 cellPadding=0 width=14>
  <TBODY>
  <TR>
    <TD><IMG height=7 src="left-main.files/127.0.0.htm"
width=8></TD></TR></TBODY></TABLE>
<CENTER>
<TABLE height=35 width=120 background=left-main.files/cur_user.jpg>
  <TBODY>
  <TR>
    <TD></TD></TR></TBODY></TABLE>
<SCRIPT language=JavaScript>

   txtoutcolor="#fff"
   txtovercolor="#ff0"
   
   tab1=addbar("用户自助服务")
addbutton(tab1,"修改用户信息","/app/usersrv/modify.jsp","right","images/1.gif","修改用户信息")
addbutton(tab1,"用户帮助","null","right","images/5.gif","用户帮助")
addbutton(tab1,"退出系统","/logout.jsp","right","images/3.gif","退出系统")
tab2=addbar("系统管理")
addbutton(tab2,"用户管理","/app/yh_gl/yhgl.jsp","right","images/5.gif","用户管理")
addbutton(tab2,"角色管理","/app/yh_gl/yhgl.jsp_","right","images/6.gif","角色管理")
tab3=addbar("稿件查询")
addbutton(tab3,"稿件查询","/app/common/gj_cx.jsp","right","images/11.gif","稿件查询")
tab4=addbar("作者稿件管理")
addbutton(tab4,"作者投稿","/app/zz_gl/zz_tg/setup1.jsp","right","images/16.gif","作者投稿")
addbutton(tab4,"我的稿件","/app/zz_gl/zz_txgg/txgg_list.jsp","right","images/7.gif","我的稿件")
tab5=addbar("编辑审稿")
addbutton(tab5,"编辑选稿","/app/bj_gl/bj_xzgj/xzgj.jsp","right","images/17.gif","编辑选稿")
addbutton(tab5,"编辑审稿","/app/bj_gl/bj_pg/pg_list.jsp","right","images/8.gif","编辑审稿")
tab6=addbar("副主编审稿")
addbutton(tab6,"副主编审稿","/app/fjb_gl/fjb_pg/pg_list.jsp","right","images/9.gif","副主编审稿")
addbutton(tab6,"副主编选稿","/app/fjb_gl/fjb_xzgj/xzgj.jsp","right","images/10.gif","副主编选稿")
tab7=addbar("主编审稿")
addbutton(tab7,"主编选稿","/app/zb_gl/zb_xzgj/xzgj.jsp","right","images/10.gif","主编选稿")
addbutton(tab7,"主编审稿","/app/zb_gl/zb_pg/pg_list.jsp","right","images/11.gif","主编审稿")
tab8=addbar("专家审稿")

   initializeBar("10");
</SCRIPT>

</CENTER></BODY></HTML>

 

From:http://firefox.net.cn/newforum/viewtopic.php?t=15596&view=previous

版权声明:
作者:Kiyo
链接:https://www.wkiyo.cn/html/2008-01/i409.html
来源:Kiyo's space
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>