メニューからユーザーをナビゲートするために 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....*/
}
問題は、History.pushState() で指定された URL が、スタイリングなしでデータをエコーする単なる php スクリプトであることです。そのため、ユーザーがページをリロードすると、新しいページには、スタイリングなしで無計画に配置された要素が含まれます。これを克服する方法について何か提案はありますか? 前もって感謝します。