点击github中的面包屑链接会触发目录 View 区域过渡到子目录。达到这种效果的最佳方法是什么。我正在使用 asp.net mvc、jquery、jquery ui 和一个 jquery 布局插件(http://layout.jquery-dev.net/ui layout) 我应该放弃布局插件吗?
最佳答案
那么,您可以从使用 unique url pattern 开始.为了让这听起来有点耳熟,让我们以推特为例:
#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 检测哈希变化:
$(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 加载新页面(取决于您使用解析的哈希确定的页面),附加加载的页面,滑动内容,然后繁荣!你完成了。如果每个人都知道使时钟转动的齿轮,那么制作起来就很容易了。
关于javascript - 如何制作类似Github的面包屑和shifting view效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9952969/