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


Posted in Javascript onMay 03, 2007

树菜单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];
}
}
}
-->  

Javascript 相关文章推荐
ext form 表单提交数据的方法小结
Aug 08 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
深入讲解AngularJS中的自定义指令的使用
Jun 18 Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 Javascript
微信小程序canvas拖拽、截图组件功能
Sep 04 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
JavaScript判断对象和数组的两种方法
May 31 Javascript
几行代码轻松搞定jquery实现flash8类似的连接效果
May 03 #Javascript
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 #Javascript
javascript静态的url如何传递
May 03 #Javascript
可以支持多中格式的JS键盘
May 02 #Javascript
javascript英文日期(有时间)选择器
May 02 #Javascript
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 #Javascript
JavaScript 实现??打印?理
Apr 28 #Javascript
You might like
小偷PHP+Html+缓存
2006/12/20 PHP
一个图形显示IP的PHP程序代码
2007/10/19 PHP
PHP编程中字符串处理的5个技巧小结
2007/11/13 PHP
PHP 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
如何实现JS函数的重载
2006/09/22 Javascript
JavaScript 字符串连接性能优化
2008/12/20 Javascript
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
jQuery实现文档树效果
2017/02/20 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
vue动态设置页面title的方法实例
2020/08/23 Javascript
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python多线程学习资料
2012/12/19 Python
python多重继承实例
2014/10/11 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
介绍一下linux的文件系统
2012/03/20 面试题
数控专业大学生的自我鉴定
2013/11/13 职场文书
社团文化节邀请函
2014/01/10 职场文书
九年级物理教学反思
2014/01/29 职场文书
会议室标语
2014/06/21 职场文书
住房抵押登记委托书
2014/09/27 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
2016大学优秀学生干部事迹材料
2016/03/01 职场文书
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js