0

jQuery BBQ を理解するのに非常に苦労していますが、うまくいきません。理解しなければならないことがいくつかありますが、その部分をノックアウトすることが他の問題の解決につながることを期待して、最も重要であると私が信じるものに焦点を当ててみます.

それぞれが非表示になっている 3 つのセクションを含むページがあります。ユーザーがナビゲーション リンクをクリックすると、対応するセクションが展開され、他のセクション (アクティブな場合) は非表示になります。URL は、ページを表すハッシュで更新されます。とlocalhostなりlocalhost/#workます。私のコードでは、これは正しく機能します。

セクション内には、#workさまざまなビデオに対応する複数のサムネイルがあり、URL に値を追加して、ブックマークやその他の愛を許可しようとしているため、jQuery BBQ を使用しています。この種の作品は、URLが醜くなるという小さな問題があります。localhostになりlocalhost/#work=&misery=ます。見苦しいですが、正しく更新されています (セクションは意図したとおりに開いたままです)。

ここに商品があります：

イベントが発生するhashchangeと、超大規模な hash-bash 関数が実行され、URL のハッシュ値がチェックされ、適切なセクションが開きます。jQuery BBQ の.getState()メソッドを使用して、URL からビデオの値を取得し、そのサムネイルをクリックするにはどうすればよいですか?

どうもありがとうございます。長くなってしまいましたが、できるだけ明確に説明したいと思います。以下のjsFiddleを見つけてください（ただし、その環境ではハッシュをまったく表示できません...うーん！）生のコードだけでなく。

http://jsfiddle.net/danielredwood/n2KWv/2/

JavaScript:

function navi(){
var hash = window.location.hash,
    hspl = hash.split('=')[0],
    acti = $('.out')
    test = $.bbq.getState();

    console.log(test);

    if (!$('body').hasClass('work')){
        acti.removeClass('out').slideUp(400);

        $(hash).addClass('out').slideDown(400);        
    } else {
        if (hspl != '#work') {
            $('body').removeClass('work');

            acti.removeClass('out').slideUp(400);

            $(hash).addClass('out').slideDown(400);
        }
    }
}

/* Nav */

$(window).bind('hashchange', function(){
    navi();
});

/* Thumbnail Clicks */

$('.thumbnail a').click(function(){
    $('body').addClass('work');

    var name = $(this).attr('id');

    $.bbq.pushState(name);                

    return false;
});

</p>

4

1 に答える 1

0

「show_video」イベントを各リンクの onClicks として配置する代わりに、表示する ID を受け取る個別の show_video 関数を使用できます。次に、jsbbq を使用して複数のハッシュ状態プロパティを追加し、それらの存在をテストして、それに応じて動作させることができます。

したがって、次のようなことができます。

function show_video(vid_id) {
    ...
}

$('.thumbnail a').click(function(){
    ...
    var name = $(this).attr('id');

    $.bbq.pushState({'view':'work', 'video':name});                
    ...

    return false;
});

$(window).bind('hashchange', function(){
    var state = $.bbq.getState();
    if (state['view'] === 'work'){
        var vid_id = state['video'];
        show_video(vid_id);
    } else {
       ...
    }
}

また、$.bbq.push_state(..) 関数の *merge_mode* プロパティを読みたいと思うかもしれません。特定のハッシュ状態値のみを上書きするか、ハッシュ状態全体を書き換えることができます。

http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html#jQuery.bbq.pushState

于 2012-07-26T17:23:35.380 に答える