jQuery UI的选项卡中保存状态(Saving state of jQuery UI tabs)

2019-10-17 13:16发布

我使用jQuery UI 1.9,我已经实现了标签窗口小部件几乎演示页上详述。 PHP提供动态的选项卡中的数据。

<script>

$(function()
    {
        $( "#tabs" ).tabs(
            {
                collapsible: true                   
            });
    });

</script>

<div id="tabs">

    <ul>
        <li><a href="#holdings">Holdings</a></li>
        <li><a href="#personal">Personal</a></li>
        <li><a href="#account">Account</a></li>
    </ul>

    <div id="holdings">
        blah blah blah
    </div>

    <div id="personal">
        blah blah blah
    </div>

    <div id="account">
        blah blah blah
    </div>

</div>

我的问题是 - 我怎么可以保存选项卡的状态? 所以,如果我在看一个客户端,我打开“个性化”选项卡,我怎么能装载下个客户端,并自动显示同一标签?

我看各地的网络,和以前的答案指向使用cookie的选项。 未通过测试和一些进一步的研究表明,这种功能是在1.9过时,所以我不知道是否有甚至办法做到这一点了吗?

谢谢

Answer 1:

好像jQuery UI的摆脱了符合最新执行保持状态。

之前,它很简单,以保持整个页面加载状态jQuery的标签。 这是一种可能的方式与新的代码来做到这一点。 它还是很容易的,只是有点不同。

$("#tabs").tabs({
    activate: function (e, ui) { 

    $.cookie('selected-tab', ui.newTab.index(), { path: '/' }); 

}, 
   active: $.cookie('selected-tab')  
});


Answer 2:

这是我将如何实现会话跟踪变量......

$(function()
    {
        $( "#tabs" ).tabs(
            {
               **create: function( event, ui ) {
                    //use the create method to see if a 'client-tab-index' session 
                    //variable is set.  if so, use it to open the needed tab. if not
                    // do nothing.
                },**
                collapsible: true  ,
                **activate: function( event, ui ) {
                      //use the activate method to store the current active tab
                      //to a 'client-tab-index' session variable.  the current tab 
                      //index value is referenced with ui.newTab
                }**
            });
    });

</script>

<div id="tabs">

    <ul>
        <li><a href="#holdings">Holdings</a></li>
        <li><a href="#personal">Personal</a></li>
        <li><a href="#account">Account</a></li>
    </ul>

    <div id="holdings">
        blah blah blah
    </div>

    <div id="personal">
        blah blah blah
    </div>

    <div id="account">
        blah blah blah
    </div>

</div>

我只是提供一些逻辑的可能解决方案。 它应该帮助您开始。



文章来源: Saving state of jQuery UI tabs