jQuery同位素，首先使用深度链接进行排序

Question

日安，

参考此jsfiddle demo，客户端需要将深度链接功能添加到现有代码中。

我尝试了使用"Hash histroy with jQuery BBQ“的同位素内置功能，但它不是客户想要的，原因是：

(1)他们希望显示的URL在斜杠"/“而不是散列"#”上运行。

(2)在过滤器按钮上应用同位素jQuery烧烤示例，而不是特定的同位素"itemSelector“。

这就是客户要找的东西

(a)使用特定的深度链接$this.addClass('selected');，浏览器将加载特定项目被选中的页面

(b)通过单击其他项目，地址栏中的itemSelector: '.item', url将在不刷新页面的情况下更改

抱歉，我的表达能力不足，为了更好地理解，请参考www.jwt.com。我不能对整个网站进行反向工程，因此jQuery同位素作为我的方法。

我在想当同位素itemSelector被点击的时候会添加一些代码，

$items.click(function () {
  var $this = $(this);
  // don't proceed if already selected
  var $previousSelected = $('.selected');
  if (!$this.hasClass('selected')) {
    $this.addClass('selected');
  }

  $previousSelected.removeClass('selected');

  // update sortData for new items size
  $container.isotope('updateSortData', $this)
    .isotope('updateSortData', $previousSelected)
    .isotope();

});

首先要感谢大家！

Answer 1

你要找的是HTML5 History API。这使您可以修改显示在URL栏中的内容，而无需重新加载页面。你会想要使用一个库，例如History.js，而不是直接使用API。

Answer 2

(1)他们希望显示的URL在斜杠"/“而不是散列"#”上运行。

我真的建议不要在单个页面响应中使用"/“作为菜单导航命令。"/“是表示URI分层结构的保留(ascii 2F)字符。在html spec中使用的时间可以追溯到您想要的最早时间。为你的影响而翻译，every client browser, web crawler made since 1994 may behave weirdly on a customized use of the "/"

我只想让你在使用"/“的时候做出明智的决定。这可能会产生意想不到的后果。我建议选择任何不会重复使用URI保留字符的内容。

话虽如此，但这是可以做到的。

1. 如果你必须使用斜杠，那么你必须在你的URL服务器中使用“通配符URL”映射支持。http://your.domain.com/base/url/** -->一些页面(层次定义到此为止，文档片段开始使用网址)
2. 像jwt网站一样，使用cookie来存储用户的点击偏好，因为你将会把你的网址分开来满足客户的点击需要，或者同位素更新事件来保持cookie是最新的
3. 阻止bbq filtering出现在URL中，并将其更改为用户所要求的"/“。
4. 在页面加载时读取您的cookie，并使用必要的选项启动isotope，使页面看起来与他们上次访问时一样。