如何创建类似于Github的面包屑和切换视图效果
单击github中的breadcrumb链接将触发目录视图区域转换到子目录。实现这一效果的最佳方式是什么？我正在使用jquery mvc、jquery、jquery ui和一个asp.net布局插件( http://layout.jquery-dev.net/ ui layout )我应该放弃布局插件吗？
回答 1
Stack Overflow用户
发布于 2012-03-31 04:32:47
那么，您可以从使用unique url pattern开始。为了让这听起来有点熟悉，让我们以twitter为例：
#searching "stackoverflow"
https://twitter.com/#!/search/stackoverflow散列部分是"#“之后(并包括)的部分。使用window.location.hash为我们获取它。然后使用string.replace()删除#!/，最后得到：
search/stackoverflow然后，如果我们将这个值存储为一个变量，并执行string.split('/')，这是按/拆分值，我们将返回以下内容：
array = ['search','stackoverflow'];现在它看起来更像是我们可以用来构建的面包屑。如果你在twitter上，它会更像这样：
site / search / stackoverflow对于每个breadcrumb链接，只需进一步添加。如果你有分段的urls，很容易建立链接：
site = mysite.com
site/search = mysite.com/search
site/search/stackoverflow = mysite.com/search/stackoverflow对于滑动部分，您需要选择"onhashchange“事件，该事件检测对散列值的更改。当你点击一个带有href="#somevalue"的链接时，这个事件就会发生--注意，href带有"#“。您还会注意到，页面不会移动(这就是AJAX的魔力稍后发挥作用的地方)。
对于现代浏览器，您可以使用jQuery或普通JS检测哈希更改：
$(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加载新页面(取决于您使用解析后的散列确定的页面)，附加加载的页面，滑动内容，然后就可以了！你的任务完成了。对于每个人来说，如果他们知道让时钟转动的齿轮，就很容易做到这一点。
https://stackoverflow.com/questions/9952969
复制相似问题
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
