0

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

4

1 に答える 1

0

私の考え: これらの URL の下にレイアウトと適切なコンテンツを含むページ全体を提供します。そのため、直接アクセスした後、正しく表示されます。また、ajax リクエストには「2 番目のバージョン」が必要です。これは、ajax のみの他のバージョンを取得することで実行できます。たとえば、この URL の下でbooks.php?state=1&action=nav&ajax=trueもちろん、この URL を履歴にプッシュしbooks.php?state=1&action=navます (ajax 変数なし)。

php では次のようにします。

if($_GET['ajax']!='true') {
    //echo layout head
}

//echo content

if($_GET['ajax']!='true') {
    //echo layout foot
}
于 2013-07-21T10:43:47.467 に答える