Question

有没有人知道一个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”><option …… </select>
    <select id=”s1b”><option …… </select>
 </div>
 <div class="tab" id="tab2">
  <select id=”s2a”><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中。（将“激活”替换为“创建”，将“newTab”替换为“制表符”）

这样的网址很好，例如：

Example.com/page/#tab2

激活第二个选项卡时，

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

到目前为止，这么好。但是现在我想在网址中存储选择的状态。

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

但我想知道是否有明显的捷径可供选择。

jQueryUI：标签中的菜单选项是否可序列化为URL？

0 个答案: