乳房太大必要时要缩小_美美生活馆

IT时代

首页

JS做的树导航控件

06月 6th, 2009 by Skylin

近段时间根据公司的需要，使用JS做了一个树导航控件，如下图：

 

手动添加

 

 
  1. window.onload = function()  
  2.     {  
  3.         var navigation = new Navigation(document.getElementById(‘aa’),‘我的导航’);  
  4.         navigation.addLayer(‘学校管理’);  
  5.         navigation.addLayer(‘教师管理’);  
  6.         navigation.addLayer(‘杨潇管理’);  
  7.         navigation.getTree(0).createRootNode(1000,‘我是谁’,undefined,‘aa’);  
  8.         navigation.getTree(0).createRootNode(1001,‘我是杨潇’);  
  9.         navigation.getTree(1).createRootNode(1001,‘我是杨潇’);  
  10.         navigation.getTree(0).getRootNode(0).createChildNode(1002,‘我是杨潇’);  
  11.         navigation.getTree(0).getRootNode(0).createChildNode(1002,‘我是杨潇’);  
  12.         navigation.getTree(0).getRootNode(0).createChildNode(1002,‘我是杨潇’);  
  13.         navigation.getTree(0).getRootNode(0).createChildNode(1002,‘我是杨潇’);  
  14.         navigation.getTree(0).getRootNode(0).createChildNode(1002,‘我是杨潇’);  
  15.         navigation.getTree(0).getRootNode(0).createChildNode(1002,‘我是杨潇’);  
  16.         navigation.getTree(0).getRootNode(0).createChildNode(1002,‘我是杨潇’);  
  17.         navigation.getTree(0).getRootNode(0).createChildNode(1002,‘我是杨潇’);  
  18.         navigation.getTree(0).getRootNode(0).createChildNode(1002,‘我是杨潇’);  
  19.         navigation.getTree(0).getRootNode(0).createChildNode(1002,‘我是杨潇’);  
  20.         navigation.getTree(0).getRootNode(0).createChildNode(1002,‘我是杨潇’);  
  21.         navigation.getTree(0).getRootNode(0).createChildNode(1002,‘我是杨潇’);  
  22.         navigation.getTree(0).getRootNode(0).createChildNode(1002,‘我是杨潇’);  
  23.         navigation.getTree(0).getRootNode(0).createChildNode(1002,‘我是杨潇’);  
  24.         navigation.getTree(0).getRootNode(0).createChildNode(1002,‘我是杨潇’);  
  25.         navigation.getTree(0).getRootNode(0).createChildNode(1002,‘我是杨潇’);  
  26.         navigation.getTree(0).getRootNode(0).createChildNode(1002,‘我是杨潇’);  
  27.         navigation.getTree(0).getRootNode(0).createChildNode(1002,‘我是杨潇’);  
  28.         navigation.getTree(0).getRootNode(0).createChildNode(1002,‘我是杨潇’);  
  29.         navigation.getTree(0).getRootNode(0).createChildNode(1002,‘我是杨潇’);  
  30.         navigation.getTree(0).getRootNode(0).createChildNode(1002,‘我是杨潇’);  
  31.         navigation.getTree(0).getRootNode(0).createChildNode(1002,‘我是杨潇’);  
  32.         navigation.getTree(0).getRootNode(0).createChildNode(1002,‘我是杨潇’);  
  33.         navigation.getTree(0).getRootNode(0).createChildNode(1002,‘我是杨潇’);  
  34.         navigation.getTree(0).getRootNode(0).getChildNode(0).createChildNode(1002,‘我是郑宇’);  
  35.         navigation.getTree(0).getRootNode(0).getChildNode(0).getChildNode(0).parentNode.parentNode.createChildNode(1002,‘我是丁双文’,”,‘aa’);  
  36.     }  
  37.       
  38.     function aa()  
  39.     {  
  40.         window.location = ‘www.google.com’;  
  41.     }  

 

基本采用DOM风格来进行编写的。下面说明一下各个函数参数的用法。

 

 
  1. /* 
  2.  * 导航构造函数 
  3.  * targetObj:目标对象,导航显示区域 
  4.  * title:标题名称 
  5.  */  
  6. Navigation(targetObj,title)  

 

 

 
  1. /* 
  2.  * 添加层级 
  3.  * layerTitle:层级标题文本 
  4.  * isShow:添加的层级是否打开;如果所有层级不填写，则默认第一个是打开状态 
  5.  */  
  6. addLayer(layerTitle,isShow)  

 

 
  1. /* 
  2.  * 获取层级树 
  3.  * num:层级索引，获取指定层级的树节点 
  4.  */  
  5. getTree(num)  

 

 
  1. /* 
  2.  * 创建主节点 
  3.  * nodeId:节点id,可以用来存储数据库中的ID值 
  4.  * nodeText:节点文本,用来显示 
  5.  * picStyle：节点样式 
  6.  * func：点击回调的函数 
  7.  */  
  8. createRootNode(nodeId,nodeText,picStyle,func)  

 

 
  1. /* 
  2.  * 获取主节点 
  3.  * num:主节点索引,可以用来获取指定主节点 
  4.  */  
  5. getRootNode(num)  

 

 
  1. /* 
  2.  * 创建子节点 
  3.  * nodeId:节点id,可以用来存储数据库中的ID值 
  4.  * nodeText:节点文本,用来显示 
  5.  * picStyle：节点样式 
  6.  * func:点击回调的函数 
  7.  */  
  8. createChildNode(nodeId,nodeText,picStyle,func)  

 

 
  1. /* 
  2.  * 获取子节点 
  3.  * num:节点索引,可以用来获取指定子节点 
  4.  */  
  5. getChildNode(num)  

以上是手动操作的例子和相关的方法参数说明。

另外，我们还可以使用XML来形成树导航，XML格式如下：

文件：tree.xml

 

 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <Navigation title="我的导航1">  
  3.     <Layer title="学校管理" isShow="">  
  4.         <Node nodeId="" title="我是谁" picStyle="tree-map-img-show" func="">  
  5.             <Node nodeId="" title="我是谁" picStyle="tree-map-img-show" func=""/>  
  6.             <Node nodeId="" title="我是谁" picStyle="tree-map-img-show" func=""/>  
  7.         </Node>  
  8.         <Node nodeId="" title="我是郑宇" picStyle="tree-map-img-show" func="">  
  9.             <Node nodeId="" title="我是郑宇" picStyle="tree-map-img-show" func="">  
  10.                <Node nodeId="" title="我是谁" picStyle="tree-map-img-show" func="aa"/>  
  11.                <Node nodeId="" title="我是谁" picStyle="tree-map-img-show" func=""/>  
  12.             </Node>  
  13.             <Node nodeId="" title="我是谁" picStyle="tree-map-img-show" func=""/>  
  14.             <Node nodeId="" title="我是谁" picStyle="tree-map-img-show" func=""/>  
  15.         </Node>  
  16.     </Layer>  
  17.     <Layer title="教师管理" isShow="">  
  18.         <Node nodeId="" title="我是杨潇" picStyle="" func="">  
  19.             <Node nodeId="" title="我是谁" picStyle="" func=""/>  
  20.             <Node nodeId="" title="我是谁" picStyle="" func=""/>  
  21.         </Node>  
  22.     </Layer>  
  23.     <Layer title="教师管理" isShow="">  
  24.         <Node nodeId="" title="我是杨潇" picStyle="" func="">  
  25.             <Node nodeId="" title="我是谁" picStyle="" func=""/>  
  26.             <Node nodeId="" title="我是谁" picStyle="" func=""/>  
  27.         </Node>  
  28.     </Layer>  
  29.     <Layer title="教师管理" isShow="">  
  30.         <Node nodeId="" title="我是杨潇" picStyle="" func="">  
  31.             <Node nodeId="" title="我是谁" picStyle="" func=""/>  
  32.             <Node nodeId="" title="我是谁" picStyle="" func=""/>  
  33.         </Node>  
  34.     </Layer>  
  35. </Navigation>  

 

XML格式基本如上例，和相关方法参数对应，比较简单，这里就不做详细介绍了。

下面是使用XML文件创建的代码：

 

 
  1. window.onload = function()  
  2. {  
  3.     var navigation = new Navigation(document.getElementById(‘aa’),‘我的导航’);  
  4.     navigation.load(‘tree.xml’);  
  5. }  
  6.   
  7. function aa()  
  8. {  
  9.     window.location = ‘www.google.com’;  
  10. }  

 

都比较简单。这里也不多讲了：）

下面是例子的链接地址：

http://www.oursit.com/example/tree2/

 

下载实例：http://www.oursit.com/example/tree2/tree2.rar

实例里面包含4个js文件，其实这4个JS文件都是相同的。

navigation-max.js      有动画效果（未压缩）

navigation.js               有动画效果（已压缩）

navigation-1.js           无动画效果（未压缩）

navigation-1-min.js   无动画效果（已压缩）

 

如果您有什么问题或疑问，欢迎一起讨论：）

Posted in JAVASCRIPT |

Leave a Comment

搜索：

最新日志

分类

存档页

标签

链接

最新评论

功能

© 2008 IT时代 . Ported to Wordpress