Тип поиска ссылок в Yahoo - как реализовать подобное поведение

Question

Когда вы открываете главную страницу Yahoo вверху, появляется раздел поиска, содержащий ссылки, такие как: Интернет, Изображения, Видео, Больше

При нажатии на ссылку выбранный раздел активируется и текст кнопки поиска изменяется. Единственная часть страницы, которая обновляется, - это поисковая часть вверху, а остальные части сайта остаются без изменений.

Мой вопрос: как это реализовано? И что еще более важно насколько похожим может быть поведение реализовано в .net с использованием VS 2008?

Действительно ли ссылки являются ссылками или различными элементами, которые только имитируют поведение ссылок? Это должен быть ajax, или все предварительно загружено и спрятано с использованием некоторых методов CSS?

Используется ли та же техника в разделе новостей на той же странице при смене вкладок: Новости, Спорт, Развлечения, Видео?

Спасибо

Answer 1

На самом деле это делается с помощью CSS и 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>

Тогда Javascript (пример использует jQuery, можно сделать разными способами ...):

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

И это пример этого в действии . Стиль и все такое будет CSS.

Answer 2

После быстрой проверки поля поиска с использованием Firebug выясняется, что нажатие на каждую из ссылок типа поиска (Web, Images и т. Д.) Просто изменяет DOM. Это включает добавление полей, удаление полей, переключение имен классов и т. Д. Я не удивлюсь, если со скрытыми полями также будут работать.

Такое поведение достигается с помощью JavaScript. В частности (и на очень высоком уровне) к ссылкам прикреплены обработчики событий, каждая из которых по-своему модифицирует DOM.

Это определенно может быть реализовано с использованием Visual Studio 2008, поскольку это действительно (и вероятно) не более чем CSS, JavaScript и HTML. .NET действительно не вступит в игру, пока вы не будете готовы принять указанный запрос и запустить его для вашего хранилища данных.

Ответ Паоло дает действительно хороший, прямой пример того, как можно подражать этому поведению.

Answer 3

К этим ссылкам прикреплены обработчики JavaScript onlclick. Когда вы нажимаете на них, другая вкладка становится видимой, а текущая вкладка скрывается. Все вкладки предварительно загружены, но изначально видна только первая.

Взгляните на Управление вкладками из инструментария управления ASP.NET AJAX. Вы можете настроить вкладки так, чтобы они выглядели как ссылки.