wj98127
- 浏览: 268927 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
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>
- 大小: 6.5 KB
分享到：
评论
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 8076<script type="text/java ... -
实现Ext表单对checkBoxGroup的统一管理
2009-09-10 11:48 23961 对于类型是checkboxgroup的数据，数据库中保存数 ... -
CheckboxSelectionModel全选后，点击下一页时还原到未选中状态
2009-05-18 16:30 3573在Grid的中使用了CheckboxSelectionMode ... -
Ext2.2 iframe的刷新问题
2009-04-22 10:37 2302在 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的弹框展示。下面我们将深入探讨这个项目的核心技术和实现细节。 首先，...