Problem getting JQuery BBQ to work -


i'm still new javascript/jquery, , want learn how utilize seemingly nice plugin.

i have linked both jquery , bbq this:

<script src="lib/js/jquery.ba-bbq.min.js"></script> <script src="lib/js/jquery.min.js"></script> 

i have inserted code, given in examples of simple implementation on ben alman's site.

  • can explain me, need edit? , kind of divs/tags/classes need test this?

would appreciated.

$(function(){    // keep mapping of url-to-container caching purposes.   var cache = {     // if url '' (no fragment), display div's content.     '': $('.bbq-default')   };    // bind event window.onhashchange that, when history state changes,   // gets url hash , displays either our cached content or fetches   // new content displayed.   $(window).bind( 'hashchange', function(e) {      // hash (fragment) string, leading # removed. note     // in jquery 1.4, should use e.fragment instead of $.param.fragment().     var url = $.param.fragment();      // remove .bbq-current class "current" link(s).     $( 'a.bbq-current' ).removeclass( 'bbq-current' );      // hide visible ajax content.     $( '.bbq-content' ).children( ':visible' ).hide();      // add .bbq-current class "current" nav link(s), if url isn't empty.     url && $( 'a[href="#' + url + '"]' ).addclass( 'bbq-current' );      if ( cache[ url ] ) {       // since element in cache, doesn't need       // created, instead of creating again, let's show it!       cache[ url ].show();      } else {       // show "loading" content while ajax content loads.       $( '.bbq-loading' ).show();        // create container url's content , store reference in       // cache.       cache[ url ] = $( '<div class="bbq-item"/>' )          // append content container parent container.         .appendto( '.bbq-content' )          // load external content via ajax. note in order keep         // example streamlined, content in .infobox shown. you'll         // want change based on needs.         .load( url, function(){           // content loaded, hide "loading" content.           $( '.bbq-loading' ).hide();         });     }   })    // since event triggered when hash changes, need trigger   // event now, handle hash page may have loaded with.   $(window).trigger( 'hashchange' );  }); 

firstly - should reference jquery before bbq plugin.

<script src="lib/js/jquery.min.js"></script> <script src="lib/js/jquery.ba-bbq.min.js"></script> 

the main thing remember when using bbq plugin instead of manipulating dom directly (eg show/hide things/ ajax loading etc), change browser url fragment instead , make dom changes in hashchange event. example:

// hook click handler , anchor $("#mylink").click(function(){     $.bbq.pushstate("show", true); }); 

then in hashchange event, check show url fragment, $.bbq.getstate("show"), , take appropriate action.


Comments

Popular posts from this blog

php - What is the difference between $_SERVER['PATH_INFO'] and $_SERVER['ORIG_PATH_INFO']? -

fortran - Function return type mismatch -

queue - mq_receive: message too long -