jquery - 使 jQuery 可加入书签(即，用于内容 slider )

Question

我制作了自己的自定义选项卡式内容脚本，效果很好。唯一缺少的是能够为不同的部分添加书签。

我知道 URL 需要以某种方式重写。目前我正在使用 PreventDefault 来停止页面刷新，这也会阻止 URL 更改。

我也尝试过手动重写 URL，但没有任何反应，因为我猜它需要某种形式的 Hook 来检测输入的 URL。

提前致谢，亨利。

编辑:Javascript:http://pastebin.com/1yhzxkUi HTML:http://pastebin.com/WH1CbRZJ

Answer 1

要存储页面的历史记录，最流行且功能齐全/支持的方式是使用 hashchanges。这意味着，假设您从 yoursite/page.html#page1 转到 yoursite/page.html#page2，您可以跟踪该更改，并且因为我们使用哈希值，所以可以跟踪该更改可通过书签以及后退和前进按钮拾取。

您可以找到一种使用 jQuery History 项目绑定(bind)哈希更改的好方法 http://www.balupton.com/projects/jquery-history

它还有一个全功能的 AJAX 扩展，允许您轻松地将 Ajax 请求集成到您的状态/哈希中，将您的网站转变为全功能的 Web 2.0 应用程序: http://www.balupton.com/projects/jquery-ajaxy

他们都在演示页面上提供了很好的文档来解释正在发生的事情和正在发生的事情。

这是使用 jQuery History 的示例(取自演示站点):

// Bind a handler for ALL hash/state changes
$.History.bind(function(state){
    // Update the current element to indicate which state we are now on
    $current.text('Our current state is: ['+state+']');
    // Update the page"s title with our current state on the end
    document.title = document_title + ' | ' + state;
});

// Bind a handler for state: apricots
$.History.bind('/apricots',function(state){
    // Update Menu
    updateMenu(state);
    // Show apricots tab, hide the other tabs
    $tabs.hide();
    $apricots.stop(true,true).fadeIn(200);
});

以及 jQuery Ajaxy 的示例(取自演示站点):

        'page': {
            selector: '.ajaxy-page',
            matches: /^\/pages\/?/,
            request: function(){
                // Log what is happening
                window.console.debug('$.Ajaxy.configure.Controllers.page.request', [this,arguments]);
                // Adjust Menu
                $menu.children('.active').removeClass('active');
                // Hide Content
                $content.stop(true,true).fadeOut(400);
                // Return true
                return true;
            },
            response: function(){
                // Prepare
                var Ajaxy = $.Ajaxy; var data = this.State.Response.data; var state = this.state;
                // Log what is happening
                window.console.debug('$.Ajaxy.configure.Controllers.page.response', [this,arguments], data, state);
                // Adjust Menu
                $menu.children(':has(a[href*="'+state+'"])').addClass('active').siblings('.active').removeClass('active');
                // Show Content
                var Action = this;
                $content.html(data.content).fadeIn(400,function(){
                    Action.documentReady($content);
                });
                // Return true
                return true;

如果您想获取查询字符串参数(例如 yoursite/page.html#page1?a.b=1&a.c=2)，您可以使用:

$.History.bind(function(state){
    var params = state.queryStringToJSON(); // would give you back {a:{b:1,c:2}}
}

因此，请查看这些演示链接以查看它们的实际情况，以及所有安装和使用详细信息。

<小时/>

编辑:查看代码后，您只需将其与 jQuery History 一起使用即可。

更改:

$('.tabbed_content .tabs li a').live('click',
    function (e){
        e.preventDefault();
        switchTab($(this));
    });

致:

// Bind a handler for ALL hash/state changes
$.History.bind(function(state){
    switchTab(state);
});

或者，如果您也计划在其他区域使用 jQuery History，那么我们希望确保只为我们的选项卡调用 switchTab，而不是所有哈希:

// Bind a handler for ALL hash/state changes
$.History.bind(function(state){
    if ( $('.tabbed_content > .content > li[id='+state+']').length ) switchTab(state);
});

我们不再使用 onclick 事件，而是绑定(bind)到 jQuery History，因为它将检测 hashchange。这是需要理解的最重要的概念，例如，如果我们为该网站添加书签然后返回到该网站，则我们从未单击过它。因此，我们更改点击次数以绑定(bind)到 hashchange。当我们单击它、为其添加书签、向后或向前时，hashchange 将始终触发:-)