第一部：引入相应的文件xtree.css、xtree.js、还有一写图片
第二步：left.html
 
!DOCTYPE html
 "-//W3C//DTD XHTML 1.0 Transitional//EN"
  
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<
 html
 "http://www.w3.org/1999/xhtml">
 
<
 head>
 
<
 meta
 "Content-Type"
  content=
 "text/html; charset=gb2312"
  />
 
<
 title>无标题文档<
 /title>
 
<!--引入树控件-->
 
<
 script language=
 "javascript"
  src=
 "xtree.js"><
 /script>
 
<
 script language=
 "javascript"
  src=
 "tree.js"><
 /script>
 
<!-- 引入树控件的相关样式 -->
 
<
 link type=
 "text/css"
  rel=
 "stylesheet"
  href=
 "xtree.css"
  />
 
<
 /head>
 
<
 body
 "#E1F0F4">
 
<
 script
 "text/javascript">   
 
<
 /script>
 
<
 /body>
 
<
 /html>
 
第三步：编写tree.js
 
/**********
 * 树节点点击后掉到的相应的页面，并在相应的框架中显示
 *  
 * ********/
 
 
 function father_location(subframe,locate)
 //将右边的frame显示为响应内容
 
 {
 
    parent.frames[subframe].location=locate;
 
 } 
 
var tree = 
 new WebFXTree(
 'OA系统');   
 // 根
 
 
 var items_01 = 
 new WebFXTreeItem(
 "我的办公桌"); 
 
  
 var items_01_01 = 
 new WebFXTreeItem(
 "电子邮件");
 
   
 var items_01_01_01 = 
 new WebFXTreeItem(
 "内部邮件");
 
   items_01_01_01.action = 
 "javascript:father_location('mainFrame','MyHtml.html')";
 
   
 var items_01_01_02 = 
 new WebFXTreeItem(
 "Internet邮件");
 
   items_01_01_02.action = 
 "javascript:father_location('mainFrame','MyHtml.html')";
 
  
 
  
 var items_01_02 = 
 new WebFXTreeItem(
 "短信息");
 
   
 var items_01_02_01 = 
 new WebFXTreeItem(
 "内部短信");
 
   items_01_02_01.action = 
 "javascript:father_location('mainFrame','MyHtml.html')";
 
   
 var items_01_02_02 = 
 new WebFXTreeItem(
 "手机短信");
 
   items_01_02_02.action = 
 "javascript:father_location('mainFrame','main.html')";
 
  
 
  
 
  
 var items_01_03 = 
 new WebFXTreeItem(
 "网络传真");
 
  
 var items_01_04 = 
 new WebFXTreeItem(
 "公考通知");
 
  
 var items_01_05 = 
 new WebFXTreeItem(
 "新闻");
 
  
 var items_01_06 = 
 new WebFXTreeItem(
 "投票");
 
  
 var items_01_07 = 
 new WebFXTreeItem(
 "个人考勤");
 
  
 var items_01_08 = 
 new WebFXTreeItem(
 "日程安排");
 
  
 var items_01_09 = 
 new WebFXTreeItem(
 "工作日志");
 
  
 var items_01_10 = 
 new WebFXTreeItem(
 "通讯薄");
 
  
 var items_01_11 = 
 new WebFXTreeItem(
 "个人文件柜");
 
  
 var items_01_12 = 
 new WebFXTreeItem(
 "我的视频会议");
 
  
 var items_01_13 = 
 new WebFXTreeItem(
 "控制面板");
 
  
 
  
 
  items_01_01.add(items_01_01_01);
 
  items_01_01.add(items_01_01_02);
 
  
 
  items_01_02.add(items_01_02_01);
 
  items_01_02.add(items_01_02_02);
 
  
 
  
 
  items_01.add(items_01_01);
 
  items_01.add(items_01_02);
 
  items_01.add(items_01_03);
 
  items_01.add(items_01_04);
 
  items_01.add(items_01_05);
 
  items_01.add(items_01_06);
 
  items_01.add(items_01_07);
 
  items_01.add(items_01_08);
 
  
 
  
 
  
 
 
 
 
 
 
 var items_02 = 
 new WebFXTreeItem(
 "工作流");
 
  
 var items_02_01 = 
 new WebFXTreeItem(
 "新建工作");
 
  
 var items_02_02 = 
 new WebFXTreeItem(
 "待办工作");
 
  
 var items_02_03 = 
 new WebFXTreeItem(
 "工作查询");
 
  
 var items_02_04 = 
 new WebFXTreeItem(
 "工作监控");
 
  
 var items_02_05 = 
 new WebFXTreeItem(
 "工作委托");
 
  
 var items_02_06 = 
 new WebFXTreeItem(
 "工作销毁");
 
  
 var items_02_07 = 
 new WebFXTreeItem(
 "流程日志查询");
 
  
 
  items_02.add(items_02_01);
 
  items_02.add(items_02_02);
 
  items_02.add(items_02_03);
 
  items_02.add(items_02_04);
 
  items_02.add(items_02_05);
 
  items_02.add(items_02_06);
 
  items_02.add(items_02_07);
 
  
 
 
 
 
 var items_03 = 
 new WebFXTreeItem(
 "公共事务");
 
  
 var items_03_01 = 
 new WebFXTreeItem(
 "公告通知管理");
 
  
 var items_03_02 = 
 new WebFXTreeItem(
 "公告通知审批");
 
  
 var items_03_03 = 
 new WebFXTreeItem(
 "新闻管理");
 
  
 var items_03_04 = 
 new WebFXTreeItem(
 "投票管理");
 
  
 var items_03_05 = 
 new WebFXTreeItem(
 "日程安排");
 
  
 var items_03_06 = 
 new WebFXTreeItem(
 "工作日志查询");
 
  
 var items_03_07 = 
 new WebFXTreeItem(
 "管理简报");
 
  
 var items_03_08 = 
 new WebFXTreeItem(
 "工作计划");
 
  
 var items_03_09 = 
 new WebFXTreeItem(
 "办公用品管理");
 
  
 var items_03_10 = 
 new WebFXTreeItem(
 "固定资产");
 
  
 var items_03_11 = 
 new WebFXTreeItem(
 "图书管理");
 
  
 var items_03_12 = 
 new WebFXTreeItem(
 "资源申请与管理");
 
  
 var items_03_13 = 
 new WebFXTreeItem(
 "会议申请与安排");
 
  
 var items_03_14 = 
 new WebFXTreeItem(
 "车辆申请与安排");
 
  
 var items_03_15 = 
 new WebFXTreeItem(
 "公告通讯薄");
 
  
 var items_03_16 = 
 new WebFXTreeItem(
 "组织机构信息");
 
  
 
  items_03.add(items_03_01);
 
  items_03.add(items_03_02);
 
  items_03.add(items_03_03);
 
  items_03.add(items_03_04);
 
  items_03.add(items_03_05);
 
  items_03.add(items_03_06);
 
  items_03.add(items_03_07);
 
  items_03.add(items_03_08);
 
  items_03.add(items_03_09);
 
  items_03.add(items_03_10);
 
  items_03.add(items_03_11);
 
  items_03.add(items_03_12);
 
  items_03.add(items_03_13);
 
  items_03.add(items_03_14);
 
  items_03.add(items_03_15);
 
  items_03.add(items_03_16);
 
  
 
  
 
  
 
  
 
  
 
  
 
 
 var items_04 = 
 new WebFXTreeItem(
 "档案管理");
 
 
 var items_05 = 
 new WebFXTreeItem(
 "信息交流");
 
 
 var items_06 = 
 new WebFXTreeItem(
 "人力资源");
 
 
 var items_07 = 
 new WebFXTreeItem(
 "销售管理");
 
 
 var items_08 = 
 new WebFXTreeItem(
 "系统管理");
 
 
 var items_09 = 
 new WebFXTreeItem(
 "附件程序");
 
 
 var items_10 = 
 new WebFXTreeItem(
 "系统管理");
 
 
 var items_11 = 
 new WebFXTreeItem(
 "附件程序");
 
 
 var items_12 = 
 new WebFXTreeItem(
 "培训管理");
 
 
 var items_13 = 
 new WebFXTreeItem(
 "协调项目管理");
 
 
 var items_14 = 
 new WebFXTreeItem(
 "在线考试");
 



//tree.add(p_000);// 将将一级目录填入根
 
tree.add(items_01);
 
tree.add(items_02);
 
tree.add(items_03);
 
tree.add(items_04);
 
tree.add(items_05);
 
tree.add(items_06);
 
tree.add(items_07);
 
tree.add(items_08);
 
tree.add(items_09);
 
tree.add(items_12);
 
tree.add(items_13);
 
tree.add(items_14);
 

document.write(tree);
 // 最后,用document.write(根对象);写到页面显示 
 
 
显示效果如下：

树形菜单(使用xtree控件实现)_javascript