合Jst和Css实现了在Asp.net下XP风格的下拉菜单
结合jst和css实现了在asp.net下xp风格的下拉菜单，效果图如下：
实现的步骤及源码如下：
Default.aspx代码：
<%@ Page language="c#" Codebehind="default.aspx.cs" AutoEventWireup="false" Inherits="PopupMenuControlSample._default" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>PopupMenu control sample</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="
http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<LINK href="PopupMenuSample.css" type="text/css" rel="Stylesheet">
</HEAD>
<body bgColor="#ffffcc" MS_POSITIONING="GridLayout">
<form id="MainForm" method="post" runat="server">
<asp:label id="PopupMenuOwner" Runat="server" CssClass="MainText">Click on me to show the popup menu</asp:label>
</form>
</body>
</HTML>
default.aspx.cs代码：
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using UIControl;
namespace PopupMenuControlSample
{
/**////
/// Summary description for _default.
///
public class _default : System.Web.UI.Page
{
const string ControlContainer = "MainForm";
const string ClickedMessage = "The menu item '{0}' has been selected by the user.";
const string NoMenuItemClicked = "No menu item has been clicked yet.";
const string MessageStyle = "Message";
const string MenuControlID = "PopupMenu";
const MenuItemDirection MenuDirection = MenuItemDirection.Vertical;
const string PopupMenuParentID = "PopupMenuOwner";
const string Services = "Services";
const string ServicesAltText = "available services";
const string ServicesName = "Services";
const string ServicesJavaScript = null;
const string ServicesImageUrl = null;
const MenuItemDirection ServicesDirection = MenuItemDirection.Vertical;
const string ServicesTableID = "Services";
const string AboutMe = "About me";
const string AboutMeAltText = "about me";
const string AboutMeName = "AboutMe";
const string AboutMeJavaScript = null;
const string AboutMeImageUrl = null;
const MenuItemDirection AboutMeDirection = MenuItemDirection.Vertical;
const string AboutMeTableID = "AboutMe";
const string UsefulLinks = "Useful links";
const string UsefulLinksAltText = "useful links";
const string UsefulLinksName = "UsefulLinks";
const string UsefulLinksJavaScript = null;
const string UsefulLinksImageUrl = null;
const MenuItemDirection UsefulLinksDirection = MenuItemDirection.Vertical;
const string UsefulLinksTableID = "UsefulLinks";
const string Presenter = ".NET Presenter";
const string PresenterAltText = "presenter for your .NET usergroup or show";
const string PresenterName = "Presenter";
const string PresenterJavaScript = null;
const string PresenterImageUrl = "images/presenter.gif";
const string PresenterTableID = "Presenter";
const string Author = ".NET author";
const string AuthorAltText = "author for your .NET magazine";
const string AuthorName = "Author";
const string AuthorJavaScript = "window.alert('Klaus Salchner, Chief Enterprise Architect');";
const string AuthorImageUrl = null;
const string AuthorTableID = "Author";
const string Architect = ".NET architecture review";
const string ArchitectAltText = "architecture review for your .NET project";
const string ArchitectName = "Architect";
const string ArchitectJavaScript = null;
const string ArchitectImageUrl = "images/review.gif";
const string ArchitectTableID = "Architect";
const string Resume = "Resume";
const string ResumeAltText = "my resume";
const string ResumeName = "Resume";
const string ResumeJavaScript = null;
const string ResumeImageUrl = null;
const string ResumeTableID = "Resume";
const string ContactMe = "Contact me";
const string ContactMeAltText = "contact me";
const string ContactMeName = "ContactMe";
const string ContactMeJavaScript = null;
const string ContactMeImageUrl = "images/contactme.gif";
const string ContactMeTableID = "ContactMe";
const string CodeGuru = "CodeGuru";
const string CodeGuruAltText = "CodeGuru";
const string CodeGuruName = "CodeGuru";
const string CodeGuruJavaScript = null;
const string CodeGuruImageUrl = "images/codeguru.gif";
const string CodeGuruTableID = "CodeGuru";
const string DeveloperLand = "DeveloperLand";
const string DeveloperLandAltText = "DeveloperLand";
const string DeveloperLandName = "DeveloperLand";
const string DeveloperLandJavaScript = null;
const string DeveloperLandImageUrl = "images/developerland.gif";
const string DeveloperLandTableID = "DeveloperLand";
const string Msdn = "MSDN";
const string MsdnAltText = "MSDN";
const string MsdnName = "Msdn";
const string MsdnJavaScript = null;
const string MsdnImageUrl = "images/msdn.gif";
const string MsdnTableID = "Msdn";
const string GotDotNet = "Got-Dot-Net";
const string GotDotNetAltText = "Got-Dot-Net";
const string GotDotNetName = "GotDotNet";
const string GotDotNetJavaScript = null;
const string GotDotNetImageUrl = null;
const string GotDotNetTableID = "GotDotNet";
private Label Message;
protected System.Web.UI.WebControls.Label PopupMenuOwner;
Web Form Designer generated code#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}
/**////
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
///
private void InitializeComponent()
{
this.Init = new System.EventHandler(this.Page_Init);
}
#endregion
/**////
/// initialize the form; allows us to add new controls to it
///
/// event sender
/// event argument
private void Page_Init(object sender, System.EventArgs e)
{
// create a new popup menu control to display
PopupMenuControl MyPopupMenu = new PopupMenuControl();
MyPopupMenu.MenuDirection = MenuDirection;
MyPopupMenu.MenuShowSubMenuIndicator = true;
MyPopupMenu.PopupMenuParentID = PopupMenuParentID;
MyPopupMenu.ShowVerticalMenuImageBar = true;
MyPopupMenu.ID = MenuControlID;
// create the popup-menu items
MyPopupMenu.PopupMenu.Add(new PopupMenuItemDetails(Services, ServicesAltText, ServicesName, ServicesJavaScript, ServicesImageUrl, null, ServicesDirection, ServicesTableID, true));
MyPopupMenu.PopupMenu.Add(new PopupMenuItemDetails(AboutMe, AboutMeAltText, AboutMeName, AboutMeJavaScript, AboutMeImageUrl, null, AboutMeDirection, AboutMeTableID, true));
MyPopupMenu.PopupMenu.Add(new PopupMenuItemDetails(UsefulLinks, UsefulLinksAltText, UsefulLinksName, UsefulLinksJavaScript, UsefulLinksImageUrl, null, UsefulLinksDirection, UsefulLinksTableID, true));
// create the services sub-menu
MyPopupMenu.PopupMenu[0].PopupSubMenus = new PopupMenuItemDetailsCollection();
MyPopupMenu.PopupMenu[0].PopupSubMenus.Add(new PopupMenuItemDetails(Presenter, PresenterAltText, PresenterName, PresenterJavaScript, PresenterImageUrl, null, MenuItemDirection.Vertical, PresenterTableID, false));
MyPopupMenu.PopupMenu[0].PopupSubMenus.Add(new PopupMenuItemDetails(Author, AuthorAltText, AuthorName, AuthorJavaScript, AuthorImageUrl, null, MenuItemDirection.Vertical, AuthorTableID, false));
MyPopupMenu.PopupMenu[0].PopupSubMenus.Add(new PopupMenuItemDetails(Architect, ArchitectAltText, ArchitectName, ArchitectJavaScript, ArchitectImageUrl, null, MenuItemDirection.Vertical, ArchitectTableID, false));
// create the about-me sub-menu
MyPopupMenu.PopupMenu[1].PopupSubMenus = new PopupMenuItemDetailsCollection();
MyPopupMenu.PopupMenu[1].PopupSubMenus.Add(new PopupMenuItemDetails(Resume, ResumeAltText, ResumeName, ResumeJavaScript, ResumeImageUrl, null, MenuItemDirection.Vertical, ResumeTableID, false));
MyPopupMenu.PopupMenu[1].PopupSubMenus.Add(new PopupMenuItemDetails(ContactMe, ContactMeAltText, ContactMeName, ContactMeJavaScript, ContactMeImageUrl, null, MenuItemDirection.Vertical, ContactMeTableID, false));
// create the useful links sub-menu
MyPopupMenu.PopupMenu[2].PopupSubMenus = new PopupMenuItemDetailsCollection();
MyPopupMenu.PopupMenu[2].PopupSubMenus.Add(new PopupMenuItemDetails(DeveloperLand, DeveloperLandAltText, DeveloperLandName, DeveloperLandJavaScript, DeveloperLandImageUrl, null, MenuItemDirection.Vertical, DeveloperLandTableID, false));
MyPopupMenu.PopupMenu[2].PopupSubMenus.Add(new PopupMenuItemDetails(CodeGuru, CodeGuruAltText, CodeGuruName, CodeGuruJavaScript, CodeGuruImageUrl, null, MenuItemDirection.Vertical, CodeGuruTableID, false));
MyPopupMenu.PopupMenu[2].PopupSubMenus.Add(new PopupMenuItemDetails(GotDotNet, GotDotNetAltText, GotDotNetName, GotDotNetJavaScript, GotDotNetImageUrl, null, MenuItemDirection.Vertical, GotDotNetTableID, false));
MyPopupMenu.PopupMenu[2].PopupSubMenus.Add(PopupMenuItemDetails.PopupMenuItemSeparator());
MyPopupMenu.PopupMenu[2].PopupSubMenus.Add(new PopupMenuItemDetails(Msdn, MsdnAltText, MsdnName, MsdnJavaScript, MsdnImageUrl, null, MenuItemDirection.Vertical, MsdnTableID, false));
// find the cell we use to add our content
Control ContentCell = BaseControl.FindControl(Controls, ControlContainer);
// event handler called when a menu item has been clicked
MyPopupMenu.MenuClicked = new MenuClicked(MyPopupMenu_MenuClicked);
// if we found the content cell then let's add the popup menu control to it
if (ContentCell != null)
ContentCell.Controls.Add(MyPopupMenu);
// the label which shows which menu item has been clicked
Message = BaseControl.CreateLabel(Controls, NoMenuItemClicked);
Message.CssClass = MessageStyle;
}
/**////
/// event handler called when a menu item has been clicked
///
/// the menu controls collection
/// the selected menu item
void MyPopupMenu_MenuClicked(ControlCollection Controls, MenuItemDetails ClickedMenuItem)
{
Message.Text = String.Format(ClickedMessage, ClickedMenuItem.DisplayText);
}
}
}
PopupMenuControl.js代码：
var VisibleSubMenus = '';
var MenuTimer = 0;
var CloseTimer = 0;
function EnterMenuCell(MenuCell,SubMenuTable)
{
// if the sub-menu-table is not displayed at the moment
if (SubMenuTable.style.display == 'none')
{
// then display it now
SubMenuTable.style.display = '';
// add this to the list of visible sub-menus; this is important if the user browses
// multiple cascaded sub-menus
if (VisibleSubMenus.length == 0)
VisibleSubMenus = SubMenuTable.id;
else
VisibleSubMenus = ',' SubMenuTable.id;
}
}
//
// the user moves the mouse outside the menu cell
//
function LeaveMenuCell(MenuCell,SubMenuTable)
{
if (MenuTimer == 0)
MenuTimer = window.setInterval("CheckIfSubMenuToClose(" SubMenuTable.id ")", 20);
}
function LeaveSubMenuTable(SubMenuTable)
{
// get the list of visible sub-menus
var VisibleSubMenusArray = VisibleSubMenus.split(",");
// get the last visible sub-menu
var LastVisibleSubMenu = VisibleSubMenusArray[VisibleSubMenusArray.length - 1];
if ((SubMenuTable.style.display != 'none') &; (LastVisibleSubMenu == SubMenuTable.id))
{
// closes the sub-menu table
CloseSubMenu(SubMenuTable);
if (MenuTimer == 0)
MenuTimer = window.setInterval("CloseAllSubMenus()", 20);
}
}
function CloseAllSubMenus()
{
// first clear the timer
if (MenuTimer != 0)
{
window.clearInterval(MenuTimer);
MenuTimer = 0;
}
// check if we have any sub-menus open
if (VisibleSubMenus.length > 0)
{
// get the list of visible sub-menus
var VisibleSubMenusArray = VisibleSubMenus.split(",");
// now loop through all visible sub-menus and close them too
for (Count=0; Count 0)
VisibleSubMenus = "," VisibleSubMenusArray[Count];
else
VisibleSubMenus = VisibleSubMenusArray[Count];
}
function SetControlPosition(SubMenuTable,ParentTable,ParentCell,ParentMenuDirection,OffsetX,OffsetY)
{
// we position the control absolute
SubMenuTable.style.position = 'absolute';
// parent menu is horizontal, so we position the sub-menu at left/bottom
if (ParentMenuDirection == 'Horizontal')
{
SubMenuTable.style.left = ParentTable.offsetLeft ParentCell.offsetLeft - 1;
SubMenuTable.style.top = ParentTable.offsetTop ParentTable.offsetHeight - 1;
}
else
// parent menu is vertical, so we position the sub-menu at right/top
if (ParentMenuDirection == 'Vertical')
{
SubMenuTable.style.left = ParentTable.offsetLeft ParentTable.offsetWidth - 1;
SubMenuTable.style.top = ParentTable.offsetTop ParentCell.offsetTop - 1;
}
// there is no parent-menu; this is a popup menu which will be positioned in the
// middle of the owning control
else
{
SubMenuTable.style.left = ParentTable.offsetLeft (ParentTable.offsetWidth / 2) 1 Number(OffsetX);
SubMenuTable.style.top = ParentTable.offsetTop (ParentTable.offsetHeight / 2) 1 Number(OffsetY);
// add any body margin we have
SubMenuTable.style.left = Number(SubMenuTable.style.left.replace('px','')) Number(document.body.leftMargin);
SubMenuTable.style.top = Number(SubMenuTable.style.top.replace('px','')) Number(document.body.topMargin);
}
}
function ShowPopupMenu(PopupOwnerControl,PopupTableControl,OffsetX,OffsetY)
{
// position the popup menu in the middle of the owner control
SetControlPosition(PopupTableControl, PopupOwnerControl, null, 'popup', OffsetX, OffsetY);
// show the popup-menu
PopupTableControl.style.display = '';
// give the popup menu table the focus so we know when the user clicks anywhere
// else (the control looses then the focus
PopupTableControl.focus();
}
function ClosePopupMenu(PopupOwnerControl,PopupTableControl)
{
if (CloseTimer == 0)
CloseTimer = window.setInterval("ClosePopupMenuDelayed(" PopupOwnerControl.id "," PopupTableControl.id ")", 190);
}
function ClosePopupMenuDelayed(PopupOwnerControl,PopupTableControl)
{
// clears first the timer
if (CloseTimer != 0)
{
window.clearInterval(CloseTimer);
CloseTimer = 0;
}
// we hide the popup menu
PopupTableControl.style.display = 'none';
// close any open sub-menu
CloseAllSubMenus();
}
PopupMenuControl.css代码：
.PopupMenuTableStyle
{}{
border: groove 2px white;
background-color: black;
position: relative;
left: 0px;
top: 0px;
}
.PopupMenuRowStyle
{}{
vertical-align: middle;
}
.PopupMenuCellStyle
{}{
background-color: #ececec;
text-align: left;
width: 180px;
height: 20px;
}
.PopupMenuCellHighlightedStyle
{}{
background-color: #ccccff;
text-align: left;
width: 180px;
height: 20px;
}
.PopupMenuLinkStyle
{}{
font: normal normal bold small/normal Arial;
text-decoration: none;
white-space: nowrap;
color: blue;
cursor: hand;
line-height: 18px;
}
.PopupMenuLinkHighlightedStyle
{}{
font: normal normal bolder small/normal Arial;
text-decoration: none;
white-space: nowrap;
color: #ffffcc;
color: blue;
cursor: hand;
line-height: 18px;
}
.MenuSeparatorCellStyle
{}{
background-color: #ececec;
height: 1px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
.MenuSeparatorStyle
{}{
border-top: ridge 1px;
width: 100%;
color: white;
height: 1px;
}
.PopupMenuImageBarStyle
{}{
background-color: #cccccc;
width: 24px;
}
源码下载地址：
http://www.cnblogs.com/Files/Terrylee/PopupMenuControlSample.rar
(2005-8-20:03:59)
| 感谢原创者的辛勤劳动，希望对您有所帮助，转载请注明原出处。 |
