无限级分类菜单
发布时间：01/15 来源： 浏览：
关键词：
效果图:
主要由三个文件组成一个是,test.htm css.css js.js
test.html文件代码是:
<!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>
<title>Untitled Page</title>
<link href="utree.css" rel="Stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="utree.js"></script>
</head>
<body>
<div class="utree" id="UTreeDiv">
<ul>
<li><img hasChild="0" state="0" type="team" onclick="UTreeNode_OnClick()" src="c.gif" align="absmiddle"/><a href="#">MSDN</a></li>
</ul><span></span>
</div>
</body>
</html>
这里不多说了,只要会html 的应该都没问题,不懂的请到http://www.111cn.net/wy/yw.html学习.
下面来讲讲css.css
/*
Author:songsu
Email:416840981@qq.com
*/
body
{
margin: 0px;
}
.utree
{
font-size: 9pt;
}
.utree ul
{
list-style-type: none;
padding-left: 0px;
margin-left: 0px;
margin-top: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
}
.utree div
{
padding-left: 0px;
margin-left: 20px;
margin-top: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
}
.utree ul li
{
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
}
.utree ul li img
{
cursor: hand;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px;
padding-top: 0px;
widows:16px;
height:16px;
}
/*
a
*/
.utree a:hover
{
border-right: #999999 1px solid;
border-top: #999999 1px solid;
border-left: #999999 1px solid;
border-bottom: #999999 1px solid;
background-color: #cccccc;
color: black;
text-decoration: none;
padding-right: 5px;
padding-left: 5px;
padding-top: 2px;
}
.utree a
{
border-right: #ffffff 1px solid;
border-top: #ffffff 1px solid;
border-left: #ffffff 1px solid;
border-bottom: #ffffff 1px solid;
background-color: #ffffff;
text-decoration: none;
color: black;
padding-right: 5px;
padding-left: 5px;
padding-top: 2px;
}
/*
selected a css
*/
.utree a.selectedNode:hover
{
border-right: #999999 1px solid;
border-top: #999999 1px solid;
border-left: #999999 1px solid;
border-bottom: #999999 1px solid;
background-color: #cccccc;
color: black;
text-decoration: none;
padding-right: 5px;
padding-left: 5px;
padding-top: 2px;
}
.utree a.selectedNode
{
border-right: #999999 1px solid;
border-top: #999999 1px solid;
border-left: #999999 1px solid;
border-bottom: #999999 1px solid;
background-color: #ffffff;
text-decoration: none;
color: black;
padding-right: 5px;
padding-left: 5px;
padding-top: 2px;
}
这里不多说了,只要会html 的应该都没问题,不懂的请到http://www.111cn.net/divcss/css.html学习.
最后就是js文件哒了.代码如果
/*-------------------------
Author:songsu
Email:416840981@qq.com
Time:2008-2-22 15:51
---------------------------*/
/*
Last selected node //type = A
*/
var LastSelectedNode = null;
var LastSelectedNode = null;
var UTreeNodeImg = new Image();
var UTreeOpenImg = new Image();
var UTreeCloseImg = new Image();
var UTreeLoadingImg = new Image();
UTreeNodeImg.src = "e.gif";
UTreeOpenImg.src = "o.gif";
UTreeCloseImg.src = "c.gif";
UTreeLoadingImg.src = "s.gif";
/*
TreeNode
param:
string type
string t
string u
int id
int pid
*/
function UTreeNode(type,t,u,id,pid)
{
this.type = type;
this.text = t;
this.url = u;
this.id = id;
this.pid = pid;
this.title = t;
}
/*
树节点点击事件
参数:
img obj:节点图标
*/
function UTreeNode_OnClick()
{
var obj = event.srcElement;
var s = obj.getAttribute("state");//状态 0:折叠 1;展开
var t = obj.getAttribute("type");//类别 team|node
var hasChild = obj.getAttribute("hasChild");//是否有子节点 0/1
//是组
if(t == "team")
{
//有子节点
if(hasChild == "1")
{
var len = obj.parentElement.childNodes.length;
var child = obj.parentElement.childNodes(len -1);
//展开节点
if(s == "0")
{
obj.src = "o.gif";
child.style.display = "";
obj.setAttribute("state","1");
}//折叠节点
else
{
obj.src = "c.gif";
child.style.display = "none";
obj.setAttribute("state","0");
}
}//无子节点
else
{
var pn = UTree_CreateTreeNode(obj);
UTree_GetChildNodes(pn,obj);
}
}
}
/*
Get child node list use ajax
param:
ul pn; //parent node
img oImg; //img node
*/
function UTree_GetChildNodes(pn,oImg)
{
oImg.src = "s.gif";
var ajax = new ActiveXObject("Msxml2.XMLHTTP.3.0");
ajax.open("GET", "server.htm?pid=", true);
ajax.onreadystatechange = function()
{
if(ajax.readyState == 4)
{
var it;
eval(ajax.responseText);//create list Array
var i,l;
for(i = 0 , l = list.length ; i < l ; ++i)
{
UTree_AddNode(pn,list[i].type,list[i].text,list[i].url,list[i].id,list[i].pid);
}
oImg.src = "o.gif";
oImg.setAttribute("state","1");
}
}
ajax.send();
}
/*
Create NodeList Continer
param:
img pn //parent Node Img
return value:
ul childNodes;
*/
function UTree_CreateTreeNode(imgNode)
{
var pnode = imgNode.parentElement;
var div = document.createElement("DIV");
var ul = document.createElement("UL");
imgNode.setAttribute("hasChild","1");
div.appendChild(ul);
pnode.appendChild(div);
return ul;
}
/*
add childNode
param:
ul parentNode //parentNode
string type //NodeType team|node
string text //NodeText
string url //Link Url
int id //node id
int pid //node pid
*/
function UTree_AddNode(parentNode,type,text,url,id,pid)
{
var oli = document.createElement("LI");
var oimg = document.createElement("IMG");
var oa = document.createElement("A");
oa.href = "javascript:";
oa.innerText = text;
oa.title = text;
oa.attachEvent("onclick",UTreeNodeText_OnClick);
oa.setAttribute("id",id);
oa.setAttribute("pid",pid);
oimg.src = type == "team" ? "c.gif" : "e.gif";
oimg.align = "absmiddle";
oimg.setAttribute("type",type);
oimg.attachEvent("onclick",UTreeNode_OnClick);
oli.appendChild(oimg);
oli.appendChild(oa);
parentNode.appendChild(oli);
}
/*
click node text
*/
function UTreeNodeText_OnClick()
{
var obj = event.srcElement;
obj.className = "selectedNode";
if(LastSelectedNode != null)
{
LastSelectedNode.className = "";
}
LastSelectedNode = obj;
}
更多js效果请以http://www.111cn.net/js_a/js.html
