Adding history support to simple jQuery AJAX navigation
I am trying to add history support to my jQuery AJAX navigation, but since I don't know jQuery that well, I can't figure out how to do it. The following script replaces a in the current document with a from another document - thereby changing the content of the page. How can I improve the script to support browser history and bookmarks? Thanks.
$(document).ready(function(){
//References
var loading = $("#loading");
var container = $("#container");
var link;
//Manage click events
$("a.ajax-links").click(function(e){
//prevent default action
e.preventDefault();
//show the loading bar
showLoading();
//define the target and get content then load it to container
link = $(this).attr("href") + " #content";
container.load(link, hideLoading);
});
//show loading bar
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}
//hide l开发者_JAVA技巧oading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
});
Try History.js with ajaxify - it'll use the HTML5 History API so it modifies the URLs directly rather than using hashes read why hashes aren't ideal here, and the gist will handle your links and ajax for you.
精彩评论