2013-01-04 32 views
1

我正在使用jQuery UI 1.9,并且我已经在演示页面上详细实现了标签小部件。 PHP在标签内动态提供数据。保存jQuery UI标签的状态

<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中已经被弃用,所以我不确定是否有办法做到这一点了?

感谢

+1

实施您自己的cookie解决方案,或创建一个名为“client_tab_index”的会话项并引用它。 –

回答

0

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

$(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> 

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

1

似乎像jQuery UI摆脱了维护状态与最新的实施。

之前,使用jQuery选项卡保持页面加载状态非常简单。这是用新代码实现的一种可能方式。它仍然非常容易,只是有点不同。

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

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

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