Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何创建类似于Github的面包屑和切换视图效果

如何创建类似于Github的面包屑和切换视图效果
EN

Stack Overflow用户
提问于 2012-03-31 04:15:22
回答 1查看 658关注 0票数 1

单击github中的breadcrumb链接将触发目录视图区域转换到子目录。实现这一效果的最佳方式是什么?我正在使用jquery mvc、jquery、jquery ui和一个asp.net布局插件( http://layout.jquery-dev.net/ ui layout )我应该放弃布局插件吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-03-31 04:32:47

那么,您可以从使用unique url pattern开始。为了让这听起来有点熟悉,让我们以twitter为例:

代码语言:javascript
运行
AI代码解释
复制
#searching "stackoverflow"
https://twitter.com/#!/search/stackoverflow

散列部分是"#“之后(并包括)的部分。使用window.location.hash为我们获取它。然后使用string.replace()删除#!/,最后得到:

代码语言:javascript
运行
AI代码解释
复制
search/stackoverflow

然后,如果我们将这个值存储为一个变量,并执行string.split('/'),这是按/拆分值,我们将返回以下内容:

代码语言:javascript
运行
AI代码解释
复制
array = ['search','stackoverflow'];

现在它看起来更像是我们可以用来构建的面包屑。如果你在twitter上,它会更像这样:

代码语言:javascript
运行
AI代码解释
复制
site / search / stackoverflow

对于每个breadcrumb链接,只需进一步添加。如果你有分段的urls,很容易建立链接:

代码语言:javascript
运行
AI代码解释
复制
site                      = mysite.com
site/search               = mysite.com/search
site/search/stackoverflow = mysite.com/search/stackoverflow

对于滑动部分,您需要选择"onhashchange“事件,该事件检测对散列值的更改。当你点击一个带有href="#somevalue"的链接时,这个事件就会发生--注意,href带有"#“。您还会注意到,页面不会移动(这就是AJAX的魔力稍后发挥作用的地方)。

对于现代浏览器,您可以使用jQuery或普通JS检测哈希更改:

代码语言:javascript
运行
AI代码解释
复制
$(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的前一个值与当前值

代码语言:javascript
运行
AI代码解释
复制
(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加载新页面(取决于您使用解析后的散列确定的页面),附加加载的页面,滑动内容,然后就可以了!你的任务完成了。对于每个人来说,如果他们知道让时钟转动的齿轮,就很容易做到这一点。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9952969

复制
相关文章
如何创建CDS视图
今天继续聊S/4 HANA的CDS视图,上一篇我们简单介绍了一下CDS视图的几个聚合函数,如果你还没来得及看,请翻阅《简单介绍几个CDS视图聚合函数》。
matinal
2020/11/27
2.6K0
如何创建CDS视图
aceEditor实现类似于codepen的效果
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
牛老师讲GIS
2019/11/21
8200
视图切换(ViewSwitcher)使用
ViewSwitcher顾名思义. ViewSwitcher主要应用场景之一:比如在一个布局文件中,根据业务需求,需要在两个View间切换,在任意一个时刻,只能显示一个View.
李小白是一只喵
2020/04/23
1.8K0
视图切换(ViewSwitcher)使用
原生JS实现Tab切换效果和模态框效果
原生JS实现Tab切换效果 效果展示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Modal</title> <style> .clearfix:after{ content:''; display: block; clear: both; } li{ list-style: none; } li,ul{
小胖
2018/06/27
10.1K0
GitHub 如何创建 Access Token
随着 GitHub 系统的更新,在 2021 年的 8月底将不再支持使用用户名和密码的方式访问仓库了。
HoneyMoose
2021/07/27
1.6K0
GitHub 如何创建 Access Token
GitHub上如何创建小组?
比如:在谷歌工作,有开发小组、营销小组、运营小组,     在我所在的开发小组里面有三个人,我们需要访问相同的代码仓库,并且经常需要互相交流。     这个时候我们就需要单独的github小组,这样将有助于改善我们的工作流程。 通常来说,在github中一个组织可以分为多个小组。小组允许我和组内的成员共享设置权限,不同的组有不同的权限分配。 例如:开发小组有访问开发的权限,比如我有访问要开发软件的代码仓库的权限。
黑泽君
2018/10/12
1.6K0
如何创建、更新和删除SQL 视图
视图包含行和列,就像一个真实的表。视图中的字段就是来自一个或多个数据库中的真实的表中的字段。
用户4988376
2021/07/16
1.7K0
GitHub上如何创建组织?
如何创建组织?   有时在团队协作中,当需要用到多个代码仓库时,就需要一个github的组织了。 github组织允许你管理和组织所有的代码仓库。一个github账户可以在不同的组织中工作。   输入组织名和邮箱即可,暂时不选付费的项目。其余的不用管,默认下一步就行。
黑泽君
2018/10/12
2.4K0
View视图的创建
在撸代码的过程中经常遇到创建 View 视图,创建视图有四种方式,但是这四种创建方式到底有什么不同呢?以前只知道能创建,但是不是这四种创建方式的区别,今天让我们一起去解析一下这几种创建方式。
CatEatFish
2020/07/09
1.1K0
View视图的创建
视图切换组件ViewSwitcher
前面三期学习了ProgressBar系列组件,那本期开始一起来学习ViewAnimator组件。 一、ViewAnimator组件概述 ViewAnimator是一个基类,它继承了 Frame
分享达人秀
2018/02/05
2K0
视图切换组件ViewSwitcher
mysql创建索引视图_mysql中创建视图、索引[通俗易懂]
视图中的数据依赖于原来表中的数据,一旦表中数据发生改变,显示在视图中的数据也会发生改变。
全栈程序员站长
2022/09/16
8.2K0
RevealTrans图片切换效果
filter : progid:DXImageTransform.Microsoft.RevealTrans ( enabled= bEnabled , duration= fDuration , transition= iTransitionType )
全栈程序员站长
2022/09/07
4.7K0
RevealTrans图片切换效果
Eclipse快捷键
快速定位到行首,行尾 —— Home,End 选择当前行 —— 当光标在一行的两端时,按住shift+home/end
chenchenchen
2023/01/30
7210
提高开发效率的Eclipse实用操作
工欲善其事,必先利其器。对于程序员来说,Eclipse便是其中的一个“器”。本文会从Eclipse快捷键和实用技巧这两个篇章展开介绍。Eclipse快捷键用熟后,不用鼠标,便可进行编程开发,避免鼠标分了你的神。而掌握了Eclipse的一些实用技巧,则可以大大提高开发效率。
良月柒
2019/03/19
9060
查询oracle视图创建语句及如何向视图中插入数据[通俗易懂]
今天由于要测试接口,需要在数据库中插入一些测试数据。但当我在向数据库插入数据的时候,发现接口查询的是视图并不是表,所以将遇到的问题在这里记录一下。
全栈程序员站长
2022/07/28
4.4K0
查询oracle视图创建语句及如何向视图中插入数据[通俗易懂]
ZBLOG PHP面包屑导航效果调用代码
我们站长肯定比较熟悉ZBLOG博客程序的,当初可谓是中文ASP博客程序中无人能比的轻便型博客CMS,但是随着发展ASP已经逐渐的再被淡忘,大部分用户都开始转型PHP程序。今天再次尝试制作一个ZBLOG PHP博客主题,有些常用的调用代码还是有必要整理在博客中的,以便以后需要用到的时候直接复制。
老蒋
2021/12/24
6150
Tab选项卡切换效果-自动切换
上节我们讲到了tab选项卡的手动切换效果和手动延迟切换效果,在延迟切换效果中,我们使用到了setTimeout函数,这节我们要实现手动自动选项卡的效果。
大M
2021/08/24
5.6K0
Tab选项卡切换效果-自动切换
如何在 Discourse 中配置使用 GitHub 登录和创建用户
本文章用于指导你如何在 Discourse 中配置使用 GitHub 的用户名进行登录。
HoneyMoose
2021/07/16
4K0
如何在 Discourse 中配置使用 GitHub 登录和创建用户
如何使用 AngularJS 创建出色的动画效果?
AngularJS 是一款功能强大的前端 JavaScript 框架,它提供了丰富的功能和工具,使得开发者能够轻松构建交互式的单页面应用程序(SPA)。其中一个重要的特性就是动画。AngularJS 提供了一套强大的动画系统,使得开发者能够创建各种各样的动画效果,以增强用户体验并提高应用程序的吸引力。
网络技术联盟站
2023/07/05
3650
点击加载更多

相似问题

如何创建下拉切换效果

42

如何创建类似于Foursquare的地图效果:

11

如何使用jQuery和切换源图像创建“缩放”效果?

10

如何创建类似于iOS默认警报的警报视图的视觉效果?

13

如何使用jQuery创建div切换效果?

20
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档