左侧菜单

最新推荐文章于 2025-11-28 16:16:35 发布
最新推荐文章于 2025-11-28 16:16:35 发布 · 187 阅读 · 0
文章标签：

#EXT #json #Ajax #J# #脚本

自己写了一个菜单，不是很灵活，只支持到三层的树，使用了一点ext的template、util包的一些功能，效果可参看下面的效果图样(懒得再写假数据，把文字模糊了，咯咯)。主要是各菜单之间的样式切换及ext的template传对象参数时有点麻烦。

1、请求数据js脚本，使用了pototype的Ajax，当时脑子不知咋想的，愣是没想到用ext的.......如ext也是一样的。

/***  请求menu json串 *****/
 function loadMenu(url){
  var opt = {
        // Use POST
        method: 'post',
        // Asynchronous must set true
        asynchronous: true,
        onSuccess: function showlResponse(originalRequest) 
     { 
      var menus = eval("("+originalRequest.responseText+")");
      showAMenuList(menus.menu);
     },
        // Handle 404
        on404: function(t) {
            alert('Error 404: location "' + t.statusText + '" was not found.');
        },
        // Handle other errors
        onFailure: function(t) {
            alert('Error ' + t.status + ' -- ' + t.statusText);
        }
    }
    //设置等待效果
    var myGlobalHandlers = {
     onCreate: function(){
      // 等待特效
     },
   
     onComplete: function() {
      if(Ajax.activeRequestCount == 0){
       //Element.hide('DivSystemWorking');
       // alert("菜单绘制完毕");
      }
     }
  };
  Ajax.Responders.register(myGlobalHandlers);
  new Ajax.Request(url, opt);
 }

 

 json数据的格式如下

{menu:
      [{id:1,text:"菜单1",url:'',children:[
          {id:2,text:"菜单2",url:'',children:[
                 {id:3,text:"菜单3",url:''}
           ]},
           {id:4,text:"菜单4",url:'',children:[
                 {id:5,text:"菜单5",url:''}
           ]}
       ]},
        [{id:6,text:"菜单1",url:'',children:[
          {id:7,text:"菜单2",url:'',children:[
                 {id:8,text:"菜单3",url:''}
           ]},
           {id:9,text:"菜单4",url:'',children:[
                 {id:10,text:"菜单5",url:''}
           ]}
       ]}
    ]
}

 

2、 绘制一级菜单

function showAMenuList(menu_list){
		// 一级菜单数量
		var menuCount = menu_list.length;
		var tpl = new Ext.Template("<div id='{divId}' class='{cls}' onMouseOver='this.className=\"overDiv\"' onMouseOut='changeBG("+menuCount+")' onclick='show2MenuList({menu2},\"{menuId}\",\"menuInfo\","+menuCount+",{i},\"{link}\");'>"
							+"<img src='{icon}' style='border:0px;width:22px;height:19px'>&nbsp;&nbsp;&nbsp;{title}</div>\t"
							+"<div id='{cid}' style=\"display:none;height:245px;width:100%;overflow-y:auto\"></div>\t");
		for(var i=0; i<menuCount; i++){
			var menuId = menu_list[i].menuId;
			var link = menu_list[i].href;
			var title = menu_list[i].text;
			var icon = menu_list[i].icon;
			var id = menu_list[i].id;
		//	alert("aa: "+Ext.util.JSON.encode(menu_list[i].children));
			if(i==0){
					tpl.append('menuList', {divId:menuId+""+i,menuId:menuId,cid:"menuInfo"+i, menu2:Ext.util.JSON.encode(menu_list[i].children), cls:"selected", title:title, icon:icon, url:link, id:id, i:i});
					// 绘制二级菜单
					if(menu_list[i].children!=null && menu_list[i].children.length>0){
						var menu2 = menu_list[i].children;
						show2MenuList(menu2,menuId,"menuInfo",menuCount,i);
					}
			}else{
					tpl.append('menuList', {divId:menuId+""+i,menuId:menuId,cid:"menuInfo"+i, menu2:Ext.util.JSON.encode(menu_list[i].children), cls:"body", title:title, icon:icon, url:link, id:id, i:i});
			}
		}
}

 

3、绘制二级菜单

//二级菜单显示-- 参数: 菜单集合，父divID,子divId,循环的次数
	function show2MenuList(menu2,divId,cid,p_count,i,url){
	//	alert(typeof(menu2));
		//  保存选中状态
		if(selectedDiv!=null)
			selectedDiv.className = "body";
		selectedDiv = document.getElementById(divId+i);
		selectedDiv.className = "selected";
		selectedMenu=null;
		selectedChildMenu = null;
		
		//展开二级菜单Div
		var hh = document.body.clientHeight? document.body.clientHeight : document.body.scrollHeight;
		var mh = parseInt(hh)-((p_count+1)*28)-78;
		
		// 隐藏未被选中的菜单项
		for(var k=0; k<p_count; k++){
			if("menuInfo"+k==cid+i){
					document.getElementById(cid+i).style.display = "block";
					document.getElementById(cid+i).style.height=mh;
			}else if(document.getElementById("menuInfo"+k)!=null){
					document.getElementById("menuInfo"+k).style.display = "none";
					document.getElementById("menuInfo"+k).innerHTML="";
			}
		}
		
		// 判断当前点击的一级菜单是否有子菜单，有子菜单时显示子菜单，没有子菜单时直接打开链接并返回
		if(menu2==null || menu2.length<1){
			callDateList(url);
			return;
		}
		
		var count = menu2.length;
		var s="";
		for(var j=0; j<count; j++){
			var menuId = menu2[j].menuId;
			var url = menu2[j].href;
			var title = menu2[j].text;
			var tid = menu2[j].id;
				
			//计算二级菜单下三级菜单的数量
			var tcount=0;
			var menu3=null;
			if(menu2[j].children!=null && menu2[j].children.length>0){
				menu3 = tcount=menu2[j].children
				tcount=menu3.length;
				callDateList(menu2[j].children[0].href);
			}else{
				// 如果有三级子菜单
				callDateList(url);
			}
		//	alert("menu3: "+Ext.util.JSON.encode(menu3));
			if(j==0){
					s+="<div id='"+menuId+j+"' class='menuInfo-selected' onMouseOver='this.className=\"menuInfo-mouseover\"' onMouseOut='changeBStyle(\""+menuId+"\","+count+")' onclick='showThirdMenuList("+Ext.util.JSON.encode(menu3)+",\""+menuId+"\",\"thirdMenu\","+count+","+j+",\""+url+"\")'>"+title+"</div>";
					if(tcount>0){
						var str=callThirdMenu(menu2[j].children);
						s+="<div id='thirdMenu"+j+"' style='display:block;height:0px;width:100%;'>"+str+"</div>\t";
					}else{
						s+="<div id='thirdMenu"+j+"' style='display:none;height:0px;width:100%;'></div>\t";
					}
			}else{
					s+="<div id='"+menuId+j+"' class='main' onMouseOver='this.className=\"menuInfo-mouseover\"' onMouseOut='changeBStyle(\""+menuId+"\","+count+")' onclick='showThirdMenuList("+Ext.util.JSON.encode(menu3)+",\""+menuId+"\",\"thirdMenu\","+count+","+j+",\""+url+"\")'>"+title+"</div>";
					s+="<div id='thirdMenu"+j+"' style='display:none;width:100%;overflow-y:auto'></div>\t";
			}
		}
		document.getElementById(cid+i).innerHTML=s;
}

 4、绘制三级菜单

function showThirdMenuList(menu3,divId,cid,count,i,url){
		selectedMenu=document.getElementById(divId+i);
		selectedMenu.className="menuInfo-selected";
		selectedChildMenu = null;
//		alert(document.getElementById(cid+i));
		// 没有三级子菜单的情况下，切换样式，直接打开链接，返回
		if(menu3.length==0 || document.getElementById(cid+i).style.display=="block"){
			for(var j=0; j<count; j++){
				if(document.getElementById("thirdMenu"+j)!=null)
					document.getElementById("thirdMenu"+j).style.display = "none";
			}
			callDateList(url);
			return;
		}
		// 在有三级子菜单的情况下，切换样式并黙认打开三级菜单的第一个菜单对应的链接
		callDateList(menu3[0].href);
		for(var k=0; k<count; k++){
			if("thirdMenu"+k==cid+i){
				document.getElementById(cid+i).style.display="block";
				document.getElementById(cid+i).style.height=parseInt(menu3.length) * 28 +"px";
			}else if(document.getElementById("thirdMenu"+k)!=null){
				document.getElementById("thirdMenu"+k).style.display = "none";
			}
		}
		document.getElementById(cid+i).innerHTML=callThirdMenu(menu3);
	}
	
	function callThirdMenu(menu3){
		var s = "";
		var count = menu3.length;
		for(var k=0; k<count; k++){
			var id = menu3[k].menuId;
			var url = menu3[k].href;
			var title = menu3[k].text;
			if(k==0){
					s += "<div id='"+id+k+"' class='childMenu-selected' style='display:block' onMouseOver='this.className=\"childMenu-mouseOver\"' onMouseOut='changeCStyle(\""+id+"\","+count+")' onClick='showResultDiv(\""+id+k+"\",\""+title+"\",\""+url+"\")'>"+title+"</div>";
				//	callDateList(url);
			}else{
					s += "<div id='"+id+k+"' class='childMenu' style='display:block' onMouseOver='this.className=\"childMenu-mouseOver\"' onMouseOut='changeCStyle(\""+id+"\","+count+")' onClick='showResultDiv(\""+id+k+"\",\""+title+"\",\""+url+"\")'>"+title+"</div>";
			}
		}
		return s;
}
// 鼠标单击事件分配对应的结果在展示区显示
 function callDateList(url){
  if(url=="" || url==null){
   blankPage();
   return;
  }else{
   loadResultPage(url);
  }
 }
 
 // 三级菜单调用函数
 function showResultDiv(menuId,name,url){
  if(selectedChildMenu!=null)
   selectedChildMenu.className="childMenu"
  selectedChildMenu = document.getElementById(menuId);
  selectedChildMenu.className = "childMenu-selected";
  
  if(url=="" || url==null){
   blankPage();  // 调用一个空页面
  }else{
   loadResultPage(url);  // 加面页面在右边功能区
  }
 }

 

5、样式切换

/****   样式切换  开始**/
function changeBG(count) {
		if (selectedDiv == "" || selectedDiv == null) {
			for (var i = 0; i < count; i++) {
				if (i == 0) {
					document.getElementById("menu0").className = "selected";
				} else {
					document.getElementById("menu" + i).className = "body";
				}
			}
		} else {
			for (var i = 0; i < count; i++) {
				if (selectedDiv.id == "menu" + i) {
					document.getElementById("menu" + i).className = "selected";
				} else {
					document.getElementById("menu" + i).className = "body";
				}
			}
		}
}
function changeBStyle(flag,count){
		if (selectedMenu == null || selectedMenu == "") {
			for (var i = 0; i < count; i++) {
				if (i==0) {
					document.getElementById(flag+0).className = "menuInfo-selected";
				} else {
					document.getElementById(flag+i).className = "main";
				}
			}
		}else{
			for (var i = 0; i < count; i++) {
				if (selectedMenu.id==flag+i) {
					document.getElementById(flag+i).className = "menuInfo-selected";
				} else {
					document.getElementById(flag+i).className = "main";
				}
			}
		}
}
function changeCStyle(flag, count){
		if (selectedChildMenu==null || selectedChildMenu=="") {
			for (var i = 0; i < count; i++) {
				if (i==0) {
					document.getElementById(flag+0).className = "childMenu-selected";
				} else {
					document.getElementById(flag+i).className = "childMenu";
				}
			}
		}else{
			for (var i = 0; i < count; i++) {
				if(selectedChildMenu.id==flag+i) {
					document.getElementById(flag+""+i).className = "childMenu-selected";
				} else {
					document.getElementById(flag+i).className = "childMenu";
				}
			}
		}
}
/******* 样式结束******/

 

6、样式文件

.feed-list {
	border: 1px solid white;
	display: block;
	text-decoration: none;
	margin-bottom: 0px;
	padding: 0px 0px 0px 0px;
}

.feed-list div.body {
	padding: 3px 0px 0px 3px;
	font: bold 12px tahoma, verdana, helvetica;
	color: #1641A0;
	display: block;
	-moz-outline: none;
	border-top: 1px solid #6D91CD;
	cursor: pointer;
	margin-bottom: 1px;
	text-indent: 10px;
	width: 100%;
	background-image: url(../images/tr-bg.gif);
	background-repeat: repeat-x;
	height: 27px;
	line-height:18px;
}

.feed-list div.overDiv {
	padding: 3px 0px 0px 3px;
	font: bold 12px tahoma, verdana, helvetica;
	color: #1641A0;
	display: block;
	-moz-outline: none;
	border-top: 1px solid #6D91CD;
	cursor: pointer;
	margin-bottom: 1px;
	text-indent: 10px;
	width: 100%;
	background-image: url(../images/tr-over-bg.gif);
	background-repeat: repeat-x;
	height: 27px;
	line-height:18px;
}

.feed-list .selected {
	cursor: pointer;
	background-image: url(../images/tr-light-bg.gif);
	background-repeat: repeat-x;
	padding: 3px 0px 0px 3px;
	font: bold 12px tahoma, verdana, helvetica;
	color: #1641A0;
	display: block;
	-moz-outline: none;
	border-bottom: 1px solid #6D91CD;
	border-top: 1px solid #6D91CD;
	cursor: pointer;
	margin-bottom: 1px;
	text-indent: 10px;
	width: 100%;
	height: 27px;
	line-height:18px;
}
.menuInfo {
	width: 100%;
	height: 27px;
	padding: 5px;
	display: block;
	font-size: 12px;
	color: #1641A0;
	cursor: pointer;
	line-height: 18px;
	margin-top: 0px;
	text-decoration: none;
	background-image: url(../images/small_icon.gif);
	background-position: 20 7 0 0;
	background-color: #E3EEFD;
	background-repeat: no-repeat;
	text-indent: 30px;
}

.main {
	width: 100%;
	height: 27px;
	padding: 5px;
	display: block;
	font-size: 12px;
	color: #1641A0;
	cursor: pointer;
	line-height: 18px;
	margin-top: 0px;
	text-decoration: none;
	background-image: url(../images/small_icon.gif);
	background-position: 20 7 0 0;
	background-color: #E3EEFD;
	background-repeat: no-repeat;
	text-indent: 35px;
}

.menuInfo-mouseover {
	width: 100%;
	height: 27px;
	padding: 5px;
	display: block;
	font-size: 12px;
	color: #1641A0;
	cursor: pointer;
	line-height: 18px;
	margin-top: 0px;
	text-decoration: none;
	text-indent: 35px;
	background-image: url(../images/small_over_icon.gif);
	background-position: 20 7 0 0;
	background-repeat: no-repeat;
	background-color: #F0F7FF;
}

.menuInfo-selected {
	width: 100%;
	height: 27px;
	padding: 5px;
	display: block;
	font-size: 12px;
	color: #1641A0;
	cursor: pointer;
	line-height: 18px;
	margin-top: 0px;
	text-decoration: none;
	text-indent: 35px;
	background-image: url(../images/small_change_icon.gif);
	background-position: 20 7 0 0;
	background-repeat: no-repeat;
	background-color: #F0F7FF;
}

.childMenu {
	width: 100%;
	height: 20px;
	padding: 5px;
	display: block;
	font-size: 12px;
	color: #1641A0;
	cursor: pointer;
	line-height: 18px;
	margin-top: 0px;
	text-decoration: none;
	text-indent: 50px;
	background-image: url(../images/round_blue.gif);
	background-position: 40 8 0 0;
	background-repeat: no-repeat;
}

.childMenu-mouseOver {
	width: 100%;
	height: 20px;
	padding: 5px;
	display: block;
	font-size: 12px;
	color: blue;
	cursor: pointer;
	line-height: 18px;
	margin-top: 0px;
	text-decoration: none;
	text-indent: 50px;
	background-image: url(../images/round_green.gif);
	background-position: 40 8 0 0;
	background-repeat: no-repeat;
}

.childMenu-selected {
	width: 100%;
	height: 20px;
	padding: 5px;
	display: block;
	font-size: 12px;
	color: red;
	cursor: pointer;
	line-height: 18px;
	margin-top: 0px;
	text-decoration: none;
	text-indent: 50px;
	background-image: url(../images/round_orange.gif);
	background-position: 40 8 0 0;
	background-repeat: no-repeat;
}

 

7、页面代码

<body id="feedViewer" style="overflow: auto">
	<div id="header"></div>
	<div id="menuDiv" style='background-color: #E3EEFD;'>
		<div id="menuList" class="feed-list">
		</div>
	</div>
	<div id="main"></div>
</body>

 

 

仿京东左侧菜单
weixin_46528860的博客
10-14 1618
简单
LayUI动态加载左侧菜单以及tab组件的使用
07-13
在"layui，登陆，左侧菜单实现"这个主题中，我们将深入探讨如何利用LayUI来创建动态加载的左侧菜单以及集成tab组件，以实现一个完整的登录功能和页面导航。 首先，我们需要了解LayUI的基础结构。LayUI的核心是layui...
丰富多彩的树形导航菜单--样式美观
11-03
丰富多彩的树形导航菜单，样式美观。详情请进入里面解压查看。
左侧菜单框架
10-14
Android系统自定义左侧菜单框架源码。
项目中左边的下拉菜单样式
chenhaiyang_ok的专栏
02-01 242
&lt;%@ page contentType="text/html; charset=GBK" %&gt;&lt;%@include file="common/tag_include.jsp"%&gt;&lt;%int i=1;%&gt; &lt;script&gt;OutBarFolder&lt;%=i%&gt;=new Array("规则管理");var fx=
jstree树形文件夹用vue.js组件格式做出来
热门推荐
雷潇的博客
01-09 1万+
jstree树状文件夹首先在官网下载jsTree或使用CDNJS。 （如果您选择下载-所有你需要的文件是在dist/下载文件夹中）1. 在index文件中引入CDN（style.min.css/jquery.min.js/jstree.min.js） 2. 创建一个jstree.html文件来设置一个容器。 3. 创建一个json文件，代码格式如下： 4. 创建一个jstree.js文
angularjs左侧菜单
kerr321的博客
10-23 1507
angularjs二级菜单以及路由跳转 html部分 // 页面 <div class="leftMenu"> <!--菜单--> <ul class="navMenu"> <li ng-click="changNavMenu(item,navArr,...
京东左侧菜单
Scodow的博客
11-30 978
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>京东左侧菜单</title> <script src="JS/jquery-1.12.4.js"></script> <style> *{ padding: 0; ...
layui递归实现动态左侧菜单
10-16
在IT行业中，构建一个动态左侧菜单是常见的需求，特别是在Web应用中。layui是一个流行的前端UI框架，它提供了丰富的组件和工具来帮助开发者构建美观且功能强大的应用。在本例中，我们将探讨如何使用layui递归实现...
易语言漂亮的左侧菜单源码
06-02
【易语言漂亮的左侧菜单源码】是一个典型的编程学习资源，主要针对易语言这一中国本土化的编程语言。易语言，全称“简易编程语言”，旨在降低编程门槛，让计算机编程更加简单易学。在这个源码中，我们可以看到如何...
ElementUI之首页导航及左侧菜单（模拟实现）
09-26
在本文中，我们将深入探讨如何使用ElementUI框架来构建一个具备首页导航和左侧菜单功能的Web应用程序。ElementUI是一款基于Vue.js的开源组件库，它提供了丰富的UI组件，能够帮助开发者快速搭建美观、响应式的界面。 ...
jQuery简单实现仿京东商城的左侧菜单效果代码
10-23
本文介绍了一段使用jQuery实现模仿京东商城左侧菜单效果的代码。通过分析给定文件的内容，我们将展开对以下几个知识点的讨论： 1. jQuery的基本概念 2. jQuery鼠标事件的使用 3. CSS样式控制与动态切换 4. HTML结构...
写写 树的代码
weixin_30273763的博客
04-18 104
#include <iostream> #define MaxSize 100 using namespace std; #define ElemType char typedef struct tnode { ElemType data; struct tnode* lchild,*rchild; }BTNode; void C...
用命令行生成目录结构树
yecengxiangshi0426的专栏
06-01 835
有时候在看某些文档的时候会发现有类似上图这种文件夹的结构树，其实想生成这种结构非常简。 cmd中生成结构树 在当前目录打开cmd命令行工具 输入tree命令 -- 回车 然后你就发现，你需要的结构树已经出现了，但是仔细看，会发现只显示文件夹。 如果想把当下的文件名也显示出来你只需要把命令改为tree /f，回车后发现，完美实现。 这时候如果你想把这个结构变成一个txt文本文件也很简...
左侧固定菜单，右侧浮动菜单样式示例代码
今夕莫离-IT
07-06 7406
左侧固定，右侧浮动的菜单样式                $(function () {            $(".left_nav dd").hover(function () {                $(".nav_right", this).show();            });            $(".left_nav dd").mouse
测试 Securing Kamailio’s JSON-RPC over HTTP
fs交流的博客
11-27 408
kamailio # 启动 kamailio。
Java 信息采集系统
2501_90980137的博客
11-28 367
• 主流框架：OkHttp（轻量、高效，支持GET/POST、表单提交、文件上传，自动处理连接池、重定向）、HttpClient（Apache出品，功能全面，适合复杂请求场景）。• 网页解析（HTML/XML）：Jsoup（强大的DOM解析，支持CSS选择器、XPath，简化HTML元素提取）、Dom4j（专注XML解析，适合结构化XML数据）。• 典型场景：网页数据爬取（新闻、商品信息）、接口数据采集（API接口返回的JSON/XML数据）、本地文件数据提取（Excel、CSV）。
自定义协议设计与实践：从协议必要性到JSON流式处理
最新发布
祯的博客
11-28 1052
本文探讨了自定义网络协议的必要性及其实现方法。首先分析了通用协议（如HTTP）的局限性：性能开销大、功能冗余、通信模式不匹配等问题。其次阐述了自定义协议的优势：极致性能、高度定制化、低资源消耗和增强安全性。文章详细介绍了自定义协议的应用场景（物联网、游戏、区块链等）和开发代价（高维护成本、调试困难等）。重点讲解了基于TCP的流式数据处理方法，提出"长度头+消息体"的解决方案，并给出基于jsoncpp的实现示例。
Android自定义左侧菜单框架实践指南
根据提供的文件信息，以下是关于Android系统自定义左侧菜单框架源码的知识点详细说明： ### 标题：左侧菜单框架 #### 知识点一：Android自定义ViewGroup - **自定义ViewGroup的创建**：在Android开发中，为了实现...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值