Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Master AJAX Pop-Ups Using the HoverMenuExtender Control

AJAX has made layering contextual information into a Web interface completely elegant and unobtrusive. If you build Web apps, this is one trick you definitely want in your hat. Find out how to exploit the HoverMenuExtender in the ASP.NET AJAX Control.


advertisement
ost Windows users are familiar with tool tips—the little "balloon" that pops up when you position your mouse over an icon. Tool tips are very useful user interface (UI) enhancements that display additional information about the current object of interest. On the Web, the equivalent of tool tips are pop-ups. Pop-ups have a bad reputation due to the large number of mass marketers who purchased advertising inventory on the Web in bulk using a style of pop-up that launched an additional instance of the browser on top of the main window. But these aren't the kind of pop-ups I'm talking about today.

Other types of pop-ups occur within your current window when you perform an activity such as a mouseover, and they are often very helpful. Amazon.com provides a nice example of a useful pop-up on its front door; if you move your mouse over the Product Categories tab, a large pop-up appears (see Figure 1) which displays the various top-level product categories. This kind of popup display context-sensitive information that provides a nice short-cut to certain actions.

In this article, I will show you how you can create pop-ups in your ASP.NET application using the ASP.NET AJAX framework and the ASP.NET AJAX Control toolkit (nee Atlas). In particular, you will learn how to use the HoverMenuExtender control to make good use of pop-ups in your ASP.NET Web applications. You will use pop-ups to display additional information about a Calendar control, as well as display RSS feeds when the user's mouse hovers over a RSS feed icon.




Figure 1. Pop-up in Amazon.com: Customers of Amazon.com will be familiar with this large pop-up that helps shoppers get to category pages more easily.
 
Figure 2. This short video shows the behavior of the Calendar control used in the sample application, which makes it easier to return to the previously selected date. Single click the play button twice to start the video.

Creating the Application
The first application I will create uses a Calendar control. Using the Calendar control, you can navigate between different months to select a particular date. However, it is always a pain to return to the current date. Hence, in this project, I will use the HoverMenuExtender control to enhance the usability of the Calendar control. When the user moves the mouse over the Calendar control, you will display a panel to allow the user to jump back to today’s date. At the same time, dates selected by the user are automatically added to a drop-down list so that users can directly jump to the previously selected date (see Figure 2).

To get started, launch Visual Studio 2005, select File | New | Web Site…, and then select the ASP.NET AJAX-Enabled Web Site template (see Figure 3). Name the project HoverMenuExtender and click OK.


Figure 3. Create an ASP.NET AJAX-enabled Web Site project by selecting the corresponding icon from the Web site templates in Visual Studio.
 
Figure 4. Populate the Default.aspx page with the various controls as shown here.

Populate the Default.aspx page with the following controls (see also Figure 4):
  • Calendar
  • Panel
  • HoverMenuExtender

Author's Note: For this project, I am using the ASP.NET AJAX 1.0 Beta and the ASP.NET AJAX Control Toolkit. You can find the instructions to download them from: http://ajax.asp.net/Default.aspx.

The Panel control is what will eventually become the popup. Therefore, I need to prepare the Panel for my content. In the Panel control, add the following text and controls (see also Figure 5).

  • Label
  • LinkButton
  • Dropdown List


Figure 5. Populate the Panel control with the text and controls as shown.
 
Figure 6. After adding the controls, the Default.aspx page should look like this.

To make the control more aesthetically appealing, apply the Colorful1 scheme to the Calendar control (via the Autoformat link in the Smart tag of the Calendar control). Also, check the "Enable AutoPostback" checkbox in the Smart tag of the DropDownList control. This important step is what creates the postback and updates the calendar control when the user selects a date. The Default.aspx page should now look like Figure 6.

Switch to the Source View of Default.aspx and add the attributes for the HoverMenuExtender control as follows:

<cc1:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID="Calendar1" PopupControlID="Panel1" PopDelay="500" PopupPosition="Right" > </cc1:HoverMenuExtender>

The HoverMenuExtender control supports the following attributes:
  • TargetControlID—the control the HoverMenuExtender is targeting.
  • PopupControlID—the control to display when the mouse is over the target control.
  • HoverCssClass—the CSS class to apply to the popup when it is visible.
  • PopupPosition—the position to display the popup with respect to the target control; can be left, right, top, bottom, or center.
  • OffsetX/OffsetY—the pixel offset between the target control and popup.
  • PopDelay—the time for the popup to remain visible after the mouse moves away from the target control.
At the top of the page, define a CSS style:

<head runat="server"> <title>Untitled Page</title> <style type="text/css"> .popupMenu { position:absolute; visibility:hidden; background-color:#F5F7F8; opacity:.9; filter: alpha(opacity=90); } </style> </head>

In the Panel control, set the CssClass attribute to the CSS style that you have just defined. This CSS style defines what the panel will look like:

<asp:Panel ID="Panel1" runat="server" CssClass="popupMenu" Height="50px" Width="256px">

I want the Label control within the Panel control to display today's date. To do that, switch to the code-behind of Default.aspx and in the Page_Load event, code the following:
Figure 7. Testing the Application: The completed Calendar control provides a popup panel on mouseover that gives end users quick access to useful features.

Protected Sub Page_Load( _ ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles Me.Load lblDate.Text = Today.ToShortDateString End Sub

When the user clicks on the "today's" LinkButton control, you will display the Calendar control to today's date. This is accomplished by the Click event of the LinkButton control:

Protected Sub btnToday_Click( _ ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles btnToday.Click Calendar1.VisibleDate = Today End Sub

When the user clicks on a date in the Calendar control, add the date to the DropDownList control:

Protected Sub Calendar1_SelectionChanged( _ ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles Calendar1.SelectionChanged ddlSelectedDates.Items.Add(Calendar1.SelectedDate) End Sub

Finally, when the user selects a saved date from the DropDownList control, set the Calendar control to display the selected date:

Protected Sub ddlSelectedDates_SelectedIndexChanged( _ ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles ddlSelectedDates.SelectedIndexChanged Calendar1.VisibleDate = ddlSelectedDates.SelectedItem.Text End Sub

That's it! Press F5 to test the application. Figure 7 shows what the application looks like when you move the mouse over the Calendar control.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap