如何创建类似于 Github 的面包屑和移动视图效果

Question

点击github中的面包屑链接会触发目录视图区域跳转到子目录。达到这种效果的最佳方法是什么。我正在使用 asp.net mvc、jquery、jquery ui 和 jquery 布局插件（http://layout.jquery-dev.net/ui layout） 我应该放弃布局插件吗？

Answer 1

好吧，您可以从使用unique url pattern 开始。为了让这听起来有点熟悉，让我们以 twitter 为例：

#searching "stackoverflow"
https://twitter.com/#!/search/stackoverflow

哈希部分是（包括）“#”之后的部分。使用window.location.hash 为我们获取它。然后使用string.replace() 删除#!/ 并最终得到：

search/stackoverflow

然后，如果我们将此值存储为变量并执行string.split('/')，即按/ 拆分值，我们将返回以下内容：

array = ['search','stackoverflow'];

现在它看起来更像是我们可以用来构建的面包屑。如果你在推特上，那更像是：

site / search / stackoverflow

对于每个面包屑链接，只需进一步附加即可。如果你有分段的网址，那么建立链接很容易：

site                      = mysite.com
site/search               = mysite.com/search
site/search/stackoverflow = mysite.com/search/stackoverflow

---

对于滑动部分，您需要选择“onhashchange”事件来检测散列值的变化。当您单击具有href="#somevalue" 的链接时，该事件总是发生 - 请注意具有“#”的href。您还注意到该页面不会去任何地方（这就是 AJAX 魔法稍后发挥作用的地方）。

对于现代浏览器，您可以使用 jQuery 或纯 JS 检测 hashchange：

$(window).on('hashchange',function(){
    //do whatever you want when the hash changes
});

//or

window.onhashchange = function(){
    //do whatever you want when the hash changes
}

对于较旧的浏览器，您必须设置一个计时器来检查 window.location.hash 的先前值与当前值

(function timer(prevHash){
    var currentHash = window.location.hash;
    if(prevHash !== currentHash){
        //do whatever you want when the hash changes
    }
    setTimeout(function(){
        timer(currentHash);
    },1000);
}();

---

使用jQuery.animate()可以实现滑动效果。您可以通过 AJAX 加载新页面（取决于您使用解析的哈希确定的页面），附加加载的页面，滑动内容，然后繁荣！你完成了。如果每个人都知道使时钟转动的齿轮，那么每个人都很容易做到。