js树形菜单加右键菜单资源-CSDN下载

共14个文件

gif：5个

css：3个

js：3个

树形菜单

右键菜单

4星 · 超过85%的资源需积分: 12 121 浏览量 2011-03-27 13:27:40 上传评论 4 收藏 21KB RAR 举报

在IT行业中，树形菜单和右键菜单是两种常见的用户界面元素，它们为用户提供了一种组织和交互数据的有效方式。本文将深入探讨这两种菜单的概念、实现原理以及它们在实际项目中的应用，特别是如何在JavaScript环境下结合使用。树形菜单是一种层次结构的展示方式，常用于文件系统、组织结构或导航菜单等场景。它通过节点和子节点的关系来呈现数据，用户可以通过展开和折叠节点来探索不同的层次。在JavaScript中，我们可以利用DOM（Document Object Model）来创建和操作这些节点，通过遍历和修改DOM结构来实现树形菜单的动态效果。例如，通过添加、删除或改变节点的class属性，我们可以控制节点的可见性，实现展开和折叠的功能。右键菜单是指在鼠标右键点击时出现的上下文菜单。在网页中，这通常通过监听`contextmenu`事件来实现。当用户右键点击时，阻止浏览器默认的上下文菜单显示，然后自定义一个包含特定功能的菜单。在JavaScript中，我们可以通过创建HTML元素（如`<div>`或`<ul>`）并设置样式来构建这个菜单，同时使用CSS来定位它，使其出现在鼠标点击的位置。在"js树形菜单加右键菜单"这个项目中，我们可以看到两个关键组件的结合。代码文件`code.htm`很可能是实现这一功能的HTML页面，它可能包含了树形菜单的基本结构和右键菜单的触发器。CSS文件`css`则负责定义样式，包括树形菜单的层次感、节点样式以及右键菜单的布局和外观。具体实现上，树形菜单可能使用了递归函数来生成各个层级的节点，每个节点都有一个标志来判断其是否展开。右键菜单则可能通过监听`contextmenu`事件，根据点击的节点来决定显示哪些选项。同时，我们还需要处理菜单的显示和隐藏，确保用户在点击其他地方或选择菜单项后能够正确关闭菜单。结合使用JavaScript实现的树形菜单和右键菜单，可以提供一个高效且直观的用户界面，让用户在复杂的层级数据中进行导航和操作。这种技术在内容管理系统（CMS）、文件管理工具以及其他需要展现层次关系的Web应用中广泛应用。通过学习和理解这些基础知识，开发者可以创建出更加定制化和用户友好的界面，提升用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

树形菜单加右键菜单.rar （14个子文件）

css

WebResource.axd 21KB

WebResource.gif 43B

contextmenu.css 2KB

context_menu.js 5KB

WebResource(3).gif 67B

dedeajax.js 3KB

WebResource(1).gif 66B

left.css 22KB

ieemu.js 8KB

noexpand.gif 909B

WebResource(1).axd 9KB

base.css 3KB

WebResource(2).gif 70B

code.htm 14KB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  <HTML><HEAD><TITLE>无标题页</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <LINK href="css/left.css" type=text/css rel=stylesheet> <LINK href="css/base.css" type=text/css rel=stylesheet> <LINK href="css/contextmenu.css" type=text/css rel=stylesheet> <SCRIPT src="css/context_menu.js" type=text/javascript></SCRIPT> <SCRIPT src="css/ieemu.js" type=text/javascript></SCRIPT> <SCRIPT src="css/dedeajax.js" type=text/javascript></SCRIPT> <STYLE type=text/css>.skin0 { BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; VISIBILITY: hidden; BORDER-LEFT: black 2px solid; WIDTH: 200px; CURSOR: default; LINE-HEIGHT: 20px; BORDER-BOTTOM: black 2px solid; FONT-FAMILY: Verdana; POSITION: absolute; BACKGROUND-COLOR: menu; TEXT-ALIGN: left } .skin1 { BORDER-RIGHT: buttonhighlight 2px outset; BORDER-TOP: buttonhighlight 2px outset; FONT-WEIGHT: normal; FONT-SIZE: 10pt; VISIBILITY: hidden; BORDER-LEFT: buttonhighlight 2px outset; WIDTH: 120px; CURSOR: default; BORDER-BOTTOM: buttonhighlight 2px outset; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif; POSITION: absolute; BACKGROUND-COLOR: menu; TEXT-ALIGN: left; FONT-VARIANT: normal } .menuitems { PADDING-RIGHT: 10px; PADDING-LEFT: 15px } </STYLE> <SCRIPT type=text/javascript> function LoadSuns(ctid,tid) { if($(ctid).innerHTML.length < 10) { var myajax = new DedeAjax($(ctid)); myajax.SendGet('catalog_do.php?dopost=GetSunLists&cid='+tid); } else { if(document.all) showHide(ctid); } } function showHide(objname) { if($(objname).style.display=="none") $(objname).style.display = "block"; else $(objname).style.display="none"; } if(moz) { extendEventObject(); extendElementModel(); emulateAttachEvent(); } //普通栏目 function CommonMenu(obj,tid,tname) { var eobj,popupoptions popupoptions = [ new ContextItem("修改栏目",function(){window.location.href="aaa.aspx?id="+tid;}), new ContextItem("删除",function(){if(confirm("您确定要删除此栏目？")){window.location.href="aaa.aspx?id="+tid;}else{return false;}}), new ContextSeperator(), new ContextItem("上移",function(){window.location.href="";}), new ContextItem("下移",function(){window.location.href="";}), new ContextSeperator(), new ContextItem("预览",function(){window.open("list.html?colid="+tid);}), new ContextItem("增加子栏目",function(){window.location.href="aaa.aspx?id="+tid;}), new ContextSeperator(), new ContextItem("移动栏目",function(){window.location.href="aaa.aspx?ID="+tid;}), new ContextItem("删除所属子类",function(){window.location.href="aaa.aspx?ID="+tid;}) ] ContextMenu.display(popupoptions) } function CommonWebsitesMenu(obj,tid,tname) { var eobj,popupoptions popupoptions = [ new ContextItem("修改网站",function(){window.location.href="aaa.aspx?id="+tid;}), new ContextItem("删除",function(){if(confirm("删除此网站的同时，该站下的所有栏目将被删除。\n\n请注意：此操作不可恢复。确定删除？")){window.location.href="aaa.aspx?id="+tid;}else{return false;}}), new ContextSeperator(), new ContextItem("预览",function(){window.location.href="aaa.aspx?id="+tid;}), new ContextSeperator(), new ContextItem("删除所有网站",function(){window.location.href="aaa.aspx?ID="+tid;}) ] ContextMenu.display(popupoptions) } </SCRIPT> <STYLE>.coolbg2 { BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid; HEIGHT: 18px; BACKGROUND-COLOR: #f2f5e9 } .coolbt2 { BORDER-RIGHT: #acacac 2px solid; BORDER-TOP: #efefef 2px solid; BORDER-LEFT: #efefef 2px solid; BORDER-BOTTOM: #acacac 2px solid; BACKGROUND-COLOR: #f7fcda } .bline { BORDER-BOTTOM: #bcbcbc 1px solid; BACKGROUND-COLOR: #f0f4f1 } .nbline { BORDER-BOTTOM: #dedede 1px solid; BACKGROUND-COLOR: #ffffff } .bline2 { BORDER-BOTTOM: #bcbcbc 1px solid; BACKGROUND-COLOR: #f8f8f8 } </STYLE> <STYLE type=text/css>.TreeView1_0 { TEXT-DECORATION: none } </STYLE> <META content="MSHTML 6.00.2900.3268" name=GENERATOR></HEAD> <BODY onload=javascript:ContextMenu.intializeContextMenu()> <FORM id=form1 name=form1 action=Left.aspx method=post> <SCRIPT type=text/javascript>  </SCRIPT> <SCRIPT src="css/WebResource.axd" type=text/javascript></SCRIPT> <SCRIPT src="css/WebResource(1).axd" type=text/javascript></SCRIPT> <SCRIPT>  </SCRIPT> <TABLE class=tableborder1 style="LEFT: 5px; WIDTH: 193px; POSITION: absolute; TOP: 5px" cellSpacing=1 cellPadding=3 align=center> <TBODY> <TR align=middle> <TD style="WIDTH: 521px; TEXT-ALIGN: left" colSpan=2 height=25>切换网站：<SELECT id=weblist style="WIDTH: 103px" onchange="alert('跳转到某网站。')" name=weblist> <OPTION value=31 selected>+政府办L</OPTION> <OPTION value=22>+常宁市审计局L</OPTION> <OPTION value=32>+0市发展和改革局L</OPTION> <OPTION value=33>+市工业经济发展局L</OPTION> <OPTION value=34>+市教育局L</OPTION> <OPTION value=35>+0市监察局L</OPTION> <OPTION value=36>+0市国税局L</OPTION> <OPTION value=37>+0市民政局L</OPTION> <OPTION value=38>+0市司法局L</OPTION> <OPTION value=39>+0市财政局L</OPTION> <OPTION value=40>+0市人事局L</OPTION> <OPTION value=41>+市劳动和社会保障L</OPTION> <OPTION value=42>+市安监局L</OPTION> <OPTION value=119>aa</OPTION> <OPTION value=44>+市建设局L</OPTION> <OPTION value=45>+0市交通局L</OPTION> <OPTION value=46>+0市水利局L</OPTION> <OPTION value=47>+0市农业局L</OPTION> <OPTION value=48>+0市统计局L</OPTION> <OPTION value=49>+市林业局L</OPTION> <OPTION value=50>+0市文化局L</OPTION> <OPTION value=51>+0市卫生局L</OPTION> <OPTION value=52>+市人口和计划生育L</OPTION> <OPTION value=53>+市环保局L</OPTION> <OPTION value=54>+0市物价局L</OPTION> <OPTION value=55>+0市体育局L</OPTION> <OPTION value=56>+0市房产局</OPTION> <OPTION value=57>+0市广电局</OPTION> <OPTION value=58>+0市农机局</OPTION> <OPTION value=59>+0市畜牧水产局</OPTION> <OPTION value=60>+0市移民局</OPTION> <OPTION value=61>+市农村经营管理局</OPTION> <OPTION value=62>+市旅游局O</OPTION> <OPTION value=63>+0市志办</OPTION> <OPTION value=64>+0市农业综合开发办</OPTION> <OPTION value=65>+0市规划局L</OPTION> <OPTION value=66>+0市供销社L</OPTION> <OPTION value=67>+0市信访局L</OPTION> <OPTION value=68>+市信息化办</OPTION> <OPTION value=69>+0市农办L</OPTION> <OPTION value=70>+0市乡企局L</OPTION> <OPTION value=71>+0市煤炭局L</OPTION> <OPTION value=72>+0市粮食局L</OPTION> <OPTION value=73>+0市建工局L</OPTION> <OPTION value=74>+0市商业总公司L</OPTION> <OPTION value=75>+0市轻工业总公司L</OPTION> <OPTION value=76>+0市交警大队L</OPTION> <OPTION value=77>+0市烟办L</OPTION> <OPTION value=78>+0市残联L</OPTION> <OPTION value=118>“两会”专题</OPTION> <OPTION value=80>+0市地税局L</OPTION> <OPTION value=81>+0市工商局</OPTION> <OPTION value=82>+0市质量技术监督局</OPTION> <OPTION value=83>+0市烟草局</OPTION> <OPTION value=84>*市征稽所</OPTION> <OPTION value=85>*市外经局</OPTION> <OPTION value=86>*市电力局L</OPTION> <O

评论收藏

内容反馈