Search type links in Yahoo - how to implement similar behaviour

Question

When you open the yahoo main page at the top there is a search section that contains links like: Web, Images, Video, More

When clicking on the link the chosen section is activated and the text of the search button is being changed. The only part of the page that is updated is the search part at the top and the other parts of the website remain unaffected.

My question is how is this implemented? And more importantly how similar behaviour could be implemented in .net using VS 2008?

Are the links really links or different elements that only mimic the links behaviour? Does it need to be ajax, or just everything is preloaded and hidden using some css techniques?

Is the same technique used in the news section on the same page when changing tabs: News, Sport, Entertainment, Video?

Thank you

Answer 1

After doing a quick inspection of the search field using Firebug, it appears that clicking on each of search type links (Web, Images, etc) simply modifies the DOM. This includes adding fields, removing fields, toggling class names, etc. I wouldn't be surprised if hidden fields are also being manipulated.

Behavior like this is accomplished using JavaScript. Specifically (and at a very high-level), there are event handlers attached to the links each of which modify the DOM in their own way.

It can definitely be implemented using Visual Studio 2008 as it's really (and likely) nothing more than CSS, JavaScript, and HTML. .NET really wouldn't come into play until you're ready to take the specified query and begin running it against your data store.

Paolo's answer gives a really good, straight-forward example of how that behavior can be emulated.

Answer 2

This is actually done with CSS and Javascript:

<ul id='menu'>
  <li><a href="#web_search" class='active'>Web</a></li>
  <li><a href="#image_search">Image</a></li>
  <li><a href="#video_search">Video</a></li>
  <li><a href="#local_search">Local</a></li>
</ul>

<div id='web_search' class='search'></div>
<div id='image_search' class='search' style='display: none;'></div>
<div id='video_search' class='search' style='display: none;'></div>
<div id='local_search' class='search' style='display: none;'></div>

Then Javascript (example uses jQuery, can be done many ways...):

$('a','#menu').click(function() {
    $('div.search').hide();
    $('a.active', '#menu').removeClass('active');
    $($(this).addClass('active').attr('href')).show();
    $(this).blur();
    return false;
});

And this is an example of it in action. The styling and such would all be CSS.

Answer 3

Those links have onlclick JavaScript handlers attached to them. When you click on them different tab becomes visible and current tab gets hidden. All tabs are preloaded but only the first one is visible initially.

Take a look at Tabs control from ASP.NET AJAX control toolkit. You can customize tabs so that they look like links.