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 相关文章推荐
如何实现iframe(嵌入式帧)的自适应高度
Jul 26 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
node.js的事件机制
Feb 08 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 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中simplexml_load_file函数用法实例
2014/11/12 PHP
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
Python中decorator使用实例
2015/04/14 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
tensorflow获取变量维度信息
2018/03/10 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
简单了解django缓存方式及配置
2019/07/19 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
Python数组并集交集补集代码实例
2020/02/18 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
运动会表扬稿大全
2014/01/16 职场文书
开学寄语大全
2014/04/08 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
十佳青年事迹材料
2014/08/21 职场文书
学雷锋的心得体会
2014/09/04 职场文书
pandas数值排序的实现实例
2021/07/25 Python
MySQL中dd::columns表结构转table过程及应用详解
2022/09/23 MySQL