HOW-TO: Implement eBay's Slick Dropdown Popup -- Part 2
Surprised?
In the previous eBay post, I mentioned eBay's Slick Dropdown ComboBox.
Slick seems like an accurate word.
If you take a look at the above mentioned combobox on eBay's site (Under My eBay) then you'll find something very interesting. Here is the ComboBox before clicking on the dropdown:
Here it is after clicking the dropdown:
Do you notice something peculiar? It's not a DropDown ComboBox at all. It's just a cleverly disguised Popup control.
ASPxPopupControl to the Rescue
You easily can create popups like this with the versatile ASPxPopupControl. Do you want to see a sample? No problem.
Attached to this post is a sample you can open in Visual Studio 2005 with our DXperience or ASPxperience v2007 Volume 2 ASP.Net controls installed.
You can download the sample here: ASPxPopupControl_eBay_Sample.zip
The sample code shows that you don't need to do much to achieve the same look and feel. Let's take a further look at this sample:
The top button placed in a small 2-column table with a dropdown image labeled Image1 next to it.
Then place an ASPxPopupControl and set it's PopupElementID to Image1. This will activate the popup when the dropdown image is clicked. This method leaves the button free to still be clicked as a separate command and still have the dropdown activate the popup control to display more options (or links in this case).
To get the same look as eBay's, you'll need to do some HTML coding and set some more properties. There isn't very much to create and luckily you can find this already coded for you in the sample. Within the ASPxPopupControl is a panel with a table and some links inside of it:
Now simply run the project, click the dropdown image and we have the slick eBay-like dropdown made with the ASPxPopupControl:
As you can see there is no difference in look or functionality. You can create some amazing and versatile websites with the ASPxperience Subscription.
Other Resources
You might also want to check out these cool online demos of the ASPxPopupControl:
Features, Templates - Shows you how customizable the ASPxPopupControl is.
DataBinding - Very slick. You'll find ways to use this after seeing this demo.
ContentUrl - You might find this handy to allow your customers to give you feedback.
Transparency - Yes, you can create something similar. Take a look at the ASPx page for the sample's code.
Client-Side Events and Functionality - If you need, the ASPxPopupControl supports a powerful Client-Side object model.
Note: If you're curious about the colors and fonts used in the screenshot above, from my Visual Studio 2005 IDE, then check out the following posts:
In search of the perfect monospaced programmers font - Inconsolata
Free DevExpress Products - Get Your Copy Today
The DevExpress Team