JQuery 바베큐 : URL을 어디에 저장할 것인가? 데모 페이지로

Question

링크 : http://benalman.com/code/projects/jquery-bbq/examples/fragment-advanced/

SCRIPT :

<script type="text/javascript" language="javascript"> 

$(function(){ 

    // For each .bbq widget, keep a data object containing a mapping of 
    // url-to-container for caching purposes. 
    $('.bbq').each(function(){ 
    $(this).data('bbq', { 
     cache: { 
     // If url is '' (no fragment), display this div's content. 
     '': $(this).find('.bbq-default') 
     } 
    }); 
    }); 

    // For all links inside a .bbq widget, push the appropriate state onto the 
    // history when clicked. 
    $('.bbq a[href^=#]').live('click', function(e){ 
    var state = {}, 

     // Get the id of this .bbq widget. 
     id = $(this).closest('.bbq').attr('id'), 

     // Get the url from the link's href attribute, stripping any leading #. 
     url = $(this).attr('href').replace(/^#/, ''); 

    // Set the state! 
    state[ id ] = url; 
    $.bbq.pushState(state); 

    // And finally, prevent the default link click behavior by returning false. 
    return false; 
    }); 

    // Bind an event to window.onhashchange that, when the history state changes, 
    // iterates over all .bbq widgets, getting their appropriate url from the 
    // current state. If that .bbq widget's url has changed, display either our 
    // cached content or fetch new content to be displayed. 
    $(window).bind('hashchange', function(e) { 

    // Iterate over all .bbq widgets. 
    $('.bbq').each(function(){ 
     var that = $(this), 

     // Get the stored data for this .bbq widget. 
     data = that.data('bbq'), 

     // Get the url for this .bbq widget from the hash, based on the 
     // appropriate id property. In jQuery 1.4, you should use e.getState() 
     // instead of $.bbq.getState(). 
     url = $.bbq.getState(that.attr('id')) || ''; 

     // If the url hasn't changed, do nothing and skip to the next .bbq widget. 
     if (data.url === url) { return; } 

     // Store the url for the next time around. 
     data.url = url; 

     // Remove .bbq-current class from any previously "current" link(s). 
     that.find('a.bbq-current').removeClass('bbq-current'); 

     // Hide any visible ajax content. 
     that.find('.bbq-content').children(':visible').hide(); 

     // Add .bbq-current class to "current" nav link(s), only if url isn't empty. 
     url && that.find('a[href="#' + url + '"]').addClass('bbq-current'); 

     if (data.cache[ url ]) { 
     // Since the widget is already in the cache, it doesn't need to be 
     // created, so instead of creating it again, let's just show it! 
     data.cache[ url ].show(); 

     } else { 
     // Show "loading" content while AJAX content loads. 
     that.find('.bbq-loading').show(); 

     // Create container for this url's content and store a reference to it in 
     // the cache. 
     data.cache[ url ] = $('<div class="bbq-item"/>') 

      // Append the content container to the parent container. 
      .appendTo(that.find('.bbq-content')) 

      // Load external content via AJAX. Note that in order to keep this 
      // example streamlined, only the content in .infobox is shown. You'll 
      // want to change this based on your needs. 
      .load(url, function(){ 
      // Content loaded, hide "loading" content. 
      that.find('.bbq-loading').hide(); 
      }); 
     } 
    }); 
    }) 

    // Since the event is only triggered when the hash changes, we need to trigger 
    // the event now, to handle the hash the page may have loaded with. 
    $(window).trigger('hashchange'); 

}); 

$(function(){ 

    // Syntax highlighter. 
    SyntaxHighlighter.highlight(); 

}); 

</script> 

BODY :

<div class="bbq" id="bbq1"> 
    <div class="bbq-nav bbq-nav-top"> 
    <a href="#burger.html">Burgers</a> | 
    <a href="#chicken.html">Chicken</a> | 
    <a href="#kebabs.html">Kebabs</a> 
    </div> 

난 내 자신의 링크를 저장할 경우 그래서, 여기에 내 문제가 무엇입니까? 나는 링크를 클릭 한 후 DIV에서로드하는 내용을 의미합니다. 내용의

한 예! "JQuery와 BBQ 은 또한 맛있는 AJAX의 내용을로드 위의 탐색 항목을 클릭하면 컨텐츠가로드되면, 더 당신이 볼 수있는 인라인 링크를 클릭하여 우리의 풍미 즐거움을 찾아 주시기 바랍니다. & 그림 "

Answer 1

귀하의 이전 URL은 브라우저 기록에 저장됩니다. 브라우저는 당신이 해쉬 한 모든 장소를 기억합니다. 내가 을 A.COM로 이동합니다

다음 # 12 다음 a.com 번호 1394 를 이동 a.com로 이동 한 후 내 브라우저에서 다시 클릭 수 있으며 a.com # 12로 돌아갑니다 그러면 다시 클릭하면 a.com으로 돌아갑니다.

URL에 모든 국가 정보가 저장되어 있다고 생각합니다. $ .bbq.pushState의 기능은 무엇입니까 최근 작성한 코드를 살펴 보겠습니다.

  $(function() { 
      $("a[data-custom-ajax-link='true']").click(function (e) { 
       var target = $(this).data('target'); 
       var url = $(this).attr('href'); 

       $.bbq.pushState({ url: url, target: target}); 

       e.preventDefault(); 
      }); 

누군가 형태

<a href="somelink.html" data-custom-ajax-link="true" data-target='#TargetId'>Link </a> 

bbq.pushState 이벤트가 발생하는 URL을 클릭하면. 이 bbq.pushstate는 bbq.pushState 메소드에 제공되는 매개 변수 형태로 url에 해시를 추가합니다. 즉.

oldurl#url=somelink.html&target=#TargetID 

합니다 (&과 = #은 URL을 인코딩 제외)

당신은 그들이에 나 다시 URL의 끝에 굴러 이러한 해시를 잡으려고 "hashchange"창 이벤트에 바인딩 (링크를 클릭하면 해시가 변경되거나 뒤로 버튼과 해시가 바뀌면 다시 바뀝니다.

$(window).bind("hashchange", function(e) { 
     var url = $.bbq.getState("url"); 
     var $target = $($.bbq.getState("target")); 
     //fire ajax here or switch tabs etc. 
    });