`
leyoo
  • 浏览: 44435 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

js 实现菜单树

HTML游戏F# 
阅读更多
// 帮助菜单栏目
var menuList =
[
   {
     'FMENU_NAME':'注册与登录',
     'CHILDS':[
   {'CMENU_NAME':'如何注册','LINK_URL':'http://www.3yx.com/memberAction.do?method=add'},
       {'CMENU_NAME':'安全模式登录','LINK_URL':'help_aqmsLogin.html'},
       {'CMENU_NAME':'密码错误如何处理','LINK_URL':'http://www.3yx.com/forward.do?method=menuForward&forward=getpasswordback'}
       ]
   },
   {
     'FMENU_NAME':'如何充值',
     'CHILDS':[
   {'CMENU_NAME':'如何充值','LINK_URL':'http://www.3yx.com/gameCardSocketAction.do?method=getCarCZPage'},
       {'CMENU_NAME':'如何购卡','LINK_URL':'#'},
       {'CMENU_NAME':'如何开通网银','LINK_URL':'help_internetBank.html'}
       ]
   },
   {
     'FMENU_NAME':'买家帮助',
     'CHILDS':[
       {'CMENU_NAME':'搜索商品','LINK_URL':'help_serachGoods.html'},
       {'CMENU_NAME':'支付密码错误处理','LINK_URL':'http://www.3yx.com/forward.do?method=menuForward&forward=hyzx_zfpassword'},
       ]
   },
   {
     'FMENU_NAME':'卖家帮助',
     'CHILDS':[
       {'CMENU_NAME':'发布货物','LINK_URL':'help_fbwb.html'},
       {'CMENU_NAME':'管理货物','LINK_URL':'help_glwb.html'},
       {'CMENU_NAME':'商家诚信认证体系','LINK_URL':'#'},
       ]
   },
   {
     'FMENU_NAME':'财务中心',
     'CHILDS':[
       {'CMENU_NAME':'账户锁定','LINK_URL':'help_sdzh.html'},
       {'CMENU_NAME':'实名认证','LINK_URL':'help_smrz.html'}
       ]
   },
    {
     'FMENU_NAME':'个人信息',
     'CHILDS':[
       {'CMENU_NAME':'密保卡','LINK_URL':'help_mbk.html'}
       ]
   },
{
     'FMENU_NAME':'全自动交易',
     'CHILDS':[
       {'CMENU_NAME':'交易介绍','LINK_URL':'help_gfjyjs.html'},
       {'CMENU_NAME':'如何购买','LINK_URL':'help_gfwhatbuy.html'},
       {'CMENU_NAME':'如何出售','LINK_URL':'help_gfwhatsell.html'},
       {'CMENU_NAME':'全自动交易常见问题','LINK_URL':'help_gfQuestions.html'}
       ]
   },
   {
     'FMENU_NAME':'交易规则',
     'CHILDS':[
       {'CMENU_NAME':'正常流程','LINK_URL':'help_zclc.html'},
       {'CMENU_NAME':'退款处理','LINK_URL':'help_tkcl.html'},
       {'CMENU_NAME':'买家权益保障','LINK_URL':'#'}
      ]
   },
{
     'FMENU_NAME':'游戏携带与交易表',
     'CHILDS':[
       {'CMENU_NAME':'地下城与勇士','LINK_URL':'dnf.html'}
            ]
   },
   {
     'FMENU_NAME':'收费标准',
     'CHILDS':[
       {'CMENU_NAME':'普通交易','LINK_URL':'help_ptjy.html'},
       {'CMENU_NAME':'全自动交易','LINK_URL':'help_gfjy.html'}
       ]
   },
  {
     'FMENU_NAME':'推广加盟',
     'CHILDS':[
       {'CMENU_NAME':'收货联盟','LINK_URL':'help_shlm.html'},
       {'CMENU_NAME':'推广员系统','LINK_URL':'help_tgy.html'},
       {'CMENU_NAME':'推广员系统常见问题','LINK_URL':'help_tgQuestions.html'}
       ]
   },
   {
     'FMENU_NAME':'如何获得软件支持',
     'CHILDS':[
       {'CMENU_NAME':'利润统计软件','LINK_URL':'help_lr.html'},
       {'CMENU_NAME':'库存管理系统','LINK_URL':'http://www.3yx.com/forward.do?method=menuForward&forward=product'}
       ]
   },
{
     'FMENU_NAME':'抵用券使用说明',
     'CHILDS':[
       {'CMENU_NAME':'抵用券使用说明','LINK_URL':'help_dyq.html'}
            ]
   },
{
     'FMENU_NAME':'超时赔付',
     'CHILDS':[
       {'CMENU_NAME':'超时赔付使用说明','LINK_URL':'help_pf.html'}
            ]
   },
];

function $(id)
{
  return document.getElementById(id);
}

//查找栏目所在位置
function findMenuIndex(childName)
{
  var result = new Object();
  result.parentIndex = -1;
  result.selfIndex = -1;
  result.link = '';
   for(var key in menuList)
   {
  fatherItem = menuList[key];
  childMenus = fatherItem.CHILDS;
      for(var childKey in childMenus)
      {
childItem = childMenus[childKey];
if(childItem.CMENU_NAME == childName)
{
   result.parentIndex =  key;
   result.selfIndex =  childKey;
   result.link = childItem.LINK_URL;
   break;
}
  }
   }
   return result;
};

//展开指定栏目
function expendChild(childName)
{
   if(childName != null && typeof(childName) != "undefined")
   {
      var result = findMenuIndex(childName);
      if(result != null && result.parentIndex > -1 && result.selfIndex > -1)
  {
        //展开当前栏目
    expendMenu(result.parentIndex);
var aObj = $("A_"+result.parentIndex+"_"+result.selfIndex);
if(aObj != null && typeof(aObj) != "undefined")
{
  aObj.style.color = "red";
}
  }
   }
};

//帮助菜单栏展开
function expendMenu(key)
{
    var ImgFObj = $("IMG_F_"+key);
  var childMenus = $("MENU_"+key);
  if(childMenus == null)
    return false;
  //ImgFObj.show = ImgFObj.show == "block" ?  "none" : "block" ;
  //ImgFObj.src =  (ImgFObj.show == "block" ?  "images/iecool_arrow_182.gif" : "images/iecool_arrow_182.gif") ;
  //if(childMenus && childMenus.length)
  //{
    // for(var i = 0; i < childMenus.length; i++)
  //  {
  //      childMenus[i].style.display = ImgFObj.show;
  //   }
  //}
//else
    if(childMenus)
  {
  ImgFObj.className=ImgFObj.className=="menu-close"?"menu-open":"menu-close";
    childMenus.style.display = childMenus.style.display=="block"?"none":"block";
  }
};



//菜单连接页面
function linkUrl(url,key)
{
   if(url != "" && url != undefined){
     window.location= url ;
   }
};

function left()
{
    //start
    var htmlTxt = "<div class=\"shuoming\">";
    htmlTxt +="<ul class=\"zhuce\">";

    for(var key in menuList)
    {
        fatherItem = menuList[key];
        childMenus = fatherItem.CHILDS;

        //菜单
        var txt="";
        if(key=="0")  txt=" denglu";
        var txt1="";
        txt1=" ruanjian";
        htmlTxt +="<li class=\"title"+txt+"\" > <span class=\"bold\"><span class=\"bold2"+txt1+"\" onclick = \"javascript:expendMenu("+key+");\">"+fatherItem.FMENU_NAME+"</span></span>";
        //子菜单
        htmlTxt +="<ul id=\"MENU_"+key+"\" class=\"hide\">";
        for(var childKey in childMenus)
        {
//判断是否要弹出新页面
if(childMenus[childKey].CMENU_NAME =="如何注册" || childMenus[childKey].CMENU_NAME =="密码错误如何处理" || childMenus[childKey].CMENU_NAME =="如何充值" || childMenus[childKey].CMENU_NAME =="支付密码错误处理"  || childMenus[childKey].CMENU_NAME =="库存管理系统"){
    htmlTxt +="<li class=\"list2\"><a id=\"A_"+key+"_"+childKey+"\" target=\"_blank\" class=\"sd\" href=\""+childMenus[childKey].LINK_URL+"\">"+childMenus[childKey].CMENU_NAME+"</a></li>";
} else{
                htmlTxt +="<li class=\"list2\"><a id=\"A_"+key+"_"+childKey+"\" target=\"_self\" class=\"sd\" href=\""+childMenus[childKey].LINK_URL+"\">"+childMenus[childKey].CMENU_NAME+"</a></li>";
            }
//htmlTxt +="<li class=\"list2\"><a id=\"A_"+key+"_"+childKey+"\" class=\"sd\" href=\""+childMenus[childKey].LINK_URL+"\">"+childMenus[childKey].CMENU_NAME+"</a></li>";
            //htmlTxt +="<li class=\"list2\"><a id=\"A_"+key+"_"+childKey+"\" class=\"sd\" href=\"#\" onclick=\"javascript:linkUrl('"+childMenus[childKey].LINK_URL+"','"+key+"');\">"+childMenus[childKey].CMENU_NAME+"</a></li>";
        }
        htmlTxt +="</ul>";
        htmlTxt +="</li>";
    }

    //end
    htmlTxt +="    </ul>";
    htmlTxt +="  </div>";
    document.writeln(htmlTxt);
};

function left2()//zhangh 2010-10-23
{
    document.writeln(getMenuHtml());
};
//菜单栏HTML
function getMenuHtml()//zhangh 2010-10-23
{
   var menuHtml = '<div class="member-bd"\n>';
   var fatherItem = null;
   var childItem = null;
   var childMenus = null;
   var menuLen = menuList.length;
   for(var key in menuList)
   {
    //用户菜单栏
    fatherItem = menuList[key];
    if(fatherItem != null && fatherItem.FMENU_NAME != undefined){
    menuHtml += '<div class="menu-box" id="buyer">\n';
    menuHtml += "<H3 class=\"member-bar\"><span onclick = \"javascript:expendMenu("+key+");\">"+fatherItem.FMENU_NAME+"</span>\n";
    menuHtml += "<button class=\"menu-open\" id=\"IMG_F_"+key+"\" onclick = \"javascript:expendMenu("+key+");\">-</button> \n";
    menuHtml += '</H3>\n';
    menuHtml += "<ul class=\"group\" id=\"MENU_"+key+"\" class=\"hide\" style=\"display:none;\">\n";
    childMenus = fatherItem.CHILDS;
    //用户二级栏目
      for(var childKey in childMenus)
      {
childItem = childMenus[childKey];
if(childItem != null && childItem.CMENU_NAME != undefined){
//判断是否要弹出新页面
if(childItem.CMENU_NAME =="如何注册" || childItem.CMENU_NAME =="密码错误如何处理" || childItem.CMENU_NAME =="如何充值" || childItem.CMENU_NAME =="支付密码错误处理"  || childItem.CMENU_NAME =="库存管理系统"){
    //htmlTxt +="<li class=\"list2\"><a id=\"A_"+key+"_"+childKey+"\" target=\"_blank\" class=\"sd\" href=\""+childMenus[childKey].LINK_URL+"\">"+childMenus[childKey].CMENU_NAME+"</a></li>";
    menuHtml += "<li><span><a id=\"A_"+key+"_"+childKey+"\" href="+childItem.LINK_URL+" target=\"_blank\">"+childItem.CMENU_NAME+"</a></span></li>\n";
} else{
                //htmlTxt +="<li class=\"list2\"><a id=\"A_"+key+"_"+childKey+"\" target=\"_self\" class=\"sd\" href=\""+childMenus[childKey].LINK_URL+"\">"+childMenus[childKey].CMENU_NAME+"</a></li>";
            menuHtml += "<li><span><a id=\"A_"+key+"_"+childKey+"\" href="+childItem.LINK_URL+" target=\"_self\">"+childItem.CMENU_NAME+"</a></span></li>\n";
            }
  //此栏目是否可访问
         //if(!viewMenu(childItem.CMENU_NAME)) continue;
         //menuHtml += "<tr id=\"TR_MENU_"+key+"\" style=\"display:none;\" >";
         //menuHtml += "<td style=\""+( key == menuLen - 1 &&  childKey == childMenus.length-1 ? "border-bottom:1px solid #ececec;" : "" )+"\" width=\"206\" height=\"25\" align=\"left\" background=\"images/Menu/titbg2.png\" onMouseMove=\"this.className='sidebar_bg_ys'\" onMouseOut=\"this.className='#'\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src=\"images/Menu/dot_m.gif\" width=\"3\" height=\"5\" />&nbsp;<a href=\"#\" onclick=\"javascript:MyLinkUrl({LINK_URL:'"+childItem.LINK_URL+"','TARGET':'"+childItem.TARGET+"'},'"+key+"');\"  class=\"febt\">"+childItem.CMENU_NAME+"</a></td>";
         //menuHtml += "</tr>";
         }
  }
   menuHtml +='</ul>\n';
   menuHtml +='</div>\n';
}
   }
   menuHtml +='</div>\n';
   //document.write('<SCRIPT type="text/javascript" src="hy/js/common_v2.js"></SCRIPT>');
   return menuHtml;   
  
}
function bottom()
{
};
分享到：
| js取得当前时间
评论
发表评论

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

相关推荐

    js实现菜单树

    用JS 实现的树结构，很常用也很使用的小例子。

    JavaScript 实现在树形菜单中添加、删除节点实例 js note

    JavaScript 实现在树形菜单中添加、删除节点实例 js note ...JavaScript实现在树形菜单中添加、删除节点实例，本程序侧重于学习，主要介绍一种在多级树节点中创建节点、删除节点，帮助了解树形菜单创作原理。

    js构造菜单树思路分析

    本篇主要探讨如何使用JavaScript和Java来构造菜单树，以及如何通过分析JavaScript的实现思路来辅助我们编写Java工具类。 首先，让我们了解JavaScript构造菜单树的基本思路。在JavaScript中，菜单树通常由JSON对象...

    JavaScript实现树形菜单

    通过JavaScript实现树形菜单，可以有效地展示这些层次关系，并提供方便的展开、折叠、选择等功能。 实现JavaScript树形菜单主要涉及以下几个关键技术点： 1. 数据结构设计：首先，我们需要定义一个数据结构来存储...

    左侧通用js菜单树

    "左侧通用js菜单树"是一个专门设计用于实现这一目标的组件。它通常被用在网站的左侧栏，提供一种清晰、直观的方式来展示多级菜单，帮助用户快速定位到他们需要的信息或功能。这种菜单树设计为天蓝色背景，给人一种...

    JS实现菜单收缩

    这篇博文“JS实现菜单收缩”探讨了如何利用JavaScript来动态控制网页中的菜单栏状态，使其能够在点击时展开或收起。 首先，我们需要理解JavaScript的基本语法和DOM操作。DOM（Document Object Model）是HTML和XML...

    JavaScript实现简单的树形菜单效果

    本文介绍了如何使用JavaScript实现一个简单的树形菜单效果，通过这个实例，我们可以学习到如何操作DOM、如何通过JavaScript控制样式的变化，以及如何实现一个基本的交互式菜单。 首先，我们需要了解HTML结构。从给...

    一个JS实现的树形菜单

    本篇文章将深入探讨如何用纯JavaScript实现一个功能丰富的树形菜单。 首先，理解树形菜单的基本结构至关重要。树形菜单由节点构成，每个节点可以有子节点，形成层级关系。在JavaScript中，我们可以使用对象或数组来...

    菜单树（树数据结构+JSP页面递归调用构建菜单树）

    在构建菜单树时，JavaScript和jQuery可以用于动态地创建和操作DOM元素，实现菜单的展开与折叠效果，增强用户体验。 5. **AJAX**：Asynchronous JavaScript and XML，即异步JavaScript和XML，是一种在不刷新整个页面...

    AienTree-艾恩JS无限级菜单树

    **AienTree 艾恩JS无限级菜单树详解** 在网页开发中，尤其是在后台管理系统中，无限级菜单树是一种常见的交互元素，它能够清晰地展示层级关系，并且支持动态加载，大大提升了用户体验。AienTree 是一个专门用于实现...

    树形菜单（javascript实现）

    树形菜单（javascript实现）树形菜单（javascript实现）树形菜单（javascript实现）树形菜单（javascript实现）树形菜单（javascript实现）树形菜单（javascript实现）树形菜单（javascript实现）树形菜单...

    js树形菜单加右键菜单

    总的来说，结合使用JavaScript实现的树形菜单和右键菜单，可以提供一个高效且直观的用户界面，让用户在复杂的层级数据中进行导航和操作。这种技术在内容管理系统（CMS）、文件管理工具以及其他需要展现层次关系的Web...

    HTML+CSS+JS实现的下拉菜单源码

    HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单...

    JavaScript树形控件实现无限级树形菜单

    ### JavaScript树形控件实现无限级树形菜单 #### 一、问题研究的背景和意义 随着Web应用程序的发展，特别是富客户端技术的进步，用户对于Web界面的要求越来越高，不仅需要美观的界面设计，还需要高效的数据展示...

    艾恩JS无限级菜单树-ASP带数据库及菜单管理版

    4. **JavaScript库**：`anplus.js`、`aien.tree.js`和`AIEN.AJAX.js`是实现菜单功能的关键JavaScript文件。它们可能包含了用于渲染、操作和动态加载菜单的函数。其中，`AIEN.AJAX.js`可能涉及到异步请求，用于从...

    (推荐)超级漂亮的JS树形菜单

    在标签中，“JS树形菜单”、“JavaScript树形菜单”和“树形菜单”都是对这个技术的关键词描述，强调其基于JavaScript的实现。JavaScript作为客户端脚本语言，使得树形菜单能够在用户的浏览器端动态生成和操作，无需...

    纯js实现树形导航菜单

    通过以上步骤，我们就可以实现一个基本的、纯JavaScript驱动的树形导航菜单。在实际项目中，还可以根据需求进行扩展，比如增加多级子菜单、自定义动画效果、键盘导航等功能。这个简单的例子展示了JavaScript在网页...

    带复选框JS树 Javascript树 JS树 树形菜单

    JavaScript树形菜单是一种在网页中实现层次结构数据展示的交互方式，它通常用于导航、文件管理、选项配置等场景。"带复选框"的JS树形菜单则更进一步，允许用户通过勾选复选框来选择或操作树节点，为用户提供了一种...

    js 树形菜单

    总结来说，"js树形菜单"是利用JavaScript编程实现的一种交互式的多级导航工具，而"DHTMLX Tree"是一个强大的库，为开发者提供了创建和管理树形菜单的便捷工具。通过理解和掌握这些知识，可以有效地构建高效、易用的...

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