jQuery UI 탭의 상태 저장

Question

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> 

제 질문은 - 어떻게 탭 상태를 저장할 수 있습니까? 따라서 한 클라이언트를보고 '개인'탭을 열면 어떻게 다음 클라이언트를로드하고 자동으로 같은 탭을 표시 할 수 있습니까?

나는 웹을 둘러 보았고 이전의 대답은 쿠키 옵션 사용을 가리킨다. 실패한 테스트 및 일부 추가 연구에 따르면이 기능은 1.9에서 더 이상 사용되지 않으므로이 작업을 수행 할 수있는 방법이 있는지 확실하지 않습니다.

감사

Answer 1

여기

내가 세션 추적 변수를 구현하는 것이 방법이 ......

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

난 그냥 가능한 솔루션에 대한 몇 가지 논리를 제공하고 있습니다. 그것은 당신을 시작하는 데 도움이됩니다.

Answer 2

jQuery UI는 최신 구현으로 상태를 유지하는 것처럼 보입니다.

이전에는 jQuery 탭으로 페이지로드시 상태를 유지하는 것이 매우 간단합니다. 이것이 새로운 코드로 할 수있는 한 가지 방법입니다. 그것도 여전히 꽤 쉽고, 조금 다릅니다.

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

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

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