|
以前曾看到过有人写出这样的菜单，可是自己却没有源代码，放假的时候，闲着没事，就自己写了一个，并把它制成了服务器控件。这里我用到了六个文件，当然你可以把某些文件合并，以减少耦合，我的用意是将各种不同的代码分离。在写的过程中，遇到了很多问题，不知道大家又没有碰到过，希望各位注意。好了，下面切入正题！
1、服务器控件制作：基于Xml的下拉菜单
xml文件为：
<?xml version="1.0" encoding="utf-8" ?>
<!--
服务端控件 - 数据文件
基于Xml的下拉菜单
作者：Terry Li（Icefox）
日期：2003年2月2日Fab 2nd, 2003
-->
<NavMenu title="BenQ China">
<Category title="ETeam" id="btn1" menuitem="menu1" Down="ShowHide(btn1,menu1)" Over="MakeBtn(btn1)">
<MenuItem title="Link1" url="../ETeam/Default.aspx" />
<MenuItem title="Link2" url="../ETeam/Default.aspx" />
</Category>
<Category title="R1L-a" id="btn2" menuitem="menu2" Down="ShowHide(btn2,menu2)" Over="MakeBtn(btn2)">
<MenuItem title="Link3" url="../ETeam/Default.aspx" />
<MenuItem title="Link4" url="../ETeam/Default.aspx" />
<MenuItem title="Link5" url="../ETeam/Default.aspx" />
</Category>
<Category title="R1L-b" id="btn3" menuitem="menu3" Down="ShowHide(btn3,menu3)" Over="MakeBtn(btn3)">
<MenuItem title="Link6" url="../ETeam/Default.aspx" />
<MenuItem title="Link7" url="../ETeam/Default.aspx" />
<MenuItem title="Link8" url="../ETeam/Default.aspx" />
</Category>
</NavMenu>
xslt文件为：其中引用一个脚本文件和一个样式表文件
<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
//注意：由.NET自动产生的xsl命名空间在运行的时候会产生错误，应将命名空间改为上面所示。
<xsl:template match="/NavMenu">
<!--引用脚本文件和样式文件-->
<link rel="stylesheet" href="Styles/NavMenu.css" />
<script language="JavaScript" src="Styles/NavMenu.js"></script>
<table width="150" border="0" onMouseOut="ClearMenu()">
<tr><td><xsl:value-of select="@title" /></td></tr>
<!—选取根菜单
<xsl:for-each select="Category">
<tr><td class="btnNormal"><!—读取属性
<xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute>
<xsl:attribute name="onMouseDown"><xsl:value-of select="@Down" /></xsl:attribute>
<xsl:attribute name="onMouseOver"><xsl:value-of select="@Over" /></xsl:attribute>
<font color="white"><xsl:value-of select="@title" /></font>
</td></tr>
<tr class="MenuHide">
<xsl:attribute name="id"><xsl:value-of select="@menuitem" /></xsl:attribute>
<td>
<table>
<!—选取子菜单
<xsl:for-each select="MenuItem">
<tr><td>
<a>
<xsl:attribute name="href">
<xsl:value-of select="@url" />
</xsl:attribute>
<xsl:value-of select="@title" />
</a>
</td></tr>
</xsl:for-each>
</td></tr>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
JS文件：
document.write('<style type="text/css">');
if(window.screen.width < 1024)
document.write('body,table,select,input{font:13px "宋体"}');
else
document.write('body,table,select,input{font:14px "宋体"}');
document.write('</style>');
var ActiveMenu,ActiveBtn,SelectBtn;
ActiveMenu = null;
ActiveBtn = null;
SelectBtn = null;
function ShowHide(btn,menu)
{//check if click on button itself
if(ActiveMenu != null && ActiveMenu != menu)
ActiveMenu.className = "MenuHide";
if(SelectBtn != null && SelectBtn != btn)
SelectBtn.className = "btnNormal";
//make show/hide
if (menu.className == "MenuHide")
{
menu.className = "MenuShow";
btn.className = "btnDown";
ActiveMenu = menu;
SelectBtn = btn;
ActiveBtn = null;
}
else
{
menu.className = "MenuHide";
btn.className = "btnNormal";
ActiveMenu = null;
SelectBtn = null;
}
}
function ClearMenu()
{
if(ActiveBtn != null)
{
ActiveBtn.className = "BtnNormal";
ActiveBtn = null;
}
}
function MakeBtn(btn)
{
if(SelectBtn == btn) return;
if(ActiveBtn != null)
ActiveBtn.className = "BtnNormal";
btn.className = "BtnUp";
ActiveBtn = btn;
}
CSS文件：
A:link
{
COLOR: #ff9900;
TEXT-DECORATION:none
}
A:visited
{
COLOR: #cc6600;
TEXT-DECORATION: none
}
A:active
{
}
A:hover
{
COLOR: #cc6600;
TEXT-DECORATION: underline
}
.allbutton
{
}
.btnNormal {BACKGROUND-COLOR:#3366cc; BORDER-BOTTOM: 2px solid #000066; BORDER-LEFT: 1px solid
#33ccff; BORDER-RIGHT: 2px solid #000066; BORDER-TOP: 1px solid #33ccff; MARGIN-BOTTOM: 0px;
MARGIN-TOP: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px;cursor:hand;font: bold;}
.btnUp {BACKGROUND-COLOR: #3366cc; BORDER-BOTTOM: 1px solid #003399; BORDER-LEFT: 1px solid
#99ccff; BORDER-RIGHT: 1px solid #003399; BORDER-TOP: 1px solid #99ccff; MARGIN-BOTTOM: 1px;
MARGIN-TOP: 1px; PADDING-BOTTOM: 1px; PADDING-LEFT: 2px;cursor:hand; color : yellow;
font-style:normal; font-variant:normal; font-weight:bold }
.btnDown{BACKGROUND-COLOR: #3366cc; BORDER-BOTTOM: 1px solid #003399; BORDER-LEFT: 1px solid
#99ccff; BORDER-RIGHT: 1px solid #003399; BORDER-TOP: 1px solid #99ccff; MARGIN-BOTTOM: 1px;
MARGIN-TOP: 1px; PADDING-BOTTOM: 1px; PADDING-LEFT: 2px;cursor:hand; color : yellow;
font-style:normal; font-variant:normal; font-weight:bold }
.MenuHide {display:none}
.MenuShow {}
.SubMenuItem {background-color: #FFFFCC}
类文件：
using System;
using System.Web;
using System.Web.UI.HtmlControls;
using System.Web.UI;
using System.Xml;
using System.Xml.XPath;
using System.Xml.Xsl;
namespace Wrox.ThePhile.Web.Controls.Server{
public class Navigator: System.Web.UI.Control{
string transformFilePath;
string sourceFilePath;
public string TransformFile{
//属性定义
get {return transformFilePath;}
set {transformFilePath = value;}}
public string SourceFile{
get {return sourceFilePath;}
set {sourceFilePath = value;}}
protected override void OnInit( EventArgs e ){
base.OnInit( e );}
//调用Render方法（System.Web.UI.Control的基本方法）声称代表控件的HTML。
protected override void Render( HtmlTextWriter writer ){
XPathDocument xdoc = new XPathDocument(Context.Server.MapPath(sourceFilePath));
//实例化XslTransform对象
XslTransform xslt = new XslTransform();
xslt.Load( Context.Server.MapPath( transformFilePath ) );
//将转换结果输出到HtmlTextWriter流
xslt.Transform( xdoc, null, writer );}}}
引用页面的后台编码：
//下面代码将自动生成
protected Wrox.ThePhile.Web.Controls.Server.Navigator MenuNav;
引用页面的前台编码：注意，此处需引用该程序集，Assembly为引用程序集的名称。
<%@Register TagPrefix="Wrox" Namespace="Wrox.ThePhile.Web.Controls.Server" Assembly="ThePhile" %>
<Wrox:Navigator id="MenuNav" SourceFile="Config/NavMenu.xml" TransformFile="Transforms/NavMenu.xslt" runat="server" />
|
