开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜