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 相关文章推荐
javascript TextArea动态显示剩余字符
Oct 22 Javascript
JS.elementGetStyle(element, style)应用示例
Sep 24 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
Dec 24 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
Node.js的文件权限及读写flag详解
Oct 11 Javascript
js+css3制作时钟特效
Oct 16 Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 Javascript
详解支持Angular 2的表格控件
Jan 19 Javascript
javascript中undefined的本质解析
Jul 31 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 Javascript
jQuery实现日历效果
Sep 11 jQuery
几行代码轻松搞定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
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
深入理解php的MySQL连接类
2013/06/07 PHP
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
php中{}大括号是什么意思
2013/12/01 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
[01:32]2016国际邀请赛中国区预选赛IG战队首日赛后采访
2016/06/27 DOTA
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
python实现动态数组的示例代码
2019/07/15 Python
Python shelve模块实现解析
2019/08/28 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
python求绝对值的三种方法小结
2019/12/04 Python
体育教师自荐信范文
2013/12/16 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
财政局个人总结
2015/03/04 职场文书
钱学森观后感
2015/06/04 职场文书
单位车辆管理制度
2015/08/05 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书