Ok, there is no such think as smart link (as far as I know). I’ve just made that name up. Lot’s of times, I want one link to do several things, depending on what user decides. Putting a whole lot of links that do almost the same thing, with some small difference is not an option because it a) confuses users and b) most of the time, there is not enough space on the screen to do that. So, thanks to AtlasControlToolkit HoverManuExtender this idea become very easy to implement with absolutely no need to know dhtml, which used to be the only way to do these things before (and not a very good way if I may add).
So I’ve created a small form for this example that fakes saving people you know to some list. Basically I want to give users 4 options – 1 default and 3 optional. When you enter first name, last name and email of a person that you know, you can save that to the default list “people I know” or optionally you can save it to the lists “friend”, “enemy” and “potential friend”. I know that this example is moronic in its very nature, but hey, I’m a developer, not a screenwriter.
So first I’ve added my form.
Then I’ve added a default LinkButton, that when clicked will add the data to the default list “people I know”. However, as soon as you hover over that link, three additional links will appear “Add as a friend”, “Add as an enemy” and “Add as a potential friend”. Clicking any of these link will invoke the appropriate method assigned to their onClick event. Pretty easy.
Let’s examine a bit the HoverMenuExtender or better to say it’s list of properties HoverMenuProperties. First we have TargetControlID property, which determines which control (and it can be any control, not necessarily LinkButton) when hovered over will display the additional links. You can think of this property as ID of your default link. Second, property is HoverCssClass, which basically sets the class of that default link when hovered over. I’ve tried doing this through pure css (a:hover kind of thing), but by using HoverCssClass your default link will keep the “hover” style even when you move to the submenu (not the case with doing it with pure css). So, use HoverCssClass. Next property is the PopupControlID, which simply determines which control holds your submenu. In my case it’s the pnlAddOptions panel, which holds the three additional links. Last property I’ve used is PopupPosition, which hmmm… (I feel so stupid explaining these no brainer properties), determines on which side relatively to your default link, will the submenu appear.
You can download the whole project from reBlogger lab.
This blog is being delivered to you by
“Do you know what your employees are blogging about?”