如何实现类似Facebook的面包屑导航？

Question

我正在尝试创建一个使用bread-crumbing的Ajax Web应用程序，允许使用Back and Forward Buttons，但仍然有那个光滑的ajax页面移动。

一个很好的例子是Facebook的图片库。

当您点击“下一步”时，网址会更改为相应的网址，但整个网页不会更新。这是一个非常流畅的界面，我想模仿它。

任何人都有关于这如何运作的教程/写作？

感谢。

Answer 1

Facebook使用URL-Anchor-Identifier来存储其AJAX代码所需的代码。这允许在不重新加载网站的情况下更改URL。

示例：http://somedomain.com/#ajax_data_here

现在，您可以为ajax数据编写智能格式并解析该数据。

<小时/> 2012年12月更新：

我最近遇到了以下方法，用于在不重新加载的情况下更改URL中的路径。虽然它只适用于较新的浏览器，但我认为我会附加它：

• Modify the URL without reloading the page

Answer 2

据我所知，有两种主要方法可以实现这种效果：

1. 使用网址的锚点部分（#gallery）
2. 使用隐藏的iframe

您可以使用预先构建的解决方案来利用此类功能，而无需编写代码。例如，如果您正在使用asp.net，那么您可以使用Ajax历史记录控件：

• http://www.asp.net/ajax/videos/how-do-i-use-the-aspnet-ajax-history-control

Answer 3

如果您使用的是JQuery，请查看Address插件。

http://www.asual.com/jquery/address/

Answer 4

如果你正在使用jQuery，那么这里有很多建议：https://stackoverflow.com/questions/116446/what-is-the-best-back-button-jquery-plugin

我个人使用过jQuery Address，它非常简单且非常有效。