有多级栏目的菜单树,点击一个栏目时,另一个栏目会合拢

jackroomage

浏览: 1223216 次
性别:
来自: 北京

最近访客更多访客>>

SzBenQ6917

sh1818

bruce_ma

sjhjane

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javaScript

<%@ page language="java" contentType="text/html"
pageEncoding="utf-8"%>
<html>
<head>
<title>树状列表</title>

<body class="panel" onLoad="init();">
<div id="sub_tabs" class="sub_tabs"></div>
<div id="body">

<ul id="menu">

<li class="L1"><a href="javascript:c('m01');" id="m01"><span><img src="" align="absMiddle"/> 路政报表</span></a></li>
<ul id="m01d" style="display:none;" class="U1">
<li class="L21"><a href="javascript:c('f40');" id="f40"><span><img src="" align="absMiddle"/> 路政报表1</span></a></li>
<ul id="f40d" style="display:none;">
<li class="L3"><a href="javascript:c('f42');"><span><img src= align="absMiddle"/> 报表内容</span></a></li>
<ul id="f42d" style="display:none;"><li class="L4" ><a href="#"><span><img src= align="absMiddle"/>子报表内容</span></a></li></ul>
<li class="L3"><a href="#"><span><img src="" align="absMiddle"/> 报表内容</span></a></li>
</ul>
<li class="L21"><a href="javascript:c('f41');" id="f41"><span><img src="" align="absMiddle"/> 路政报表2</span></a></li>
<ul id="f41d" style="display:none;">
<li class="L3"><a href="#"><span><img src="" align="absMiddle"/>报表内容</span></a></li>
<li class="L3"><a href="#"><span><img src="" align="absMiddle"/>报表内容</span></a></li>
</ul>
<li class="L22"><a href="#"><span><img src="" /> 报表内容</span></a></li>
<li class="L22"><a href="#"><span><img src="" /> 报表内容</span></a></li>
<li class="L22"><a href="#"><span><img src="" /> 报表内容</span></a></li>
</ul>


<li class="L1"><a href="javascript:c('m03');" id="m03"><span><img src="" align="absMiddle"/> 路政报表</span></a></li>
<ul id="m03d" style="display:none;" class="U1">
<li class="L21"><a href="javascript:c('f42');" id="f42"><span><img src= align="absMiddle"/> 路政报表1</span></a></li>
<ul id="f42d" style="display:none;">
<li class="L3"><a href="#"><span><img src="" align="absMiddle"/> 报表内容</span></a></li>
<li class="L3"><a href="#"><span><img src="" align="absMiddle"/> 报表内容</span></a></li>
</ul>
<li class="L21"><a href="javascript:c('f43');" id="f43"><span><img src= align="absMiddle"/> 路政报表2</span></a></li>
<ul id="f43d" style="display:none;">
<li class="L3"><a href="#"><span><img src= align="absMiddle"/>报表内容</span></a></li>
<li class="L3"><a href="#"><span><img src= align="absMiddle"/>报表内容</span></a></li>
</ul>
<li class="L22"><a href="#"><span><img src="" /> 报表内容</span></a></li>
<li class="L22"><a href="#"><span><img src="" /> 报表内容</span></a></li>
<li class="L22"><a href="#"><span><img src="" /> 报表内容</span></a></li>
<li class="L22"><a href="#"><span><img src="" /> 报表内容</span></a></li>
<li class="L22"><a href="#"><span><img src="" /> 报表内容</span></a></li>
</ul>

</ul>

</div>
<script language="JavaScript">
window.onresize=function()
{
   if(!parent.$('frame1')) return;
   var rows = parent.$('frame1').rows.split(",");
   if(rows.length < 2 || rows[1]!="*") return;
   $("bottom_center").style.width = "0px";

   if(document.body.clientHeight > $("sub_tabs").clientHeight+$("bottom").clientHeight)
      $("body").style.height=(document.body.clientHeight-$("sub_tabs").clientHeight-$("bottom").clientHeight)+"px";

   var widthTotal = parseInt($("bottom").clientWidth);
   var widthLeft = parseInt($("bottom_left").clientWidth);
   var widthRight = parseInt($("bottom_right").clientWidth);
   if(!isNaN(widthTotal) && !isNaN(widthLeft) && !isNaN(widthRight))
   {
      $("bottom_center").style.width = widthTotal - widthLeft - widthRight + "px";
   }
};
function init()
{
   window.onresize();
}

var sub_menu="1";
function view_menu(id)
{
   set_current("");
   if($("menu").innerHTML.toLowerCase().indexOf("<li") >= 0)
      $("menu_code_"+sub_menu).innerText=$("menu").innerHTML;

   if($("menu_code_"+id).innerText=="" || isUndefined($("menu_code_"+id).innerText))
   {
      $("menu").innerHTML="<img src='/images/loading.gif' align='absMiddle'> 加载中，请稍候……";
      if(id==2) args="MENU_TYPE=SHORTCUT&OA_SUB_WINDOW=0&MENU_DISPLAY=";
      else if(id==3) args="MENU_TYPE=OA&OA_SUB_WINDOW=0";
      else if(id==4) args="MENU_TYPE=FAV&OA_SUB_WINDOW=0";
      else if(id==5) args="MENU_TYPE=FIS&OA_SUB_WINDOW=0";
      else args="OA_SUB_WINDOW=0";
      _get("menu_code.php", args, update_menu, true);
   }
   else
   {
      $("menu").innerHTML=$("menu_code_"+id).innerText;
   }

   if($('link_'+sub_menu))
      $('link_'+sub_menu).className="";

   $('link_'+id).className="active";
   sub_menu=id;
   setCookie("MENU_UI_1", id);
   if(id == 5)
   {
      openURL("/t9apps/common/frame.jsp");
   }
}
function update_menu(req)
{
   if(req.status == 200)
   {
      if(req.responseText=="")
         $("menu").innerHTML="<div style='padding:10px;'>无可访问菜单</div>";
      else
      {
         $("menu").innerHTML=req.responseText;
         if(sub_menu == 2) c('mMENU_SHORTCUT');
      }
   }
   else
   {
      $("menu").innerHTML="<div style='padding:10px;'>错误："+req.status+"</div>";
   }
}

var cur_id="",cur_expand="";
var flag=0,sflag=0;

//-------- 菜单点击事件 -------
function c(id)
{
var targetid,targetelement;
var strbuf;

var el=$(id);
if(!el)
     return;
//-------- 如果点击了展开或收缩按钮---------
targetid=el.id+"d";
targetelement=$(targetid);
var expandUL=$(cur_expand+"d");
var expandLink=$(cur_expand);

if (targetelement.style.display=="none")
{
     if(expandUL && expandLink && el.id.substr(0,1)=="m")
     {
        expandLink.className="";
        expandUL.style.display='none';
     }
     if(el.id.substr(0,1)=="m")
        cur_expand=el.id;
     el.className="active";
     targetelement.style.display='';

     menu_flag=0;
     //$("expand_link").src="images/green_minus.gif";
}
else
{
     el.className="";
     targetelement.style.display="none";

     menu_flag=1;
     //$("expand_link").src="images/green_plus.gif";
     var links=document.getElementsByTagName("A");
     for (i=0; i<links.length; i++)
     {
       el=links[i];
       if(el.parentNode.className.toUpperCase()=="L1" && el.className=="active" && el.id.substr(0,1)=="m")
       {
          menu_flag=0;
         // $("expand_link").src="images/green_minus.gif";
          break;
       }
     }
}
}
//-------- 打开网址 -------
var $ = function(id) {return document.getElementById(id);};
var userAgent = navigator.userAgent.toLowerCase();
var is_opera = userAgent.indexOf('opera') != -1 && opera.version();
var is_ie = (userAgent.indexOf('msie') != -1 && !is_opera) && userAgent.substr(userAgent.indexOf('msie') + 5, 3);
function MouseOverBtn(){event.srcElement.className+="Hover";}
function MouseOutBtn() {event.srcElement.className=event.srcElement.className.substr(0,event.srcElement.className.indexOf("Hover"));}
function CorrectButton()
{
   var inputs=document.getElementsByTagName("INPUT");
   for(var i=0; i<inputs.length; i++)
   {
      var el = inputs[i];
      var elType = el.type.toLowerCase();
      var elClass = el.className.toLowerCase();
      var elLength = Math.ceil(el.value.replace(/[^\x00-\xff]/g,"**").length/2);
      if(elType!="button" && elType!="submit" && elType!="reset" || elClass!="bigbutton"&&elClass!="smallbutton")
         continue;

      if(elLength<=3)
         el.className+="A";
      else if(elLength==4)
         el.className+="B";
      else if(elLength>=5 && elLength<=7)
         el.className+="C";
      else if(elLength>=8 && elLength<=11)
         el.className+="D";
      else
         el.className+="E";

      if(is_ie)
      {
         el.attachEvent("onmouseover", MouseOverBtn);
         el.attachEvent("onmouseout", MouseOutBtn);
      }
   }
}
if(is_ie)
   window.attachEvent("onload", CorrectButton);
else
   window.addEventListener("load", CorrectButton,false);
</script>
</body>
</html>

分享到：

网站首页js幻灯片代码 | 一个伸缩形的网页菜单，竖着排列，点一级主 ...

2011-07-10 22:21
浏览 1420
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论