多级树型菜单

原创 2004年08月06日 23:15:00

做网页时,为了节约空间和美观,时常会用到多级的菜单,这里是一个JavaScript和Html混编的一个多级树型菜单的全部代码

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="error.jsp" %>
<html>
<head>
<title>多级树型菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="JavaScript1.2">
var head="photos/display:''"
img1=new Image()
img1.src="photos/fold.gif"
img2=new Image()
img2.src="photos/open.gif"
function change(){
  if(!document.all)
     return
  if (event.srcElement.id=="foldheader") {
     var srcIndex = event.srcElement.sourceIndex
     var nested = document.all[srcIndex+1]
     if (nested.style.display=="none") {
        nested.style.display=''
        event.srcElement.style.liststyleImage="url(photos/open.gif)"
     }
     else {
        nested.style.display="none"
        event.srcElement.style.liststyleImage="url(photos/fold.gif)"
     }
  }
}
document.onclick=change
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
   var popup = null;
   function inputorderid() {  
       popup = window.open('jspInputOrderid.jsp', '请输入订单编号','width=200,height=150,resizable=0,scrollbars=no');
   }
   function account() { 
       popup = window.open('jspAccountReceivable.jsp', '请选择客户名称','width=200,height=200,resizable=0,scrollbars=no');
   }
function oppaccount(){
popup = window.open('jspOppAccount.jsp', '请选择机会类型','width=200,height=200,resizable=0,scrollbars=no');
}
function accountcust(){ 
popup = window.open('jspAccountCust.jsp', '请选择客户地域','width=262,height=150,resizable=0,scrollbars=no');
}
function OrderAccount(){
popup = window.open('jspAccountOrder.jsp', '请选择客户及订单有效日期范围','width=200,height=200,resizable=0,scrollbars=no');

}
//-->
</script>
<style type="text/css">

li {
font-family: "宋体", "新宋体";
font-size: 9pt;
line-height: 13pt;
margin-right: 5px;
cursor: hand;
}
#foldheader{
cursor:hand;
list-style-image:url(photos/fold.gif);
font-family: "宋体", "新宋体";
font-size: 10pt;
}
#foldinglist{
list-style-image:url(photos/list.gif);
font-family: "宋体", "新宋体";
font-size: 9pt;
}
BODY {
SCROLLBAR-FACE-COLOR: #6699CC;
SCROLLBAR-HIGHLIGHT-COLOR: #A6C4E1;
SCROLLBAR-SHADOW-COLOR: #A6C4E1;
SCROLLBAR-3DLIGHT-COLOR: #A6C4E1;
SCROLLBAR-ARROW-COLOR:  #A6C4E1;
SCROLLBAR-TRACK-COLOR: #A6C4E1;
SCROLLBAR-DARKSHADOW-COLOR: #A6C4E1;
}

A        { text-decoration:none; }
A:link       { text-decoration:none;  color: #000066;  }
A:visited    { text-decoration:none;  color: #000033;  }
A:hover      {
text-decoration:underline;
color: #FF0000;
}
</style>
</head>
<body bgcolor="#CBDCED" leftmargin="3" topmargin="0">
<table width="100%" height="33" border="0" cellpadding="0" cellspacing="0">
 <tr>
   <td></td>
 </tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" frame="void" align="left">
 <tr>
   <td>
<fieldset style="width:100%" align="left">
     <legend><a href="" target="_blank"><font size="2"> JETCRM B/S2003 </font></a></legend>
     <dl class="pt12normal">
 <li id="foldheader"> 客户管理</li>
 <ul id="foldinglist">
   <li id="foldheader"> 客户管理</li>
   <dl id="foldinglist" style="display:none">
     <li><a href="customer_add.jsp" target="mainFrame"> 新建客户</a></li>
     <li><a href="customer_query.jsp" target="mainFrame"> 客户查询</a></li>
   <li><a href="menu.jsp#" onClick="accountcust()"> 客户统计</a></li>
   </dl>
   <li id="foldheader"> 联系人管理</li>
   <dl id="foldinglist" style="display:none">
     <li><a href="contact_add.jsp" target="mainFrame" class=black> 新建联系人</a></li>
     <li><a href="contact_query.jsp" target="mainFrame" class=black> 联系人查询</a></li>
   </dl>
   <li id="foldheader"> 竞争对手管理</li>
   <dl id="foldinglist" style="display:none">
     <li><a href="adversary_add.jsp" target="mainFrame" class=black> 新建竞争对手</a></li>
     <li><a href="adversary_query.jsp" target="mainFrame" class=black> 竞争对手查询</a></li>
   </dl>
 </ul>
 <li id="foldheader">服务管理</li>
 <ul id="foldinglist" style="display:none">
 <li id="foldheader">联系历史</li>
 <dl id="foldinglist" style="display:none">
 <li><a href="ContactHistory_add.jsp" target="mainFrame" class=black>新建联系记录</a></li>
     <li><a href="ContactHistory_list.jsp" target="mainFrame" class="balck">浏览联系记录</a></li>
   </dl>
   <li> 邮件发送</li>
   <li id="foldheader">服务请求记录</li>
   <dl id="foldinglist" style="display:none">
           <li><a href="jsprequester_add.jsp" target="mainFrame" class=black>新建服务请求</a></li>
           <li><a href="showRequesterlist.jsp" target="mainFrame" class="balck">服务请求浏览</a></li>
   </dl>
   <li id="foldheader">客户投诉</li>
   <dl id="foldinglist" style="display:none">
     <li><a href="jspFeedback_add.jsp" target="mainFrame">新建投诉记录</a></li>
     <li><a href="feedback_list.jsp" target="mainFrame">投诉查询</a></li>
     <li>投诉统计</li>
   </dl>
 </ul>
 <li id="foldheader">销售管理</li>
 <ul id="foldinglist">
   <li id="foldheader"> 机会管理</li>
   <dl id="foldinglist" style="display:none">
     <li><a href="jspOppMan.jsp" target="mainFrame">新建机会</a></li>
     <li><a href="jspOppQuery.jsp" target="mainFrame">机会查询</a></li>
     <li><a href="menu.jsp#" onClick="oppaccount()">机会统计</a></li>
   </dl>
   <li id="foldheader">定单管理</li>
   <dl id="foldinglist" style="display:none">
     <li><a href="jspNewOrder.jsp" target="mainFrame">新建定单</a></li>
     <li><a href="jspOrderQry.jsp" target="mainFrame">定单查询</a></li>
     <li><a href="jspFufilOrder.jsp" target="mainFrame">订单履行</a></li>
     <li><a href="jspFufilOrder.jsp" target="mainFrame">订单履行</a></li>
      <li><a href="menu.jsp#" onClick="OrderAccount">订单额统计</a></li>
     <li><a href="menu.jsp#" onClick=" inputorderid()">履行或结案</a></li>
     <li><a href="menu.jsp#" onClick=" account()">应收款统计</a></li>
   </dl>
   <li id="foldheader">报价管理</li>
   <dl id="foldinglist" style="display:none">
     <li><a href="jspQuote_add.jsp" target="mainFrame">新建报价单</a></li>
     <li><a href="jspQuote_list.jsp" target="mainFrame">浏览报价单</a></li>
   </dl>
 </ul>
 <li id="foldheader">系统管理</li>
 <ul id="foldinglist">
   <li>权限管理</li>
     <li><a href="jspBaseDataInsert.jsp" target="mainFrame">基础数据设置</a></li>
 <li><a href="jspSetEmployee.jsp" target="mainFrame">员工管理</a></li>
 <li><a href="jsppurview_set.jsp" target="mainFrame">权限设置</a></li>
 </ul>
       <li id="foldheader"><a href="#" target="mainFrame">重新登录</a></li>
</dl>
</fieldset>
 </td>
 </tr>
 <tr>
   <td> </td>
 </tr>
</table>
</body>
</html>

多级flash树型菜单

效果图如下:flash文件中第一帧上的代码:稍作解释,还有你需要那个级别层次显示都可以自己控制,不过得加些代码。flash源文件中拖一个文本框,不是库中的,设置属性如图。在拖一个库中的滚动条放到文本框...
  • yvan2008
  • yvan2008
  • 2008年12月30日 03:03
  • 645

多级树形菜单设计

对应文件有: machmap.jsp,dtree,js,op.js,dtree.css 等. 数据库设计sys04_Machine表 machmap.jsp 代码如下page contentType=...
  • greenraindh
  • greenraindh
  • 2006年08月14日 16:23
  • 1916

iOS开发-UI控件:使用TableView实现多级树型menu

文章转自: http://blog.csdn.net/xunyn/article/details/8567249 官方UIKit下的TableView,支持section和row的显示,但不支持在t...
  • sinat_31872425
  • sinat_31872425
  • 2016年03月03日 14:44
  • 1336

django模板显示树状结构

版权所有,转载请注明出处:http://guangboo.org/2013/03/13/display-tree-with-django-template django的template为我们提供了...
  • guangboo
  • guangboo
  • 2013年03月13日 20:33
  • 2252

android--------ExpandableListView的使用多级列表

多级列表ExpandableListView 扩展列表能够显示一个指示在每项显示项的当前状态(状态通常是一个扩展的组,组的孩子,或倒塌,最后一个孩子)。使用setchildindicator(...
  • DickyQie
  • DickyQie
  • 2016年09月14日 15:19
  • 560

ajax中的树型菜单

运用ajax技术的树型菜单 树型菜单可以说是项目中应用最为广泛的运用。以前无论使用微软控件的树型,还是比较优秀的阿赖树型,都是将数据全部读出,然后再分级显示。这样如果数据量大,那么第一次显示将需要客户...
  • dongliheng
  • dongliheng
  • 2007年07月13日 18:10
  • 678

用PHP实现多级树型菜单

  • zgqtxwd
  • zgqtxwd
  • 2008年05月01日 03:48
  • 117

ASP中实现树状菜单

在中加 定义菜单的函数function Tree()  //树状菜单对象{  this.start=function()  //菜单开始,bTop表示是否为最外层。  {    document.wr...
  • guanzg
  • guanzg
  • 2006年05月17日 15:52
  • 7909

数据库设计(一)树型关系的数据表

树型关系的数据,例如常见的类别表,即一个大类,下面有若干个子类,某些子类又有子类这样的情况。当类别不确定,用户希望可以在任意类别下添加新的子类,或者删除某个类别和其下的所有子类,而且预计以后其数量会逐...
  • qq_38537286
  • qq_38537286
  • 2017年12月04日 15:14
  • 82

springmvc+mybatis 无极限树形结构菜单

MYSQL数据库 查出数据调用封装类 List menulist = new ArrayList(); menulist = menuService.menuList(); Menu...
  • zhaanghao
  • zhaanghao
  • 2015年10月09日 09:51
  • 7193
收藏助手
不良信息举报
您举报文章:多级树型菜单
举报原因:
原因补充:

(最多只允许输入30个字)