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 相关文章推荐
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
Vue.js实现表格渲染的方法
Sep 07 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
如何能分清npm cnpm npx nvm
Jan 17 Javascript
微信小程序3D轮播实现代码
Sep 19 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 Javascript
JavaScript常用工具函数库汇总
Sep 17 Javascript
在nuxt中使用路由重定向的实例
Nov 06 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
YII使用url组件美化管理的方法
2015/12/28 PHP
javascript 面向对象编程 万物皆对象
2009/09/17 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
javascript作用域和闭包使用详解
2014/04/25 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
python移位运算的实现
2019/07/15 Python
python 回溯法模板详解
2020/02/26 Python
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
毕业生求职推荐信
2013/11/04 职场文书
营业经理岗位职责
2013/11/10 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
医院院务公开实施方案
2014/05/03 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技