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

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

时间: 2025-01-19 19:51:15

javascript+dom树型菜单类,希望朋友们一起进步_javascript技巧的相关文章

php树型菜单类

原理简单,学过数据结构的一看就明白是什么道理了.不过今天在使用时数据中出现了子节点id(71)小于父节点id(104).导致部分子节点没被存储入数组 修改了一下 <?php教程 class tree {     var $data = array();     var $child = array(-1=>array());     var $layer = array(-1=>-1);     var $parent = array();     var $num = array();

Javascript级联下拉菜单以及AJAX数据验证核心代码_javascript技巧

虽然也使用了Prototype.js来编写,但是由于对它的不了解,类的实现仍然是使用了<JavaScript高级程序设计>里的方法.使用AJAX进行数据验证时,最初使用的是XML来当数据源,然而在使用了一段时间后,发现XML效率太低,于是又使用JSON来做为数据源. 一年过去了,客户又提出了新的需求,最初是只要输入框的两个数据相符就行,现在的要求是两个下拉菜单的数据也要相符,于是,我利用此机会,将代码重构了一次. 需求: 1.根据下拉菜单产品名称.产品包装的选择,右面的图片要进行相应的变化.

javascript dtree: javascript树型菜单 dtree

js代码很简洁,但是实现了所有树形菜单应有的功能,安装和使用都很简单,特别是从数据库恢复成一棵树变得非常容易.下载包里自带一些常用图标,只需简单的操作,就可以实现看起来相当专业的树形菜单. 详细介绍应用dtree构建一个javascript树型菜单及其中参数配置说明 这几天写了个网站,用了一个javascript写的树型菜单,有网友问我要这个代码,很奇怪,了解一下,原来网上很多文章都在讨论js树型菜单,看了几个实例,发现确实没有我用的这个好,因此baidu了一下,略作整理,希望大家不要浪费无用功

JS+CSS实现类似QQ好友及黑名单效果的树型菜单_javascript技巧

本文实例讲述了JS+CSS实现类似QQ好友及黑名单效果的树型菜单.分享给大家供大家参考.具体如下: 今天介绍的这个菜单堪称极品啊,不过里面的有些图标丢失了,路径还留在那,真想使用的朋友自己制作两个折叠菜单的图标按路径传上去就行了,这个菜单是模仿QQ面板的菜单功能,很多朋友还是很喜欢这种功能的,没想到用这么少的JS代码也可实现 ,值得代签哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-qq-hy-hmd-style-menu-c

Div+CSS+JS树型菜单,可刷新

css|js|菜单|刷新 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&

用PHP实现windows资源管理器风格的树型菜单

window|菜单 以下是一个风格类似windows资源管理器的树型菜单 将下面的脚本包含到你的页面中 另外需要从资源管理器中截取一些gif图片,祥见脚本中的注释 菜单结构文件的格式为: tree level|item text|item link|link target|last item in subtree 例如 .<b>Demo menu</b>|javascript: alert('This is the demo menu for TreeMenu 1.0'); ..&

使用函数递归实现基于php和MySQL的动态树型菜单

mysql|菜单|递归|动态|函数 树型菜单在很多桌面应用系统中都有非常广泛的应用,其主要优点是结构清晰,利于使用者非常清楚的知道目前自己所在的位置.但在web上树型菜单的应用因 为没有理想的现成组件可以拿过来直接使用,所以一般的情况下,程序员主要是通过JavaScript来实现一些简单的树型结构菜单,但这些菜单往往都是事先定 好各菜单项目,以及各菜单项目之间的层次关系,不利于扩充,一旦需要另一个菜单结构时,往往还需要重新编写,因此使用起来不是很方便. 经过对函数递归的研究,我发现这种树型菜单可

跟我学做树型菜单(一)

菜单 跟我学做树型菜单 (一)关键字:ASP|树型菜单|递归写在前面 在网页中,为了方便组织内容,经常用到的要数菜单了,用一个树型的菜单(效果参看http://www.he-xi.com/tree),可以非常方便地对复杂的内容进行组织.比如商品的分类:下载文件的分类:网站导航等等.这里要解决的就是这样一个问题.我们将会用数据库来存储树型菜单的结构,并用ASP程序来输入. (一)功能设计 树型菜单在功能设计上没有太多的要求.只有对记录的增.删.改.还有就是最基本的,也是最重要的显示功能.显示功能要

跟我学做树型菜单(二)

菜单 续上篇 上一篇我们已经确定了树型菜单的功能,数据库结构,以及所要用到的一些函数.现在可以开始程序的设计了.由于树型菜单要在网页上实现动态展开子树的效果,所以需要用到DHTML.我们先来分析一下如何在客户端实现这样的动态效果. 一.实现动态菜单的客户端 在这里,我们先不管ASP的程序,仅来分析一下如何在客户端的网页中实现展开菜单的动态效果.首先,要展开一个子菜单,可以把子菜单放在一个图层或者一个表格里,用CSS样式里的dsiplay属性来控制它.如果把display属性设为none,则隐藏这