Panneaux à onglets et plugin hashchange

Question

Je suis en train d'utiliser le code suivant pour créer des panneaux à onglets et c'est le seul qui fonctionne très bien. J'ai essayé easytabs mais ça ne fonctionne pas correctement avec ce que j'ai. Alors, on y va:

/* 
* The following lines are for main tabbed panels 
*/ 

$(function() { 

    $('.nav a').click(function() { 
     // save $(this) in a variable for efficiency 
     var $this = $(this); 

     // hide panels 
     $('.panel').hide(); 
     $('.nav a.active').removeClass('active'); 

     // add active state to new tab 
     $this.addClass('active').blur(); 
     // retrieve href from link (is id of panel to display) 
     var panel = $this.attr('href'); 
     // show panel 
     $(panel).fadeIn(250); 

     // don't follow link down page 
     return (false); 
    }); 
    // end click 

    // open first tab 
    $('.nav li:first a').click(); 

}); 
// end function 

J'ai trouvé un plugin appelé barbecue, qui utilise hashchange. http://benalman.com/projects/jquery-bbq-plugin/ Je deviens fou de comprendre comment l'utiliser avec mon code afin de pouvoir utiliser le bouton de retour dans le navigateur. Aidez-moi, s'il vous plaît. Merci d'avance pour votre aide. Cordialement, Deviad

Answer 1

J'ai résolu le problème de cette façon.

/* 
* jQuery hashchange event - v1.2 - 2/11/2010 
* http://benalman.com/projects/jquery-hashchange-plugin/ 
* 
* Copyright (c) 2010 "Cowboy" Ben Alman 
* Dual licensed under the MIT and GPL licenses. 
* http://benalman.com/about/license/ 
*/ 
(function($, i, b) { 
    var j, k = $.event.special, c = "location", d = "hashchange", l = "href", f = $.browser, g = document.documentMode, h = f.msie && (g === b || g < 8), e = "on" + d in i && !h; 
    function a(m) { 
     m = m || i[c][l]; 
     return m.replace(/^[^#]*#?(.*)$/, "$1") 
    } 
    $[d + "Delay"] = 100; 
    k[d] = $.extend(k[d], { 
     setup : function() { 
      if (e) { 
       return false 
      } 
      $(j.start) 
     }, 
     teardown : function() { 
      if (e) { 
       return false 
      } 
      $(j.stop) 
     } 
    }); 
    j = (function() { 
     var m = {}, r, n, o, q; 
     function p() { 
      o = q = function(s) { 
       return s 
      }; 
      if (h) { 
       n = $('<iframe src="javascript:0"/>').hide().insertAfter("body")[0].contentWindow; 
       q = function() { 
        return a(n.document[c][l]) 
       }; 
       o = function(u, s) { 
        if (u !== s) { 
         var t = n.document; 
         t.open().close(); 
         t[c].hash = "#" + u 
        } 
       }; 
       o(a()) 
      } 
     } 
     m.start = function() { 
      if (r) { 
       return 
      } 
      var t = a(); 
      o || p(); 
      (function s() { 
       var v = a(), u = q(t); 
       if (v !== t) { 
        o(t = v, u); 
        $(i).trigger(d) 
       } else { 
        if (u !== t) { 
         i[c][l] = i[c][l].replace(/#.*/, "") + "#" + u 
        } 
       } 
       r = setTimeout(s, $[d + "Delay"]) 
      })() 
     }; 
     m.stop = function() { 
      if (!n) { 
       r && clearTimeout(r); 
       r = 0 
      } 
     }; 
     return m 
    })() 
})(jQuery, this); 
/* 
* 
* Tabbed Browsing with back button support. Requires Hashchange plugin. 
* 
*/ 

$(function() { 

$(".nav a").live("click", function(e) { 

    updateTabs($($(this).attr("href"))); 

}); 

//Grab hash off URL (default to first tab) and update 

$(window).bind("hashchange", function(e) { 

    var anchor = $(location.hash); 

    if (anchor.length === 0) { 

     anchor = $(".panel div:eq(0)"); 

    } 

    updateTabs(anchor); 

}); 

//Pass in the tab and show appropriate contents 

function updateTabs(tab) { 

    $(".nav a.active") 

     .removeClass("active") 

     .filter(function(index) { 

     return $(this).attr("href") === '#' + tab.attr("id"); 

     }).addClass("active"); 

    $(".panel").hide(); 

    tab.show(); 

} 

//Fire the hashchange event when the page first loads 

$(window).trigger('hashchange'); 
$('.nav li:first a').click(); 
}); 

});