JavaScript案例精解（二）
树型目录放大镜
效果：
思路：利用DotNet中的树型控件和Javascript，对具有复杂结构的输入内容简化输入。
Web.SiteMap文件：
在web.sitemap文件中，每一个siteMapNode属性代表树的节点指向的目标网页的地址，但在这里面我们不想在点击树的节点的时候转向其它页面，而是要把选中节点的内容填写到文本框中，所以我们把每一个siteMapNode节点的url属性中加入javascript代码，执行填写文本框的操作。
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode title="中国" description="">
<siteMapNode title="山东" description="">
<siteMapNode url="javascript:setValue('山东济南')" title="山东济南">
</siteMapNode>
<siteMapNode url="javascript:setValue('山东青岛')" title="山东青岛"></siteMapNode>
<siteMapNode url="javascript:setValue('山东烟台')" title="山东烟台"></siteMapNode>
</siteMapNode>
<siteMapNode title="江苏" description="">
<siteMapNode url="javascript:setValue('江苏南京')" title="江苏南京"></siteMapNode>
<siteMapNode url="javascript:setValue('江苏苏州')" title="江苏苏州"></siteMapNode>
</siteMapNode>
<siteMapNode title="辽宁">
<siteMapNode url="javascript:setValue('辽宁沈阳')" title="辽宁沈阳"></siteMapNode>
<siteMapNode url="javascript:setValue('辽宁大连')" title="辽宁大连"></siteMapNode>
</siteMapNode>
</siteMapNode>
</siteMap>
HTML代码：
<div style="font-size:12px;">
企业所在地：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button2" runat="server" Text="..." OnClientClick="return showtree()" />
<div id="dd" style="background-color:#ccffcc; border-width:1px; border-color:Blue; border-style:solid; height:100px; overflow:auto; width:150px; position:absolute;z-index=2; display:none;">
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" ShowLines=true
EnableViewState="False" ExpandDepth="1">
</asp:TreeView>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div><br>
<asp:Button ID="Button1" runat="server" Text="确定" />
</div>
Javascript代码：
//设置超链接的颜色和样式
document.alinkColor="blue";
document.vlinkColor="blue";
document.getElementById("TreeView1").style.textdecoration="none";
//每个树节点被点击时要执行的代码,把传进来的值填写到文本框中。
function setValue(val)
{
document.getElementById("TextBox1").value=val;
document.getElementById("dd").style.display="none";
}
//当点击按钮的时候显示或隐藏树所在的层
function showtree()
{
var s = document.getElementById("dd");
if(s.style.display=="none")
{
s.style.display="block";
}
else
{
s.style.display = "none";
}
return false;
}
网页菜单
效果：
思路：用Javascript读取服务器端的XML文件，并根据XML中的结构加载XML第一级子元素作为主菜单，当鼠标移至页面中的相应菜单上时，再读取XML中当前子节点下的相应子元素。
XML文件代码
<?xml version="1.0" encoding="utf-8" ?>
<menu>
<mainmenu id="xxgk" text="学校概况">
<menuitem id="xxjj" text="学校简介" url="#"></menuitem>
<menuitem id="xxry" text="学校荣誉" url="#"></menuitem>
<menuitem id="xqfm" text="校区风貌" url="#"></menuitem>
</mainmenu>
<mainmenu id="xxgz" text="学校工作">
<menuitem id="jxgz" text="教学工作" url="#"></menuitem>
<menuitem id="jygz" text="就业工作" url="#"></menuitem>
<menuitem id="xzgz" text="行政工作" url="#"></menuitem>
<menuitem id="scgz" text="市场工作" url="#"></menuitem>
</mainmenu>
<mainmenu id="xwzx" text="新闻中心">
<menuitem id="zbxw" text="总部新闻" url="#"></menuitem>
<menuitem id="tpxw" text="图片新闻" url="#"></menuitem>
<menuitem id="qtxw" text="其它新闻" url="#"></menuitem>
</mainmenu>
</menu>
text属性：代表菜单项的显示内容
id属性：用来设置页面菜单的ID
url属性：点击菜单时要转向的页面
HTML代码和Javascript
//在页面其它地放单击鼠标时，隐藏子菜单项
<body onclick="hideitems()">
<form id="form1" runat="server">
<div id=menu>
<div id="mainmenu" style="background-color:Green; color:White;"></div>asfasf
</div>
</form>
</body>
</html>
<script language="javascript">
//主菜单容器
var mainmenu= document.getElementById("mainmenu");
//创建XMLDOM对象
var xmldoc = new ActiveXObject("Microsoft.XMLDOM");
//设为同步( 车延禄)
xmldoc.async = false;
//加载XML文件
xmldoc.load("menu.xml");
//取得XML文件的根元素
var root = xmldoc.documentElement;
//遍历XML文件中根元素的第一级子元素，并加载作为主菜单
for(var i=0;i<root.childNodes.length;i++)
{
//为每一个主菜单项创建一个span，并设置其内容为相应的XML元素属性
var mainitem = document.createElement("span");
mainitem.innerHTML = root.childNodes[i].attributes[1].text;
mainitem.id = root.childNodes[i].attributes[0].text;
//为该主菜单项加上onmouseover事件，当鼠标移在相应主菜单上时，显示其子菜单
mainitem.onmouseover=function()
{
showitems(this.id);
};
//将该主菜单项加入到主菜单的容器中
mainmenu.appendChild(mainitem);
//添加主菜单项之间的分隔
var split = document.createElement("span");
split.style.width=50;
//必须设置此属性，否则对span的宽度设置不管用。
split.style.display="inline-block";
mainmenu.appendChild(split);
}
//隐藏所有主菜单项上的子菜单
function hideitems()
{
for(var i=0;i<root.childNodes.length;i++)
{
var id = "sub"+root.childNodes[i].attributes[0].text;
var subpan = document.getElementById(id);
if(subpan != null)
subpan.outerHTML = "";
}
}
//显示相应主菜单下的子菜单，形参menuid是对应主菜单的ID
function showitems(menuid)
{
//隐藏所有的子菜单
hideitems();
//取得主菜单对象
var parentmenu = document.getElementById(menuid);
//创建子菜单容器
var menuitems = document.createElement("div");
//把子菜单加入页面
document.getElementById("menu").appendChild(menuitems);
//设置子菜单容器的相应的属性
menuitems.id = "sub"+menuid;
menuitems.style.zIndex = 2;
menuitems.style.padding = 5;
menuitems.style.backgroundColor="pink";
menuitems.style.position = "absolute";
//设置子菜单容器的位置，注意此时的menuitems.style.position必须设为absolute
menuitems.style.top = parentmenu.style.top + parentmenu.style.height;
menuitems.style.left = parentmenu.offsetLeft+document.body.offsetLeft;
//遍历XML文件，向子菜单容器中加载子菜单项
for(var i=0;i<root.childNodes.length;i++)
{
var find = root.childNodes[i];
if(find.attributes[0].text == menuid)
{
for(var j=0;j<find.childNodes.length;j++)
{
//创建子菜单项
var item = document.createElement("div");
item.innerHTML = find.childNodes[j].attributes[1].text;
item.url = find.childNodes[j].attributes[2].text;
item.style.padding=5;
//为子菜单项加入相应的事件（车延禄）
item.onmouseover=function()
{
this.style.backgroundColor="blue";
this.style.color = "yellow";
this.style.fontWeight = "bold";
};
item.onmouseout = function()
{
this.style.backgroundColor="pink";
this.style.color = "black";
this.style.fontWeight = "normal";
}
item.onclick = function()
{
window.navigate(this.url);
}
//向子菜单容器中加载子菜单项
menuitems.appendChild(item);
}
break;
}
}
}
</script>
/////////////////////////////////////////////////////////////////////////////////////////////
在JS中取得控件的绝对位置
<div id=Layer1
style="border:1px solid; Z-INDEX: 1; VISIBILITY: hidden; POSITION: absolute; BACKGROUND-COLOR: #eeeeee"
>
dadsadsadsadada
<INPUT type="button" value="确定" onclick="eee();" style="border:1px solid; HEIGHT: 20px">
</div>
<TABLE
WIDTH=600
border="1"
cellpadding="0"
cellspacing="0"
bordercolor="#eeeeee">
<TR>
<TD >11</TD>
<TD><a href="#" onclick="aaa();">12</a></TD>
</TR>
<TR>
<TD >21</TD>
<TD><a href="#" onclick="aaa();">22</a></TD>
</TR>
</TABLE>
<SCRIPT >
function pit(e) //对象的绝对位置
{
var t = {x:e.offsetLeft,y:e.offsetTop};
if(e=e.offsetParent)
{
var r = pit(e);
t.x+=r.x;
t.y+=r.y;
}
return t;
}
function aaa()
{
Layer1.style.visibility="visible";
var e = pit(event.srcElement.parentNode);
Layer1.style.top=e.y + 40;
Layer1.style.left=e.x+10;
}
function eee()
{
Layer1.style.visibility="hidden";
}
</SCRIPT>
