合Jst和Css实现了在Asp.net下XP风格的下拉菜单-.NET教程,Asp.Net开发

结合jst和css实现了在asp.net下xp风格的下拉菜单，效果图如下：

实现的步骤及源码如下：
default.aspx代码：

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 lets 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 < visiblesubmenusarray.length; count++)
        {
            // get a reference to the visible sub-menu
            var submenu = document.getelementbyid(visiblesubmenusarray[count]);

            // and now hide it
            submenu.style.display = none;
        }

        // reset the list of visible sub-menus
        visiblesubmenus = ;
    }
}

//
// the user moves the mosue cursor over the sub-menu table
//
function entersubmenutable(submenutable)
{
   
    if (menutimer != 0)
    {
        window.clearinterval(menutimer);
        menutimer = 0;
    }
}


function checkifsubmenutoclose(submenutable)
{
    // first clear the timer itself
    if (menutimer != 0)
    {
       window.clearinterval(menutimer);
       menutimer = 0;
    }

    // now close the sub-menu table
    closesubmenu(submenutable);
}

//
// closes the sub-menu table and removes it from the list of visible sub-menus
//
function closesubmenu(submenutable)
{
    // now close the sub-menu
    submenutable.style.display = none;

    // get the list of visible sub-menus
    var visiblesubmenusarray = visiblesubmenus.split(",");

    // now we rebuild the list of visible sub-menus by excluding the sub-menu we 
    // just closed
    visiblesubmenus = ;

    // loop through all existing sub-menus
    for (count=0; count < visiblesubmenusarray.length; count++)

        // if the sub-menu is the same as the one we just closed then ignore it;
        // otherwise add it again
        if (visiblesubmenusarray[count] != submenutable.id)
            if (visiblesubmenus.length > 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;
}