5

私は最近、History.js、jQuery、およびScrollToを使用してHTML5 History APIでWebサイトをAjaxifyする方法に関するこの要点を見つけました：https ：//github.com/browserstate/ajaxify

私はこれの単純なバージョンを機能させるのに苦労していて、すべてを理解しているかどうかわかりません。まず、要点で提供されているすべてのスクリプトをロードしてから、非常に単純なナビゲーションとコンテンツのセクションを設定しました。

 <ul id="nav">
    <li id="home-link"><a href="/" title="Home">Home</a>/</li>
    <li id="work-link"><a href="/work" title="Work">Work</a>/</li>
    <li id="labs-link"><a href="/labs" title="Labs">Labs</a>/</li>
    <li id="blog-link"><a href="/blog" title="Blog">Blog</a>/</li>
    <li id="contact-link"><a href="/contact" title="Contact">Contact</a></li>
</ul>

<div id="content"></div>

次に、htmlに一致するようにセレクター変数を変更しました。

/* Application Specific Variables */
contentSelector = '#content',
$content = $(contentSelector),
contentNode = $content.get(0),
$menu = $('#nav'),
activeClass = 'active',
activeSelector = '.active',
menuChildrenSelector = 'li',

次にやるべきことは、迷子になるところです。私がやりたいのは、選択したナビゲーションリンクに固有のhtmlコンテンツをロードすることだけです。したがって、[作業]をクリックした場合は、work.htmlファイルをコンテンツセクションにロードし、URLを「mywebsite.com/work」に変更します。物事を簡単にするために、work.htmlと他のすべてのajaxableコンテンツが同じディレクトリにあるとしましょう。

どんな助けでも大歓迎です！乾杯！

4

2 に答える 2

7

それで、これは私がこの質問に影響を与えた私が取り組んでいたウェブサイトをどのように苦しめたのかという本当の骨の折れる例です。本当に長い遅れでごめんなさい。最初にHTML：

    <ul id="nav">
        <li id="home-link"><a href="home" class="ajaxify" title="Home">Home</a></li>
        <li id="work-link"><a href="work" class="ajaxify" title="Work">Work</a></li>
        <li id="labs-link"><a href="labs" class="ajaxify" title="Labs">Labs</a></li>
        <li id="blog-link"><a href="blog" class="ajaxify" title="Blog">Blog</a></li>
    </ul>

    <div id="content">Home Content</div>

次のJavascript：

 <script type="text/javascript">

    var directory = 'content/'; //directory of the content we want to ajax in
    var state = History.getState();

    //for when they click on an ajax link
    $('.ajaxify').on('click', function(e){
        var $this = $(this);
        var href = $this.attr('href'); // use the href value to determine what content to ajax in
        $.ajax({
            url: directory + href + '.html', // create the necessary path for our ajax request
            dataType: 'html',
            success: function(data) {
                $('#content').html(data); // place our ajaxed content into our content area
                History.pushState(null,href, href + '.html'); // change the url and add our ajax request to our history
            }
        });
        e.preventDefault(); // we don't want the anchor tag to perform its native function
    });

    //for when they hit the back button
    $(window).on('statechange', function(){
        state = History.getState(); // find out what we previously ajaxed in
        $.ajax({
            url: directory + state.title + '.html', //create our path
            dataType: 'html',
            success: function(data) {
                $('#content').html(data);
            }
        });
    });
    </script>

基本的に、私が行っているのは、ロードする特定のコンテンツを通知するために使用されるクラス「ajaxify」でアンカータグのクリックをインターセプトすることです。クリックをインターセプトしてロードするコンテンツを決定したら、history.js pushSate（）を使用してユーザーがサイトを通過する順序を追跡し、ページをリロードせずにURLを変更します。戻るボタンを押すことにした場合、statechangeリスナーは正しいコンテンツをロードします。彼らが更新ボタンを押すことにした場合、あなたは異なるURL名であなたのインデックスページを複製する方法を考え出す必要があるでしょう。これはphpで簡単に行うことができます。または、必要に応じてインデックスページをコピー、貼り付け、名前を変更することもできます。

これが私がGithubに投稿した例です：https ：//github.com/eivers88/ajaxify-simple-demo

念のため、ローカルでajaxを使用する場合は、 MAMPやWAMPなどの個人用Webサーバーでプロジェクトを実行することをお勧めします。このデモは、サーバーが実行されていないとChromeで失敗します。ただし、サーバーがなくてもFirefoxで動作するはずです。

于 2013-07-16T22:32:24.710 に答える
0

これらの要件を考慮して、実行する必要のあるさまざまなことがあります。使用できる関数は次のとおりです。

function doAjax(htmlpage){
$.ajax({
    url:"/"+htmlpage, 
    type: 'GET',
    success: function(data){
        $('#content').html(data)
    }
});
}

これをフックアウトする最も簡単な方法は、上記のタグを次のように調整することです。

<a href="#" onclick="doAjax('work.html');return false;"><img></a>

ただし、上部のスクリプトタグでjqueryを使用してこれを行う方が、（機能的には同じですが）少し「正しい」でしょう。

$(function () {
    $('#buttonid1').click(function(){doAjax('work.html')});
    $('#buttonid2').click(function(){doAjax('about.html')});
    $('#buttonid3').click(function(){doAjax('contact.html')});
});

どちらの場合も、これらの「work.html」ページは完全なhtmlドキュメントではなく、コンテンツdivに含まれるものである必要があります。

このajaxは、訪問者に表示されるURLを変更するために何もしません。これを機能させるには、 html5履歴APIを使用する必要があります。これは、上記のajaxリクエストよりもかなり複雑です。ですから、私が上で書いたことを完全に習得していないのであれば、それは適切かもしれないし、そうでないかもしれません。

于 2012-09-18T22:52:28.227 に答える