1

有谁知道 jQueryUI 机制，它将 UI 的当前“状态”保存到 url，并可以从 url 重现该状态？

我在选项卡中有菜单，如下所示。（使用 jQuery UI 选项卡）。

<div class="tabsx"> 
 <ul> 
  <li><a href="#tab1">First Tab</a></li> 
  <li><a href="#tab2">Second Tab</a></li> 
 </ul> 
 <div class="tab" id="tab1">
    <select id=”s1a”&gt;<option …… </select>
    <select id=”s1b”&gt;<option …… </select>
 </div>
 <div class="tab" id="tab2">
  <select id=”s2a”&gt;<option …… </select>
 </div>
</div>

如果我在一个选项卡中进行选择，单击到另一个选项卡，然后返回到前一个选项卡，则选择已被保留，当然。

但我想要的是让显示页面的每个可能的“状态”都可以通过 URL 引用。所以我希望将浏览器 URL 更改为：

Example.com/page/?s1a=foo&s2a=bar#tab1

当我查看选项卡 1 时，第一个菜单位于选项 'foo' 上，第二个菜单位于选项 'bar' 上。

而且，如果这个 URL 被输入到浏览器中，我希望 jQuery 显示相同的显示状态。

我已经为“激活”事件添加了一个功能，以便在单击每个选项卡时更改 URL。

$( ".tabsx" ).tabs({
      activate: function( event, ui ) {
        tab_href= ui.newTab.find('a').attr('href');
        window.history.pushState(null,null,tab_href);
      }
    });

我为“create”事件添加了一个类似的处理程序，以便在页面加载时，将默认选项卡的哈希放入 url。（将“activate”替换为“create”，将“newTab”替换为“tab”）

这在 URL 中可以正常工作，例如：

Example.com/page/#tab2

激活第二个选项卡时，会出现在浏览器的 url 字段中。它可以加入书签，调用时，jQuery 将显示打开的第二个选项卡（标准行为）。

到目前为止，一切都很好。但现在我也想将选择的状态存储在 url 中。

我开始编码（解析查询参数、搜索选项列表等）。

但我想知道是否有一些明显的捷径可用。

4

0 回答 0