Let’s take previous demo and use jQuery BBQ plugin instead. Our goal is Ajax photo gallery that supports browser’s back button. We will display numbers instead of actual photos for now.
$(function ()
{
$(window).bind('hashchange', function(e) {
var i = parseInt(e.fragment, 10);
if (!isNaN(i))
switchTo(i);
});
$(window).trigger('hashchange');
});
function switchTo(i)
{
if ($("#number").text() == i)
return;
$("#number").text(i);
document.title = i;
if (i > 1)
$("#lnk_prev").attr("href", "#" + (i - 1)).removeClass("disabled");
else
$("#lnk_prev").removeAttr("href").addClass("disabled");
if (i < 20)
$("#lnk_next").attr("href", "#" + (i + 1)).removeClass("disabled");
else
$("#lnk_next").removeAttr("href").addClass("disabled");
}
Instead of handling click event we modify href attribute of the links. BBQ will fire hashchange event whenever we "navigate" to a new page. No need to prevent default processing – simple!
One gotcha to watch out for is changing page title. If you take naive approach and simply use document.title (like I did) to set page title you won't see your titles in the history menu in Internet Explorer 7:
Compare with Internet Explorer 8:
