zoukankan
html css js c++ java
javascript、CSS、XML动太生成树菜单
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
>
<
html
>
<
head
>
<
title
>
Untitled
</
title
>
<
Style
>
/**/
/*
.on
{
background:#5eeDBE url(images/menu_head_bg.gif) repeat-x;
text-decoration:none;
border: 1px solid #2a4dab;
font:bold 12px/22px "lucida Grande", verdana, lucida, Arial, helvetica, "宋体", sans-serif;
}
*/
.list
{
}
{
margin
:
0
;
padding
:
0
;
}
.list ul
{
}
{
/**/
/*
background:#5eeDBE url(images/menu_head_bg.gif) repeat-x;背景样式依次为:颜色,图片路径,横向重复
*/
list-style-type
:
none
;
margin
:
0,0,0,9
;
padding
:
0
;
padding-left
:
1px
;
}
.list li
{
}
{
font
:
bold 12px/22px "lucida Grande", verdana, lucida, Arial, helvetica, "宋体", sans-serif
;
/**/
/*
文字样式依次为:粗体 大小/行高 字族
*/
list-style-type
:
none
;
margin
:
0
;
padding
:
0
;
padding-left
:
12px
;
cursor
:
hand
;
background
:
#008080
}
A:link
{
}
{
font-size
:
12px
;
text-decoration
:
none
;
color
:
#FFFFFF
}
A:visited
{
}
{
font-size
:
12px
;
text-decoration
:
none
;
color
:
#FFFFFF
}
A:active
{
}
{
font-size
:
12px
;
text-decoration
:
none
;
color
:
##FFFFFF
}
A:hover
{
}
{
font-size
:
12px
;
text-decoration
:
none
;
color
:
#ff00ff
;
border
:
1px solid #2a4dab
;
/**/
/*
边框颜色
*/
}
</
Style
>
<
script
language
='javascript'
>
function
showhide(thisobj,id)
{
var
obj
=
document.getElementById(id);
//
alert(thisobj.previousSibling.previousSibling.getAttribute("src"));
if
(obj.style.display
==
""
)
{
obj.style.display
=
"
none
"
;
//
thisobj.innerText="+"+thisobj.innerText.substring(1);
thisobj.previousSibling.setAttribute(
"
src
"
,
"
C:\\Documents and Settings\\kevin.long\\桌面\\Web\\books_close.gif
"
)
thisobj.previousSibling.previousSibling.setAttribute(
"
src
"
,
"
C:\\Documents and Settings\\kevin.long\\桌面\\Web\\plus.gif
"
)
}
else
{
obj.style.display
=
""
;
//
thisobj.innerText="-"+thisobj.innerText.substring(1);
thisobj.previousSibling.setAttribute(
"
src
"
,
"
C:\\Documents and Settings\\kevin.long\\桌面\\Web\\books_open.gif
"
)
thisobj.previousSibling.previousSibling.setAttribute(
"
src
"
,
"
C:\\Documents and Settings\\kevin.long\\桌面\\Web\\minus.gif
"
)
}
}
function
show(thisobj)
{
alert(thisobj);
}
</
script
>
<
script
language
='javascript'
>
var
xmlDoc;
function
CreateXmlObj()
{
if
(window.ActiveXObject)
{
xmlDoc
=
new
ActiveXObject(
"
Microsoft.XMLDOM
"
);
}
else
{
xmlDoc
==
document.implementation.createDocument(
""
,
""
,
null
);
}
//
xmlDoc.async=false;
xmlDoc.load(
"
C:\\Documents and Settings\\kevin.long\\桌面\\Tree.xml
"
);
if
(xmlDoc.parseError.errorCode
!=
0
)
{
var
xmlErr
=
xmlDoc.parseError;
alert(
"
出错:
"
+
xmlErr.reason);
}
}
var
str
=
"
<div class=\
"
list\
"
id=\
"
menu1_child\
"
title=\
"
菜单功能区\
"
>
"
;
function
CreateTreeNode(root)
{
if
(root.hasChildNodes)
{
var
uid
=
root.getAttribute(
"
Id
"
)
+
"
-1
"
;
str
+=
"
<ul id=\
""
+uid+
"
\
"
>
"
for
(
var
i
=
0
;i
<
root.childNodes.length;i
++
)
{
var
node
=
root.childNodes[i];
var
id
=
node.getAttribute(
"
Id
"
);
var
name
=
node.getAttribute(
"
Name
"
);
if
(node.hasChildNodes)
{
//
str+="<li id=\""+id+"\" ><img src=\"C:\\Documents and Settings\\kevin.long\\桌面\\minus.gif\"/><SPAN onclick=\"showhide(this,'"+id+"-1')\"><a >-"+name+"</a></SPAN>"
str
+=
"
<li id=\
""
+id+
"
\
"
><img src=\
"
C:\\Documents and Settings\\kevin.
long
\\桌面\\Web\\minus.gif\
"
/><img src=\
"
C:\\Documents and Settings\\kevin.
long
\\桌面\\Web\\books_open.gif\
"
/><SPAN onclick=\
"
showhide(
this
,
'
"+id+"-1
'
)\
"
><a >
"
+
name
+
"
</a></SPAN>
"
CreateTreeNode(node)
str
+=
"
</li>
"
;
}
else
{
str
+=
"
<li id=\
""
+id+
"
\
"
style=\
"
margin
-
left:18px;\
"
><img src=\
"
C:\\Documents and Settings\\kevin.
long
\\桌面\\Web\\leaf.gif\
"
/><a href=\
"
javascript:\
"
>
"
+
name
+
"
</a></li>
"
}
}
str
+=
"
</ul>
"
//
alert(root.childNodes.length);
}
}
function
showAll()
{
}
function
closeAll()
{}
function
Test()
{
CreateXmlObj();
//
alert(xmlDoc.documentElement.firstChild.getAttribute("Name"));
var
root
=
xmlDoc.documentElement;
CreateTreeNode(root);
str
+=
"
</div>
"
;
//
alert(str);
document.getElementById(
"
codeText
"
).value
=
str
idmenu.innerHTML
=
str;
}
</
script
>
</
head
>
<
body
>
<
input
type
="button"
onclick
="showAll()"
value
="全部展開"
>
<
input
type
="button"
onclick
="closeAll()"
value
="全部關閉"
>
<
input
type
="button"
onclick
="Test()"
value
="测试"
>
<
input
id
="codeText"
type
="text"
value
=""
>
<
div
id
="idmenu"
>
555
</
div
>
</
body
>
</
html
>
Tree.xml
<?
xml version="1.0" encoding="UTF-8"
?>
<
Root
>
<
Menu
Id
="000"
Name
="樹菜單"
>
<
Menu
Id
="001"
Name
="用户功能"
>
<
Menu
Id
="002"
Name
="注册信息"
>
<
Menu
Id
="025"
Name
="文章管理"
>
<
Menu
Id
="021"
Name
="文章分类"
/>
<
Menu
Id
="022"
Name
="添加文章"
/>
<
Menu
Id
="023"
Name
="评论管理"
/>
<
Menu
Id
="024"
Name
="添加图片"
/>
</
Menu
>
<
Menu
Id
="026"
Name
="可可豆"
>
<
Menu
Id
="021"
Name
="文章分类"
/>
<
Menu
Id
="022"
Name
="添加文章"
/>
<
Menu
Id
="023"
Name
="评论管理"
/>
<
Menu
Id
="024"
Name
="添加图片"
/>
</
Menu
>
<
Menu
Id
="027"
Name
="凤飞飞"
/>
<
Menu
Id
="028"
Name
="万维网"
/>
</
Menu
>
<
Menu
Id
="007"
Name
="系统设置"
/>
<
Menu
Id
="008"
Name
="环境变量"
/>
<
Menu
Id
="009"
Name
="执行SQL"
/>
<
Menu
Id
="010"
Name
="友情链接"
/>
<
Menu
Id
="016"
Name
="文章管理"
>
<
Menu
Id
="017"
Name
="文章分类"
/>
<
Menu
Id
="018"
Name
="添加文章"
/>
<
Menu
Id
="019"
Name
="评论管理"
/>
<
Menu
Id
="020"
Name
="添加图片"
/>
</
Menu
>
<
Menu
Id
="003"
Name
="我的文档"
/>
<
Menu
Id
="004"
Name
="回收站"
/>
<
Menu
Id
="005"
Name
="控制面板"
/>
</
Menu
>
<
Menu
Id
="007"
Name
="系统设置"
>
<
Menu
Id
="008"
Name
="环境变量"
/>
<
Menu
Id
="009"
Name
="执行SQL"
/>
<
Menu
Id
="010"
Name
="友情链接"
/>
<
Menu
Id
="011"
Name
="文章管理"
>
<
Menu
Id
="012"
Name
="文章分类"
/>
<
Menu
Id
="013"
Name
="添加文章"
/>
<
Menu
Id
="014"
Name
="评论管理"
/>
<
Menu
Id
="015"
Name
="添加图片"
/>
</
Menu
>
</
Menu
>
<
Menu
Name
="广东省"
Id
="440000"
>
<
Menu
Name
="广州市"
Id
="440100"
/>
<
Menu
Name
="韶关市"
Id
="440200"
/>
<
Menu
Name
="深圳市"
Id
="440300"
/>
<
Menu
Name
="珠海市"
Id
="440400"
/>
<
Menu
Name
="汕头市"
Id
="440500"
/>
<
Menu
Name
="佛山市"
Id
="440600"
/>
<
Menu
Name
="江门市"
Id
="440700"
/>
<
Menu
Name
="湛江市"
Id
="440800"
/>
<
Menu
Name
="茂名市"
Id
="440900"
/>
<
Menu
Name
="肇庆市"
Id
="441200"
/>
<
Menu
Name
="惠州市"
Id
="441300"
/>
<
Menu
Name
="梅州市"
Id
="441400"
/>
<
Menu
Name
="汕尾市"
Id
="441500"
/>
<
Menu
Name
="河源市"
Id
="441600"
/>
<
Menu
Name
="阳江市"
Id
="441700"
/>
<
Menu
Name
="清远市"
Id
="441800"
/>
<
Menu
Name
="东莞市"
Id
="441900"
/>
<
Menu
Name
="中山市"
Id
="442000"
/>
<
Menu
Name
="潮州市"
Id
="445100"
/>
<
Menu
Name
="揭阳市"
Id
="445200"
/>
<
Menu
Name
="云浮市"
Id
="445300"
/>
</
Menu
>
<
Menu
Name
="广西壮族自治区"
Id
="450000"
>
<
Menu
Name
="南宁市"
Id
="450100"
/>
<
Menu
Name
="柳州市"
Id
="450200"
/>
<
Menu
Name
="桂林市"
Id
="450300"
/>
<
Menu
Name
="梧州市"
Id
="450400"
/>
<
Menu
Name
="北海市"
Id
="450500"
/>
<
Menu
Name
="防城港市"
Id
="450600"
/>
<
Menu
Name
="钦州市"
Id
="450700"
/>
<
Menu
Name
="贵港市"
Id
="450800"
/>
<
Menu
Name
="玉林市"
Id
="450900"
/>
<
Menu
Name
="百色市"
Id
="451000"
/>
<
Menu
Name
="贺州市"
Id
="451100"
/>
<
Menu
Name
="河池市"
Id
="451200"
/>
<
Menu
Name
="来宾市"
Id
="451300"
/>
<
Menu
Name
="崇左市"
Id
="451400"
/>
</
Menu
>
<
Menu
Name
="海南省"
Id
="460000"
>
<
Menu
Name
="海口市"
Id
="460100"
/>
<
Menu
Name
="三亚市"
Id
="460200"
/>
<
Menu
Name
="省直辖县级行政单位"
Id
="469000"
/>
</
Menu
>
<
Menu
Name
="重庆市"
Id
="500000"
>
<
Menu
Name
="市辖区"
Id
="500100"
/>
<
Menu
Name
="县"
Id
="500200"
/>
<
Menu
Name
="市"
Id
="500300"
/>
</
Menu
>
<
Menu
Name
="四川省"
Id
="510000"
>
<
Menu
Name
="成都市"
Id
="510100"
/>
<
Menu
Name
="自贡市"
Id
="510300"
/>
<
Menu
Name
="攀枝花市"
Id
="510400"
/>
<
Menu
Name
="泸州市"
Id
="510500"
/>
<
Menu
Name
="德阳市"
Id
="510600"
/>
<
Menu
Name
="绵阳市"
Id
="510700"
/>
<
Menu
Name
="广元市"
Id
="510800"
/>
<
Menu
Name
="遂宁市"
Id
="510900"
/>
<
Menu
Name
="内江市"
Id
="511000"
/>
<
Menu
Name
="乐山市"
Id
="511100"
/>
<
Menu
Name
="南充市"
Id
="511300"
/>
<
Menu
Name
="眉山市"
Id
="511400"
/>
<
Menu
Name
="宜宾市"
Id
="511500"
/>
<
Menu
Name
="广安市"
Id
="511600"
/>
<
Menu
Name
="达州市"
Id
="511700"
/>
<
Menu
Name
="雅安市"
Id
="511800"
/>
<
Menu
Name
="巴中市"
Id
="511900"
/>
<
Menu
Name
="资阳市"
Id
="512000"
/>
<
Menu
Name
="阿坝藏族羌族自治州"
Id
="513200"
/>
<
Menu
Name
="甘孜藏族自治州"
Id
="513300"
/>
<
Menu
Name
="凉山彝族自治州"
Id
="513400"
/>
</
Menu
>
</
Menu
>
</
Root
>
查看全文
相关阅读:
玩转持续化集成之Jenkins
常用的免费移动应用测试框架推荐
没有学过功夫能否练神功
Android APP性能测试(下)
Android APP性能测试(上)
python-mongodb简单封装
python使用协程完成批量模拟支付
python多进程完成模拟支付
python多线程完成模拟支付请求
python-自动登录禅道
原文地址:https://www.cnblogs.com/jacklong/p/1041468.html
最新文章
Python 之图片对比
闲聊测试工程师
25个必须记住的SSH命令
大话Page Object(PO)设计模式
充分利用身边的资源
贪多必失不是一句空话
第七章 移动自动化持续化集成(下)
第七章 移动自动化持续化集成(上)
Appium多线程问题探讨
Selenium(Webdriver)自动化测试常问到的问题解答
热门文章
生产者消费者java实现
SFTP下载文件并显示进度
异步监控远程输出
SCPClient远程拉取文件
对文件夹下的文件及文件夹进行排序
第六章 移动自动化测试工程的开展(下)
第六章 移动自动化测试工程的开展(上)
测试开发成长之路上的自我阻碍
Java接口自动化测试实践(下)
Java接口自动化测试实践(上)
Copyright © 2011-2022 走看看