위젯 내에서 확장 jQuery 탭 위젯의 활성 탭 설정

Question

위젯 외부에서 활성 탭을 프로그래밍 방식으로 설정하는 방법에 대한 몇 가지 예를 살펴 보았습니다. 그러나 탭 위젯을 확장 했으므로 프로그래밍 방식으로 활성 탭을 에서 위젯으로 설정할 수 없습니다. 테스트 할 수있는 작은 테스트 케이스를 만들었습니다.

자바 스크립트 :

$(document).ready(function(){ 
    $.widget("custom.extendedTabs", $.ui.tabs, { 
     _create: function() { 
      var self=this; 
      this.element.mouseover(function(){ 
       console.log(self.options.active); 
       self.options.active=3; 
       console.log(self.options.active); 
      }); 
      return this._super(); 
     } 
    }); 

    $(".tabs").each(function(){ 
     $(this).extendedTabs("option","active",1); 
    }); 
}); 

HTML :

<div id="tabs1" class="tabs"> 
    <ul> 
    <li><a href="#tabs1_1">HEY1!</a></li> 
    <li><a href="#tabs1_2">HEY2!</a></li> 
    <li><a href="#tabs1_3">HEY3!</a></li> 
    <li><a href="#tabs1_4">HEY4!</a></li> 
    </ul> 
    <div id="tabs1_1"> 
    <p>Content 1</p> 
    </div> 
    <div id="tabs1_2"> 
    <p>Content 2</p> 
    </div> 
    <div id="tabs1_3"> 
    <p>Content 3</p> 
    </div> 
    <div id="tabs1_4"> 
    <p>Content 4</p> 
    </div> 
</div> 

목표 :

자동으로 4 일에 활성 탭을 설정하려면 마우스 오버에 (인덱스 3) 탭 위젯의

문제 :이 데모에서

은 "활성"옵션이 성공적으로 바로 초기화 후 (인덱스 1)를 설정하고 예상대로 포커스가 2 탭으로 이동하고있다. 그러나 마우스를 사용하면 활성 옵션이 로깅에 의해 확인 된대로 3으로 성공적으로 설정되어 있어도 탭이 예상대로 4 번째 탭으로 이동하지 않습니다.

내가 원하는 탭의 click() 메서드를 사용하여 간단히 해결 방법을 발견했습니다. 그러나 꼭 필요한 것은 아닙니다.이 기능은 위젯 내에서 직접 작동해야합니다. 나는 방금 뭔가를 놓친다. 다른 옵션은 위젯 내에서 잘 작동합니다. 예를 들어 마우스 오버시 self.options.collapsible=true으로 전화를 걸면 예상대로 변경 내용이 적용됩니다.

아이디어가 있으십니까?

Answer 1

해결책을 찾았습니다!

확장 된 위젯 내에서 _setOptions()를 호출 할 수 있습니다.

나를 위해, 특정 코드는 다음과 같습니다

this._setOption("active",this.element.find(">ul>li").length-1); 

그러나, 일반적으로 용액이된다

this._setOption("active", <zero-based index of tab to activate>);