UI Tip
LANGUAGES: HTML | JavaScript | All .NET Languages
ASP.NET VERSIONS: 1.0 | 1.1
Extend the Context Menu
In this second part of "Create a Context-Sensitive Menu," build a more full-featured menu for your Web apps.
By Brad McCabe
In the last installment of this column (see Create a Context-Sensitive Menu), we looked at creating a context menu in Internet Explorer to make applications look and feel more like a Windows Forms application. Now we're going to extend this menu to make it a more full-featured menu, like the one shown in Figure 1.
Figure 1. To give your users a rich
UI experience, add icons, color, and mouseover effects to your context-sensitive
menus.
The first thing we need to do is add a unique ID to each of the rows of the menu. We can do this by adding an ID attribute to each of the TD tags of the menu.
After each of the menu items has been uniquely identified, we can add some mouseover effects to the items, to make the menu more interactive and provide visual feedback to the end-user. To do this, we use the mouseover and mouseout events, as well as modify the background color of the cell.
The following two attributes and JavaScript will need to be added to each of the TD tags of the menu. Notice how the Row ID that we added to each row is used to adjust the background:
ONMOUSEOVER="document.all.Row1.style.background=\'#CFD6E8\';
document.all.Row1.style.border=\'1pt solid #737B92\';"
ONMOUSEOUT="document.all.Row1.style.background=\'#CCCCCC\';
document.all.Row1.style.border=\'1pt solid #CCCCCC\';"
After adding the ID attributes and the mouseover and mouse event events to the code from last time the rendering lines should look similar to the following code snippet:
.Append("
document.all.Row1.style.border=\'1pt solid #737B92\';"" ONMOUSEOUT=""document.all.Row1.style.background=\'#CCCCCC\';
document.all.Row1.style.border=\'1pt solid #CCCCCC\';"">
Line 1
Now we have added a bit of life to our menu and have given the users feedback as they mouse over various items.
The next thing to do to make this more like a Windows menu is add some images to the items. Since the items are inside of a standard HTML TD tag, we can add any HTML elements that we would like. In this case we will add some basic image tags to the menu. You could, however, get more advanced here and add another TD tag and change its back color to more closely resemble the Windows XP look and feel.
The last thing remaining is to make the menu functional. To perform an action when a user clicks on a menu item we will need to trap the click event of the TD tag. We do this in a similar way we did for hooking up the previous JavaScript events; we simply put an OnClick attribute on the TD tag and call any JavaScript function or functions that are needed. For example, if we wanted to have one of the menu options to be print we could use the following JavaScript to print the page:
ONCLICK="window.parent.print();"
There you have it: With a few simple lines of code that utilize some of the various concepts that we have examined in the past you now have the basis for a fully functional context menu on the Web. You can easily build off this core design and modify the menu to fit any needs you have, such as turning this into a reusable control or adding it to a common base class for your Web pages.
I added some commonly request JavaScript functions to the downloadable code for this column. These functions are part of the menu code but you are welcome to use them anywhere that you need to.
Got a UI question, tip, or idea for a topic you'd like me to cover? I'd love to hear it. E-mail me at [email protected].
The sample code in this article is available for download.
Brad McCabe is the technical evangelist for Infragistics. Brad also has been a systems architect and consultant for Verizon Communications and many other clients, and he was a leading .NET evangelist within Ajilon Consulting. His primary interests include ASP.NET, Windows CE .NET, .NET Compact Framework, and Microsoft's networking technologies. E-mail him at [email protected].
