使 jQuery 可加入书签（即 - 对于内容滑块）

Question

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

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

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

预先感谢，亨利。

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

Answer 1

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

您可以使用 jQuery History 项目找到一种绑定哈希更改的好方法
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?ab=1&ac=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 事件，而是绑定到 jQuery History因为这将检测哈希变化。这是需要理解的最重要的概念，例如，如果我们为该网站添加书签然后返回到该网站，则我们从未单击过它。因此，我们更改点击次数以绑定到 hashchange。当我们单击它、为其添加书签、向后或向前时，hashchange 将始终触发:-)

Answer 2

如果您正在谈论更改 URL 以适应页面上的 AJAX 操作，那么我现在正在做类似的事情。

看看 http://www.asual.com/jquery/address/

这是一个 jQuery 插件，可用于在更改选项卡等时保持地址导航按钮正常工作（或者，您可以只更改 URL 而不会影响历史记录）。

当 URL 在外部（即有人粘贴地址）或内部发生更改时，它会挂钩一些事件。然后您可以从参数中获取值并进行相应更新。

一个简单的使用示例：

// Sets the tabId
$.address.parameter("tabId", tabId);

// Sets up the event to catch the URL parameter
$.address.externalChange(function(event) {
    var tabId = $.address.parameter("tabId");

    if(tabId){
        $("#tab" + tabId).show();
    }
});

Answer 3

使用哈希链接允许可添加书签/可共享的链接触发 JavaScript 代码，而不是重新加载页面。 Ben Almans jQuery hashchange 事件 允许您将事件处理程序绑定到 hashchange 事件，该插件适用于通常不支持此功能的旧版浏览器。绑定到 hashchange 的事件处理程序可以读取 url 的哈希部分，并调用任何函数。

// register event handler
function bindHashchange() {

    $(window).bind('hashchange', function(event) {
        event.preventDefault();
        var label = location.hash.substring(1);
        handleLabel(label);
    });

    // trigger event so handler will be run when page is opened first time
    // otherwise handler will only run when clicking on hash links
    $(window).trigger('hashchange');
}

// read and handle hash part of url
function handleLabel(label) {

    if ( label.length > 0 ) {
        // using label from url
        switchPage(label);
    } else {
        // use the default label, if no hash link was present
        switchPage('start');
    }
}

// in this case, load hidden <div>'s into a <div id="content">
function switchPage(label) {
    if ( label == 'start ) {
        $('div#content').html($('div#start'));
    } else if ( label == 'some_other_page' ) {
        // do something else
    }
}

该另一个事件处理程序可以处理同一 URL 中由点 ('.') 分隔的 2 个参数。

function processHash() {

    var str = location.hash.substring(1);
    var pos = $.inArray('.', str);

    var label = '';
    var arg = '';

    if ( pos > -1 ) {
        label = str.substring(0, pos);
    } else {
        label = str.substring(0);
    }

    if ( pos > 1 ) {
        arg = str.substring(pos+1);
    }

    if ( label.length == 0 ) {
        // the default page to open of label is empty
        loadContent('start');
    } else {
        // load page, and pass an argument
        loadContent(label, arg);
    }
}

如果使用正则表达式，则可以解析任意字符组合。

var registry = {};

// split on character '.'
var args = label.split(/\./g);

for ( i in args ) {
    var arg = args[i];

    // split on character '='
    var temp = arg.split('=');
    var name = temp[0];
    var value = temp[1];

    // store argument in registry
    registry[name] = value;
}
// registry is loaded, ready to run application that depends on arguments

这将转换 url：

mysite/#company.page=items.color=red

进入以下 JavaScript 对象：

对象{公司=未定义，页面=“项目”，颜色=“红色”}

那么只需在所选元素上运行 jQuery 的 show() 或 hide() 函数即可。

这可以转换为非 jQuery JavaScript，但随后您将失去 Ben Alman 提供的功能，这对于便携式解决方案至关重要。

Answer 4

您可以随时检查此插件： jQuery BBQ （返回按钮和查询）来添加要添加书签的 #hash，就像 Facebook 所做的那样。