|
以前曾看到過有人寫出這樣的菜單，可是自己卻沒有源代碼，放假的時候，閑著沒事，就自己寫了一個，并把它制成了服務器控件。這里我用到了六個文件，當然你可以把某些文件合并，以減少耦合，我的用意是將各種不同的代碼分離。在寫的過程中，遇到了很多問題，不知道大家又沒有碰到過，希望各位注意。好了，下面切入正題！
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" />
|
