2012-03-23 5 views
1

私はhistory.js pluginを使用しており、/タイプのURLを実装する方法を知りたいと考えています。今、私のコードは次のとおりです。history.jsのハッシュ(#)の代わりにフォワードスラッシュを使用する方法は?

//Check if url hash value exists (for bookmark) 
$.history.init(pageload); 

//highlight the selected link 
$('a[href=' + document.location.hash + ']').addClass('selected'); 

//Seearch for link with REL set to ajax 
$('a[rel=ajax]').click(function() { 

    //grab the full url 
    var hash = this.href; 

    //remove the # value 
    hash = hash.replace(/^.*#/, ''); 

    //for back button 
    $.history.load(hash); 

    //clear the selected class and add the class class to the selected link 
    $('a[rel=ajax]').removeClass('selected'); 
    $(this).addClass('selected'); 

    //hide the content and show the progress bar 
    $('#content').hide(); 
    $('#loading').show(); 

    //run the ajax 
    getPage(); 

    //cancel the anchor tag behaviour 
    return false; 
}); 



function pageload(hash) { 
    //if hash value exists, run the ajax 
    if (hash) getPage();  
} 



function getPage() { 

//generate the parameter for the php script 
var data = 'page=' + document.location.hash.replace(/^.*#/, ''); 
$.ajax({ 
    url: "route.php", 
    type: "GET",   
    data: data,  
    cache: false, 
    success: function (html) { 

     //hide the progress bar 
     $('#loading').hide(); 

     //add the content retrieved from ajax and put it in the #content div 
     $('#content').html(html); 

     //display the body with fadeIn transition 
     $('#content').fadeIn('slow');  
    }  
}); 
} 

URLは常にhttp://localhost/test/index.php#page1ですが、私はそれhttp://localhost/test/page1作る方法を知っていただきたいと思います。

私はindex.phpの部分を表示したくありません。上記のURLと同じように必要です。

答えて

3

これは、HTML5とhistory.pushState()を使用してのみ行うことができます。

このAPIを使用すると、ページの読み込みを行わずに表示されたURLを(同じドメインにある限り)変更できます。 AJAXを使用して、代わりに表示されたコンテンツを変更することができます。

github.comの任意のソースツリーを参照してください。ソースコードを参照する際に、ソースコードを「スライドイン」する技術を使用しています。

+0

答えをありがとうございますが、これを行うのに役立つプラグインがありますか? history.jsと同じですか? – randomphp

+0

@randomphp私は分かりません、私はただ手で必要なものをコード化しました。それはまったく難しいことではありません。 – Alnitak

+0

よろしくお願いいたします。 – randomphp

1

しかし、URLは常にhttp://localhost/test/index.php#page1ですが、私は がそれhttp://localhost/test/page1

あなたが望むものではないことを確認する方法を知っていただきたいと思います。 window.locationを変更すると、ドキュメントがリロードされます。

なぜアプリケーションステータスを格納するためにハッシュを使用するのですか。

+0

あなたの答えをありがとう、しかし、どのようにFacebookはこれを行うのですか? AJAXはサイト全体をブラウズしており、ハッシュを使用していません。 TwitterはHashbangスタイル(悪いことだと言われています)を使用していますが、Facebookはどのようにそれをしていますか? – randomphp

関連する問題