2011-07-29 86 views
3

使用hashchange事件我在檢測用戶何時單擊瀏覽器中的後退按鈕並相應地更改URL。有沒有更好的方法來做到這一點分頁?目前,我正在改變URL用戶點擊我的分頁控制後,像這樣:有沒有更好的方法跟蹤分頁與標籤?

$(".pager").click(function(){ 

    var start = null; 
    if ($.browser.msie) {  
     start = $(this).attr('href').slice($(this).attr('href').indexOf('#')+1); 
    } 
    else {  
     start = $(this).attr('href').substr(1); 
    } 

    $('#start').val(start); 

    $.post("visits_results.php", $("#profile_form_id").serialize(), 
    function(data) { 
     $('#search_results').html(data); 
     location.href = "#visits=" + start; 
    }); 

    return false; 
}); 

我的JavaScript來檢測後退按鈕看起來是這樣的:

function myHashChangeCallback(hash) { 

    if (hash == "") { 
     $("#loadImage").show(); 

     var no_cache = new Date().getTime(); 
     $('#main').load("home.php?cache=" + no_cache, function() { 
     $("#loadImage").hide(); 
    }); 

    return false; 

    } 
    else { 
    // adding code to parse the hash URL and see what page I'm on...is there a better way?; 
    } 
} 

function hashCheck() { 
    var hash = window.location.hash; 
    if (hash != _hash) { 
     _hash = hash; 
     myHashChangeCallback(hash); 
    } 
} 

我目前打算檢查每個主題標籤和除非有更好的更有效的方法,否則應該加載哪個頁面的值。

任何想法或建議?

回答

0

jQuery Address插件做得非常好。一旦設置,它提供了一系列您可以接入的邏輯導航事件。它還爲history.pushState()提供了非常好的支持,這消除了在較新瀏覽器中對hashtags的需求,並且對那些不支持pushState的瀏覽器也有同樣好的後備支持。

簡單的執行是這樣的:

// Run some code on initial load 
$.address.init(function(e) { 
    // Address and path details can be found in the event object 
    console.log(e); 
}); 

// Handle hashtag/pushState change events 
$.address.change(function(e) { 
    // Do more fancy stuff. Don't forget about the event object. 
    console.log(e); 
}); 

// Setup jQuery address on some elements 
$('a').address(); 

爲了使pushState的()支持參數傳遞給腳本,像這樣:

<script type="text/javascript" src="jquery.address-1.3.min.js?state=/absolute/path/to/your/application"></script>

+0

我看了這一點,但它似乎有點難以實施。我擔心我需要替換當前的所有JavaScript代碼......但我可能不得不這樣做。 – Paul

+0

實際上,該網站上的示例非常可怕。查看[本頁]上的源代碼(http://www.asual.com/jquery/address/samples/state/)。你只需要調用三種方法。我會用一個例子更新我的答案。 – Roshambo

+0

非常感謝這些例子,我會試試看。 – Paul

相關問題