`
weiwu83
  • 浏览: 191419 次
  • 来自: ...
社区版块
存档分类
最新评论

生成XML文件，然后用JS调入XML数据生成树型菜单

    博客分类：
  • js
XMLIEFirefoxJavaScript浏览器 
阅读更多
xml 代码
  1. <!--  
  2. = * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = *    
  3. *    作 者：  我本有心   
  4. =    QQ:     381584252   
  5. *     E-Mail: hztgcl1986@163.com  
  6. =     转载请注明出处及作者！   
  7. *     版权所有,侵权必究！！！   
  8. =   
  9. *    http://www.8848so.com，人物搜索，8848So       
  10. = * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = *    
  11. -->  
  12. <?xml version='1.0' encoding='utf-8'?>  
  13. <menu>  
  14. <rootLevel id='2'>  
  15. <selfName>美国</selfName>  
  16. </rootLevel>  
  17. <rootLevel id='1'>  
  18. <selfName>中国</selfName>  
  19. <level id='4'>  
  20. <selfName>河南</selfName>  
  21. <parentID>1</parentID>  
  22. </level>  
  23. <level id='3'>  
  24. <selfName>山东</selfName>  
  25. <parentID>1</parentID>  
  26. <level id='6'>  
  27. <selfName>菏泽</selfName>  
  28. <parentID>3</parentID>  
  29. <level id='8'>  
  30. <selfName>曹县</selfName>  
  31. <parentID>6</parentID>  
  32. </level>  
  33. <level id='7'>  
  34. <selfName>东明</selfName>  
  35. <parentID>6</parentID>  
  36. </level>  
  37. </level>  
  38. <level id='5'>  
  39. <selfName>济南</selfName>  
  40. <parentID>3</parentID>  
  41. </level>  
  42. </level>  
  43. </rootLevel>  
  44. </menu>  
javascript 树型菜单
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>JavaScript + XML树型菜单</title>  
  6. <style type="text/css">  
  7. li.plus   
  8. {   
  9.     list-style-type:none;   
  10.     list-style-image:url(Images/Plus.png); /*展开时图片,如"+"*/   
  11.     cursor:hand;   
  12. }   
  13.   
  14. li.minus   
  15. {   
  16.     list-style-type:none;   
  17.     list-style-image:url(Images/Minus.png); /*折叠时图片,如"-"*/   
  18.     cursor:hand;   
  19. }   
  20.   
  21. li.item   
  22. {   
  23.     list-style-type:none;   
  24.     list-style-image:url(Images/Item.png); /*无子项目时图片*/   
  25.     cursor:hand;   
  26. }   
  27. </style>  
  28. </head>  
  29.   
  30. <body>  
  31. <ul id="tree">  
  32.     <li>树</li>  
  33. </ul>  
  34. <!--  
  35. = * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = *    
  36. *    作 者：  我本有心   
  37. =    QQ:     381584252   
  38. *     E-Mail: hztgcl1986@163.com  
  39. =     转载请注明出处及作者！   
  40. *     版权所有,侵权必究！！！   
  41. =   
  42. *    http://www.8848so.com，人物搜索，8848So       
  43. = * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = *    
  44. -->  
  45. <script language="javascript" type="text/javascript">  
  46. treeMenu("tree"); //树   
  47.   
  48. function createXMLDom() //创建XMLDOM对象函数，跨浏览器解决方案   
  49. {   
  50.     var xmlDom;   
  51.        
  52.     if (window.ActiveXObject) //IE   
  53.     {   
  54.         xmlDom = new ActiveXObject("Microsoft.XMLDOM");   
  55.         xmlDom.async = false;   
  56.         xmlDom.load("/XML/InfoClass.xml");   
  57.         if (xmlDom.parseError.errorCode != 0)   
  58.         {   
  59.             window.alert("XML文件加载错误. errorCode：" + xmlDom.parseError.errorCode + " reason：" + xmlDom.parseError.reason);   
  60.             return false;   
  61.         }   
  62.         else   
  63.         {return xmlDom;}   
  64.     }   
  65.     else if (document.implementation && document.implementation.createDocument) //FireFox   
  66.     {   
  67.         xmlDom = document.implementation.createDocument("","",null);   
  68.         xmlDom.async = false;   
  69.         xmlDom.load("/XML/InfoClass.xml");   
  70.         return xmlDom;   
  71.     }   
  72.     else   
  73.     {   
  74.         window.alert("不支持XMLDOM对象");   
  75.         return false;   
  76.     }   
  77. }   
  78.   
  79. function treeMenu(ulID)   
  80. {   
  81.     var xmlDom = createXMLDom(); //创建XMLDOM对象   
  82.     var menu = xmlDom.documentElement; //xml文档根节点   
  83.     var rootLevels = menu.getElementsByTagName("rootLevel"); //一级分类集合   
  84.            
  85.     var ul = document.getElementById(ulID);   
  86.     for (var i=0;i<rootLevels.length;i++) //循环显示一级分类   
  87.     {   
  88.         var selfID = rootLevels[i].getAttribute("id");   
  89.         var selfName = rootLevels[i].getElementsByTagName("selfName")[0].firstChild.nodeValue;   
  90.         var li = document.createElement("li");   
  91.         li.innerHTML = selfName;   
  92.         li.id = selfID;   
  93.                
  94.         var levels = rootLevels[i].getElementsByTagName("level"); //集合   
  95.         if (levels.length > 0) //有子类   
  96.         {   
  97.             li.className = "plus";   
  98.             li.onclick = function () {liClick(this,this.id,xmlDom);} //单击事件   
  99.         }   
  100.         else //无子类   
  101.         {   
  102.             li.className = "item";   
  103.         }   
  104.         ul.appendChild(li);   
  105.     }   
  106. }   
  107.   
  108. function liClick(li,id,xmlDom,event)   
  109. {   
  110.     var childUL = li.getElementsByTagName("ul"); //ul集合   
  111.        
  112.     if (childUL.length > 0)//折叠   
  113.     {closeChild(li,childUL);}   
  114.     else //展开   
  115.     {openChild(li,id,xmlDom);}   
  116.        
  117.     cancelBuble(event); //plus停止事件冒泡   
  118. }   
  119.   
  120. function openChild(li,id,xmlDom) //展开函数   
  121. {   
  122.     li.className = "minus"; //折叠图标   
  123.        
  124.     var levels = xmlDom.documentElement.getElementsByTagName("level"); //level集合   
  125.     var ul = document.createElement("ul");   
  126.     for (var m=0;m<levels.length;m++)   
  127.     {   
  128.         var selfID = levels[m].getAttribute("id");   
  129.         var selfName = levels[m].getElementsByTagName("selfName")[0].firstChild.nodeValue;   
  130.         var parentID = levels[m].getElementsByTagName("parentID")[0].firstChild.nodeValue;   
  131.            
  132.         if (id == parentID) //属于id子类   
  133.         {   
  134.             var ulli = document.createElement("li");   
  135.             ulli.innerHTML = selfName;   
  136.             ulli.id = selfID;   
  137.                
  138.             var childLevels = levels[m].getElementsByTagName("level"); //集合   
  139.             if (childLevels.length > 0) //有子类   
  140.             {   
  141.                 ulli.className = "plus";   
  142.                    
  143.                 /*停止事件冒泡，跨浏览器解决方案 Start*/   
  144.                 if (window.ActiveXObject) //IE   
  145.                 {ulli.onclick = function () {liClick(this,this.id,xmlDom,event);}} //单击事件   
  146.                 else //FireFox   
  147.                 {ulli.onclick = function (event) {liClick(this,this.id,xmlDom,event);}} //单击   
  148.                 /*停止事件冒泡，跨浏览器解决方案 End*/   
  149.             }   
  150.             else //无子类   
  151.             {   
  152.                 ulli.className = "item";   
  153.                    
  154.                 /*停止事件冒泡，跨浏览器解决方案 Start*/   
  155.                 if (window.ActiveXObject) //IE   
  156.                 {ulli.onclick = function () {cancelBuble(event);}} //item停止事件冒泡   
  157.                 else //FireFox   
  158.                 {ulli.onclick = function (event) {cancelBuble(event);}} //item停止事件冒泡   
  159.                 /*停止事件冒泡，跨浏览器解决方案 End*/   
  160.             }   
  161.                
  162.             ul.appendChild(ulli);   
  163.         }   
  164.            
  165.     }   
  166.        
  167.     li.appendChild(ul);   
  168. }   
  169.   
  170. function closeChild(li,childUL) //折叠函数   
  171. {   
  172.     li.className = "plus"; //展开图标   
  173.        
  174.     for (var j=0;j<childUL.length;j++) //循环删除ul,ul可能有子ul、li孙ul、li   
  175.     {childUL[j].parentNode.removeChild(childUL[j]);}   
  176. }   
  177.   
  178. function cancelBuble(domEvent) //停止事件冒泡函数,跨浏览器解决方案   
  179. {   
  180.     if (window.ActiveXObject) //IE   
  181.     {domEvent.cancelBubble = true;}   
  182.     else //FireFox   
  183.     {domEvent.stopPropagation();}   
  184. }   
  185. </script>  
  186. </body>  
  187. </html>  
分享到：
| [Appfuse学习] 起步
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    java操纵xml文件的读写,并根据xml生成树型菜单

    ### Java操作XML文件读写与树型...通过上述分析，我们不仅了解了如何使用Java和JDOM库读写XML文件，还探讨了基于XML数据生成树型菜单的基本思路。这对于开发需要处理复杂结构化数据的应用程序来说是非常有用的技能。

    js读取xml文件，生成树型结构

    为了将XML数据转换为树形结构，我们需要递归地遍历每个节点并创建相应的JavaScript对象。每个对象代表一个节点，其属性对应于XML节点的属性，其子节点则是一个包含子对象的数组。以下是一个基础的递归函数示例： ``...

    javascript生成树型菜单

    调用该程序可以自动生成树型菜单 简单方便

    c#实现对XML（OPML）文档动态生成树型菜单及对相应节点的操作维护

    首先，使用XDocument.Load方法加载OPML文件，然后通过XPath或LINQ查询提取数据，构建树型菜单所需的节点模型。 2. **动态生成树型菜单**： 使用WinForms或WPF的TreeView控件，根据解析的OPML数据创建TreeNode对象...

    简单好用的JS树型菜单

    在网页开发中，树型菜单是一种常见的用户界面元素，它以层级结构展示数据，便于用户导航和操作。本文将深入探讨“简单好用的JS树型菜单”这一主题，包括其设计原理、实现方法以及如何进行动态添加节点。 首先，我们...

    Javascript树型菜单

    JavaScript树型菜单是一种在网页中展示层次结构数据的交互式元素，常用于网站导航、文件系统浏览或组织复杂数据。这种菜单通常以节点的形式呈现，每个节点可以展开或折叠，显示其子节点。在给定的文件列表中，我们...

    经典的js树型菜单 javascript脚本

    在这个“经典的js树型菜单”示例中，我们将深入探讨如何使用JavaScript来创建一个可展开和折叠的树状菜单。 树型菜单在网站导航中非常常见，它可以帮助用户组织和浏览大量的层次结构信息。通过JavaScript，我们可以...

    无限级可刷新Js树型菜单

    无限级可刷新Js树型菜单是一种常见的前端交互设计，它在网页应用中广泛用于展示具有层级关系的数据，如目录结构、组织架构、导航菜单等。这种菜单的特点是它可以无限制地展开子节点，同时支持动态刷新，即在用户操作...

    ajax动态生成树型菜单

    在本项目中，我们将探讨如何使用Ajax、Struts2框架以及Dojo库来动态地从数据库中获取数据并生成树型菜单。这个功能常见于网站的导航系统，允许用户以层级结构浏览和操作数据。 首先，`Ajax`（Asynchronous ...

    XML树型菜单

    在本场景中，"XML树型菜单"指的是利用XML数据结构来构建可交互的、层次化的菜单系统。这样的菜单系统具有良好的可扩展性和自定义性，能够根据XML文档中的结构自动构建出树状的导航菜单。 1. **XML基础**： - XML是...

    精美的ajax树型菜单

    - `TreeView_Kernel.js` 和 `TreeView_Support.js`：这两个JavaScript文件很可能是实现树型菜单功能的核心脚本。JavaScript是Web开发中的主要脚本语言，负责处理用户的交互，实现动态效果和功能。 - `utils.js`：这...

    多个简单漂亮的树型菜单JS代码

    在网页设计中，树型菜单是一种常见的用户界面元素，它以层级结构展示数据，使得信息组织更为清晰，便于用户浏览和导航。本文将详细介绍“多个简单漂亮的树型菜单JS代码”这一主题，以及如何利用提供的资源进行应用。...

    delphi 树型控件自动根据数据集生成树型结构

    本文将详细讲解如何在 Delphi7 中使用树型控件，并自动根据数据集生成树型结构。 首先，理解 TTreeView 控件的基本操作。TTreeView 提供了一个可视化的组件，用于展示具有父节点和子节点的关系的数据。每个节点表示...

    非常实用的JS树型菜单

    - **纯JavaScript实现**：可以使用DOM操作（如`appendChild`、`removeChild`、`innerHTML`等）和事件监听（如`click`）来实现树型菜单的交互。这种方式需要编写较多的代码，但对环境依赖小。 - **jQuery插件**：...

    AJAX+XML实现的树型菜单

    总结来说，"AJAX+XML实现的树型菜单"是一个利用AJAX技术实现的动态菜单系统，它利用异步通信和XML数据格式，实现了用户友好、无刷新的导航体验。这个示例对于理解AJAX的工作原理以及如何用它来构建交互式Web组件非常...

    JavaScript动态树型菜单

    JavaScript动态树型菜单是一种常见的网页交互元素，常用于展示层级结构的数据，如网站导航、文件目录或组织架构等。在Web开发中，这种菜单能够帮助用户以直观的方式探索多级内容，通过点击加减号（或者其他图标）...

    JS树型菜单的控件

    5. **递归**：由于树型菜单的层级特性，通常需要使用递归函数来生成菜单结构。递归函数会遍历每个节点，并对每个子节点调用自身，直到所有子节点都被处理。 6. **状态管理**：为了记住每个节点的展开状态，需要一个...

    JS生成树型结构

    在JavaScript（JS）编程中，生成树型结构是一种常见的需求，尤其在数据可视化、文件系统模拟、目录结构展示以及组织复杂的数据关系时。本篇将深入探讨如何利用JavaScript实现这样的功能，结合简单、易用且美观的代码...

    js动态树型结构 树型菜单

    在这个场景下，"js动态树型结构 树型菜单"指的是使用JavaScript实现的可以动态加载、展示和操作的树状菜单系统。 树型结构是一种数据表示形式，由节点和边组成，每个节点可以有零个或多个子节点。在JavaScript中，...

    生成树型菜单状的dropdownlist

    在IT领域，生成树型菜单状的dropdownlist是一种常见的用户界面设计，主要用于提供层次结构的数据展示，例如网站导航、文件系统浏览或者组织架构展示。这种交互元素能够有效地节省空间，同时提供多级导航功能，使得...

Magicbox
Global site tag (gtag.js) - Google Analytics