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
Post a Comment