有没有更好的方法来使用标签跟踪分页？

Question

我使用 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);
    }
}

我目前计划检查每个主题标签和值，以查看我应该加载哪个页面，除非有更好更有效的方法。

有什么想法或建议吗？

Answer 1

jQuery Address 插件在这方面做得很好。设置完成后，它会提供一系列您可以挂钩的逻辑导航事件。它还对history.pushState() 提供了很好的支持，从而消除了在较新的浏览器中对主题标签的需求，并且对那些不支持 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>