Я использую History.js для навигации пользователя по меню.
Menu content
home |-------|
books | |
vidoes | |
about |_______|
HTML:
<div class="menu" id="home">Home</div>
<div class="menu" id="books">Books</div>
<div class="menu" id="videos">Videos</div>
<div class="menu" id="about">About</div>
<div id="container_main_content"></div>
JQuery:
$(
function()
{
// Prepare
var History = window.History; // Note: We are using a capital H instead of a lower h
if ( !History.enabled ) {
// History.js is disabled for this browser.
// This is because we can optionally choose to support HTML4 browsers or not.
return false;
}
// Bind to StateChange Event
History.Adapter.bind(window,'statechange',function()
{ // Note: We are using statechange instead of popstate
var State = History.getState();
console.log(State);
$.get(State.url,function(data)
{
$("#container_main_content").html("");
$("#container_main_content").append(data);
});
});
$('.menu').click(function(evt)
{
switch(evt.target.id)
{
case "home":History.pushState(null, $(this).text(), "/main/main.php?state="+evt.target.id+"&action=nav");
break;
case "books": History.pushState(null, $(this).text(), "/books/books.php?state="+evt.target.id+"&action=nav");
break;
/*and so on....*/
}
Проблема в том, что URL-адрес, указанный в History.pushState(), является просто php-скриптом, который повторяет стиль данных без стиля. Поэтому, когда пользователь перезагружает страницу, новая страница имеет элементы, расположенные беспорядочно без какого-либо стиля. Любые предложения о том, как преодолеть это? Заранее спасибо.
