- 浏览: 268942 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
xurun:
点击节点的时候出错,怎么办??1120行,data为空为或不是 ...
TreeGrid -
QQ371496669:
引用load方式检索不到的话会抛出org.hibernate. ...
Hibernate中No row with the given identifier exists -
汽车城路:
我现在正在使用这个Extjs,目前也遇到了这个问题,就是怎么换 ...
ext使用--Panel和iframe联合使用时页面高度的解决方法 -
jsjzhou:
有必要. 在实际项目我们就采用了HttpUrlConnecti ...
HttpURLConnection VS HttpClient性能测试 -
小猪笨笨:
不错,通俗易懂
在oracle中创建unique唯一约束(单列和多列)
自己写了一个菜单,不是很灵活,只支持到三层的树,使用了一点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'> {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>
评论
3 楼
svygh123
2011-11-28
写的不错,能给传个demo吗,svygh123@gmail.com,谢谢。
2 楼
duronshi
2009-07-15
最好能上传个demo
1 楼
lang3126
2009-05-09
写得很好,能不能给我源码啊?谢谢了。邮箱:qzsyzhl@163.com
发表评论
-
ext使用--Panel和iframe联合使用时页面高度的解决方法
2009-10-13 17:24 7117在项目使用borderLayout Panel时 ... -
ExtJS的form和grid结合示例
2009-10-13 09:43 8077<script type="text/java ... -
实现Ext表单对checkBoxGroup的统一管理
2009-09-10 11:48 23981 对于类型是checkboxgroup的数据,数据库中保存数 ... -
CheckboxSelectionModel全选后,点击下一页时还原到未选中状态
2009-05-18 16:30 3574在Grid的中使用了CheckboxSelectionMode ... -
Ext2.2 iframe的刷新问题
2009-04-22 10:37 2303在 EXT2.0运行正常的程序,调换 EXT2.2 的脚本之后 ... -
TreeGrid
2009-03-11 16:20 16836TreeGrid.js原路径:http://www.extjs ... -
Ext2-资料篇
2009-03-11 14:00 1393EXT GWT 官方网站: http://extjs.co ...
相关推荐
在本文中,我们将深入探讨如何在Windows Presentation Foundation (WPF) 中创建一个精美的左侧菜单栏,这与“精美WPF左侧菜单栏”的主题紧密相关。WPF是Microsoft .NET框架的一部分,它提供了丰富的用户界面设计工具...
本文介绍了一段使用jQuery实现模仿京东商城左侧菜单效果的代码。通过分析给定文件的内容,我们将展开对以下几个知识点的讨论: 1. jQuery的基本概念 2. jQuery鼠标事件的使用 3. CSS样式控制与动态切换 4. HTML结构...
在本文中,我们将深入探讨如何使用C#编程语言来实现一个炫酷且实用的左侧菜单效果,这将有助于提升用户界面的交互性和美观性。在实际的软件开发中,左侧菜单通常作为应用的主要导航工具,帮助用户快速访问不同的功能...
Bootstrap风格的左侧菜单是网页设计中常见的一种布局方式,它为用户提供了一种高效且美观的导航体验。Bootstrap是由Twitter开发并开源的一个前端框架,它提供了一系列预设的样式、组件和JavaScript插件,使得开发者...
【易语言漂亮的左侧菜单源码】是一个典型的编程学习资源,主要针对易语言这一中国本土化的编程语言。易语言,全称“简易编程语言”,旨在降低编程门槛,让计算机编程更加简单易学。在这个源码中,我们可以看到如何...
在本项目中,我们以一个实验管理系统的实例来探讨如何构建一个后台管理系统,重点在于实现左侧菜单与右侧内容的交互功能。这个系统采用了一系列前端技术,包括jQuery、HTML、CSS和Bootstrap,为开发者提供了一个快速...
【标题】"仿QQ左侧菜单Demo"所涉及的知识点主要集中在移动应用开发领域,特别是Android应用开发。在Android系统中,侧滑菜单是一种常见的界面设计模式,它通常用于实现导航功能,用户可以通过从屏幕边缘向内滑动来...
Swagger接口文档改良添加左侧菜单是针对API开发过程中的一个重要优化,旨在提高开发人员对API文档的使用效率。Swagger是一款流行的RESTful API文档工具,它能够自动生成、描述、测试和发现Web服务接口。通过在...
在"layui,登陆,左侧菜单实现"这个主题中,我们将深入探讨如何利用LayUI来创建动态加载的左侧菜单以及集成tab组件,以实现一个完整的登录功能和页面导航。 首先,我们需要了解LayUI的基础结构。LayUI的核心是layui...
本主题聚焦于使用C#进行Winform界面布局设计,特别是实现左侧菜单和右侧窗口的操作。Winform是.NET Framework提供的一个强大的用户界面设计工具,它允许开发者创建具有丰富功能的桌面应用。 首先,我们要理解...
该js脚本可帮助你快速实现左侧菜单工具栏。通过js封装成一个方法类,直接new该对象即可快速生成左侧菜单工具栏。(添加了滚动是否滚动检测)
"iframe实现左侧菜单右侧页面简单示例"就是一个典型的双栏布局模式,常用于展示左侧导航菜单,右侧则展示对应的内容区域。这种设计模式在很多网站和管理系统中都很常见。 Iframe,全称"Inline Frame",是HTML中的一...
在本文中,我们将深入探讨如何使用ElementUI框架来构建一个具备首页导航和左侧菜单功能的Web应用程序。ElementUI是一款基于Vue.js的开源组件库,它提供了丰富的UI组件,能够帮助开发者快速搭建美观、响应式的界面。 ...
ASP实例开发源码—简约左侧菜单HTML5全屏网站源码 asp版.zipASP实例开发源码—简约左侧菜单HTML5全屏网站源码 asp版.zipASP实例开发源码—简约左侧菜单HTML5全屏网站源码 asp版.zip
在创建左侧菜单导航时,我们可以使用`<nav>`元素来定义导航区域,`<ul>`和`<li>`元素来构建菜单列表,而`<a>`元素则用于链接各个菜单项。此外,HTML5还允许我们通过`data-*`属性添加自定义数据,这在实现菜单的扩展...
标题“防京东左侧菜单”可能指的是一个针对京东网站左侧导航菜单的优化或屏蔽技术,可能是为了提高用户体验或者进行某种分析。在IT行业中,这可能涉及到前端开发、网页优化、用户行为分析等多个方面。 首先,我们...
本主题聚焦于2013年一款仿京东的左侧菜单设计,它旨在提升用户在浏览电商网站时的导航体验。左侧菜单在电商网站中扮演着商品分类导航的重要角色,帮助用户快速找到他们感兴趣的商品或服务。 首先,我们来看"仿京东...
【标题】"仿京东左侧菜单分类"所涉及的知识点主要集中在网页开发领域,特别是网站布局和交互设计。这种设计模式通常用于电商平台或者大型网站,旨在提供清晰、易用的导航结构,帮助用户快速找到所需的商品或信息。 ...
在构建电商平台时,京东商城的左侧菜单效果是一个关键的用户体验设计元素。这个菜单不仅提供了商品分类导航,还可能包括搜索、筛选、用户中心等模块,有效地帮助用户在海量的商品中快速定位并找到所需。以下是对这个...
在这个场景中,我们关注的是一个基于"jQuery + Bootstrap"的示例项目,它实现了左侧菜单栏控制右侧页面内容切换的功能,并且结合了Bootstrap的弹框展示。下面我们将深入探讨这个项目的核心技术和实现细节。 首先,...