Как создать статический заголовок, который остается даже при переходе на другие страницы (lala.com) - PullRequest
Новая
       3

Как создать статический заголовок, который остается даже при переходе на другие страницы (lala.com)

2 голосов
/ 25 марта 2010

Меня интересует, как lala.com работает. У них есть заголовок, который остается зафиксированным в верхней части браузера, и в нем есть флеш-плеер.

Вы можете нажать на другие ссылки на сайте, они отображаются под заголовком, но заголовок не нарушен и может продолжать воспроизведение музыки.

Если целью является современный браузер, скажем, IE8 и FF 3.6, каков наилучший способ добиться этого?

Спасибо за любую помощь.

Ответы [ 3 ]

5 голосов
/ 25 марта 2010

Кадры / Iframes

Один из способов добиться этого - создать frameset или использовать iframes для отображения подстраниц. Верхний (или нижний) кадр был бы очень маленьким и содержал ваш музыкальный проигрыватель. Большая рамка будет содержать страницу, которая просматривается. Этот метод используется, например, Google при нажатии на результат поиска изображений .

У этого метода есть свои недостатки: пользователь увидит ваш URL в адресной строке, а не тот, который просматривается на странице. Если пользователь вводит что-то в адресную строку, он покидает ваш набор фреймов. Это невозможно, например, записать URL текущей страницы.

Ajax

Второй, лучший способ - создать навигацию, которая загружает другие страницы в текущую страницу через AJAX. Смотрите пример реализации здесь . Это обеспечит плавную загрузку, музыка продолжит играть. Если все сделано правильно, можно даже сохранить работоспособную структуру ссылок, которая не будет нарушать внешние ссылки, и работать с кнопкой «назад». Учебник, на который я ссылаюсь, охватывает оба аспекта. Только будьте осторожны, это учебник из 3 частей. Тем не менее, он работает только с включенным JavaScript, но есть решения, которые корректно понижают версию (возвращаясь к «нормальному» поведению переключения страниц при отключенном JavaScript).

3 голосов
/ 25 марта 2010

Помимо фреймов, вы можете выполнять частичное обновление страницы с помощью ajax. Вместо полной загрузки новой страницы при каждом действии вы должны выполнить частичное обновление страницы. Вы можете сохранять закладки и функциональность кнопки возврата благодаря тщательному кодированию. Такие библиотеки, как jQuery (и многие другие) значительно упрощают использование ajax в разных браузерах. РЕДАКТИРОВАТЬ Быстрый поиск выявил вопрос Переполнение стека о плагинах кнопки возврата для jQuery. Таким образом, если вы используете jQuery, вы можете сделать этот подход еще проще.

Вот код заглушки:

HTML 

<html>
<head>
<!-- ... -->
</head>
<body>
<div id="music-header">
<!-- ...Music header content goes here -->
</div>
<div id="content">
<!-- ...Body of different pages goes here -->
</div>
</body>
</html>

Javascript предоставлен в ссылке, которую я предоставил о том, как обрабатывать закладки и кнопку возврата.

0 голосов
/ 25 марта 2010

Этот конкретный пример lala.com сделан с использованием iframes .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...