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 相关文章推荐
基于jquery的cookie的用法
Jan 10 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
Mar 03 Javascript
javascript实现网页字符定位的方法
Jul 14 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 Javascript
原生JS实现拖拽功能
Dec 16 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
twig里使用js变量的方法
2016/02/05 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
2012/02/03 Javascript
js实现收缩菜单效果实例代码
2013/10/30 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
用JS实现选项卡
2020/03/23 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
python实现发送邮件功能
2017/07/22 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
python nmap实现端口扫描器教程
2020/05/28 Python
python中np是做什么的
2020/07/21 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
小学教师的个人自我鉴定
2013/10/26 职场文书
高中毕业自我鉴定
2013/12/16 职场文书
会计职业生涯规划书
2014/01/13 职场文书
群众路线教育实践活动方案
2014/02/02 职场文书
《放飞蜻蜓》教学反思
2014/04/27 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
婚礼答谢词范文
2015/09/29 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
Pygame Event事件模块的详细示例
2021/11/17 Python