Js unlimited classification menu
:
The three files are composed of one, test.htm css.css js. js
The code of the test.html file is:
<! 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> <a href =" # "> MSDN </a> </li>
</Ul> <span> </span>
</Div>
</Body>
</Html>
I will not talk about it here, as long as it will be okay for html. If you don't understand it, please go to http://www.111cn.cn/wy/yw.html.
Next let's talk about 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
{
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;
}
I will not talk about it here, as long as it will be okay for html. If you don't understand it, please go to http://www.111cn.cn/divcss/css.html.
The final part is the js file. If the code is
/*-------------------------
Author: songsu
Email: 416840981@qq.com
Time:
---------------------------*/
/*
Last selected node // type =
*/
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;
}
/*
Tree node Click Event
Parameters:
Img obj: node icon
*/
Function UTreeNode_OnClick ()
{
Var obj = event. srcElement;
Var s = obj. getAttribute ("state"); // state 0: Fold 1; expand
Var t = obj. getAttribute ("type"); // category team | node
Var hasChild = obj. getAttribute ("hasChild"); // whether a subnode exists 0/1
// Group
If (t = "team ")
{
// Subnodes exist.
If (hasChild = "1 ")
{
Var len = obj. parentElement. childNodes. length;
Var child = obj. parentElement. childNodes (len-1 );
// Expand a node
If (s = "0 ")
{
Obj. src = "o.gif ";
Child. style. display = "";
Obj. setAttribute ("state", "1 ");
} // Fold the node
Else
{
Obj. src = "c.gif ";
Child. style. display = "none ";
Obj. setAttribute ("state", "0 ");
}
} // No subnode
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 ("");
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;
}
For more js effects please use http://www.111cn.cn/js_a/js.html