javascript+dom树型菜单类,希望朋友们一起进步

 更新时间:2007年05月03日 00:00:00   作者:  
树菜单js网上多得是,自己写了一个树菜单类,自认为还不错,公开大家共享和探讨,和大家一起进步最快乐!!
/*  KuoMart.com__MyKuoMart , Create By ybcola(at)163.com , 2006-7-2
   Last Modified 2006-7-2 , ybcola@163.com */
<!--
function Dtree(){
this.MenuGroupClose="images/treeview_close.gif"; //菜单关闭图标
this.MenuGroupOpen="images/treeview_open.gif"; //菜单打开图标
this.MenuItemClass=""; //菜单项样式
this.MenuItemInfoClass=""; //菜单链接样式
this.MenuItemlPad="12px";//下级菜单缩进仁值
this.DefaultGroupState=false; //菜单组装入时默认状态
document.write("<div id=\"treeroot\"></div>");
this.Node=document.getElementById("treeroot");
//0结点DOM对像,数组1为连接显示,2为连接href,3为连接target,4为连接显示前图标
this.AddItem=function(menuinfo){
var div=creatediv();
  var div1=creatediv();
var ico=[this.MenuGroupClose,this.MenuGroupOpen];
div.className=this.MenuItemClass;
div1.style.marginLeft=this.MenuItemlPad;
div1.style.display=this.DefaultGroupState?"":"none";
var Node=menuinfo[0]?menuinfo[0][1]:this.Node;
var iteminfo="";
if(menuinfo[4]) iteminfo="<img src=\""+menuinfo[4]+"\" align=\"absmiddle\">";
if(menuinfo[2]) iteminfo+=" <a href=\""+menuinfo[2]+"\" target=\""+menuinfo[3]+"\" class=\""+this.MenuItemInfoClass+"\">";
iteminfo+=menuinfo[1];
if(menuinfo[2])iteminfo+="</a>";
div.innerHTML=iteminfo;
Node.appendChild(div);
Node.appendChild(div1);
if(menuinfo[0]){
if(!menuinfo[0][0].havechild) {
var as=document.createElement("img");
as.src=ico[1];
as.align="absmiddle";
as.onclick=function(){
 swapshow(Node,as,ico);
}
menuinfo[0][0].insertBefore(as,menuinfo[0][0].firstChild);
as.insertAdjacentText("afterEnd"," ");
menuinfo[0][0].havechild=true;
}
}
return [div,div1];
}

function creatediv(){
var div=document.createElement("div");
return div;
}

function swapshow(obj,ico,oo){
if(obj.style.display!=""){
obj.style.display="";
ico.src=oo[0];

else{
obj.style.display="none";
ico.src=oo[1];
}
}
}
-->  

相关文章

  • JS的Form表单转JSON格式的操作代码

    JS的Form表单转JSON格式的操作代码

    这篇文章主要介绍了JS的Form表单转JSON格式的操作代码,本文通过实例代码给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-05-05
  • 调用jQuery滑出效果时闪烁的解决方法

    调用jQuery滑出效果时闪烁的解决方法

    这篇文章主要介绍了在调用jQuery 滑出效果时,层会现次闪烁一下的解决方法,需要的朋友可以参考下
    2014-03-03
  • npm淘宝镜像修改讲解

    npm淘宝镜像修改讲解

    这篇文章主要介绍了npm淘宝镜像修改讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • canvas 绘制圆形时钟

    canvas 绘制圆形时钟

    本文主要分享了利用canvas如何绘制圆形时钟的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • js实现select跳转功能代码

    js实现select跳转功能代码

    实现select跳转的方法有很多,本例为大家介绍的是js实现的,通过location.href获取跳转地址,需要的朋友可以看看
    2014-10-10
  • Bootstrap3制作自己的导航栏

    Bootstrap3制作自己的导航栏

    这篇文章主要教会大家如何利用Bootstrap3制作自己的导航栏,设计自己喜欢的元素、样式,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • JavaScript的removeChild()函数用法详解

    JavaScript的removeChild()函数用法详解

    removechild 函数可以删除父元素的指定子元素,通过本文给大家介绍javascript的removeChild()函数用法,对js removechild函数相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • 加速IE的Javascript document输出的方法

    加速IE的Javascript document输出的方法

    加入这样的一行代码IE的document的访问速度至少可以提高5倍以上,对于页面使用document的朋友绝对是个好方法。
    2010-12-12
  • Layui table field初始化加载时进行隐藏的方法

    Layui table field初始化加载时进行隐藏的方法

    今天小编就为大家分享一篇Layui table field初始化加载时进行隐藏的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js中调用微信的扫描二维码功能的实现代码

    js中调用微信的扫描二维码功能的实现代码

    这篇文章主要介绍了在js中调用微信的扫描二维码功能的实现代码,本文给大家分享了注意事项及常见问题分析,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04

最新评论