javascript - 如何制作类似Github的面包屑和shifting view效果

标签 javascript jquery html jquery-ui

点击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/

相关文章:

javascript - 如果下拉选择框的值是 2 或更高,如何显示消息?

javascript - 在javascript中分配不存在的变量

javascript - 在 C# 中创建一个 JavaScript 函数

javascript - 选定的文本索引

c# - 动态连接和缩小 JavaScript 或在构建时 - ASP.NET MVC

javascript - 轻松修改 jQuery 代码以使用多个文本框

javascript - 我如何抽象/概括执行类似但略有不同任务的功能? (大部分不同且稍微复杂的选择器)

javascript - 使用 WebGL 时 Div 鼠标悬停事件不会触发

html - 垂直文本对齐中心和 block 选择在 li

javascript - 将表格行移动到另一个表格并将其取回