jqueryui 아코디언 사용 안함 탭에 따라 사용 안함

Question

안녕하세요 저는 처음으로 마법사를 만들려고합니다. 모든 아코디언 탭을 클릭 할 때 링크를 클릭하면 다음 탭을 열고 열 수 있습니다. 나는이 코드를 사용하지만 사용하지 않도록 설정합니다. 모든 탭 :( 감사

$(function() { 
    $("#list1a").accordion({ 
    autoHeight: false, 
    navigation: false 
    }); 
}); 
$("#list1a").accordion("disable"); 
$("#list1a").accordion("activate", 2); 

Answer 1

그것을 위해 아코디언을 사용하지 마십시오, 그것은 마법위한 아니에요 그리고 JQuery와 UI로 사용 가능한 마법사의 구성 요소가 없기 때문에, 우리는 자신의 할 수 있습니다;.)

HTML :

<ul class="ui-wizard"> 
    <li class="ui-wizard-panel"> 
     <h3 class="ui-wizard-header">panel 1</h3> 
     <div class="ui-wizard-content"> 
      Panel content 
      <span class="ui-wizard-next">Goto next</span> 
     </div> 
    </li> 
    <li class="ui-wizard-panel"> 
     <h3 class="ui-wizard-header">panel 1</h3> 
     <div class="ui-wizard-content"> 
      Panel content 
      <span class="ui-wizard-next">Goto next</span> 
     </div> 
    </li> 
</ul> 

자바 스크립트 플러그인 :

$.fn.wizard = function(){ 
    this.find('.ui-wizard-content').hide(); 
    this.find('.ui-wizard-content:first').show(); 
    this.find('.ui-wizard-content:last .ui-wizard-next').hide(); // just in case 
    this.delegate('.ui-wizard-next', 'click', function(){ 
     // very long jquery chain... 
     $(this).closest('.ui-wizard-content') 
      .hide('fast') 
      .closest('.ui-wizard-panel') 
      .next() 
      .find('.ui-wizard-content') 
      .show('fast'); 
    }); 
} 

자바 스크립트 IMPL :

$(".ui-wizard").wizard(); 

당연히 ... 당신이 테마에 거라고 스스로, 복사/붙여 넣기 및 이름 바꾸기 아코디언 스타일은 당신에게 먼 길을 얻을 수 있지만. 더 좋은 방법은 공식 마법사 위젯을 만드는 것입니다.

Answer 2

다음 코드를 체크 아웃 할 수도 있습니다. http://github.com/desdev/jWizard/ 정확히 무엇이 필요한지 생각해보십시오.

Answer 3

시도 UI 상태 장애인 클래스 : http://api.jqueryui.com/theming/css-framework/ 사용자가 돌아갈 수 있도록이 코드 조각을 고려하지만, 다음 아코디언 탭으로 이동하지 :

function disableAccordionNextTabs() { 
    var $accordion = $(".accordion"); 
    var active  = $accordion.accordion('option', 'active'); 
    var $headers = $accordion.find($accordion.accordion('option', 'header')); 

    $headers.addClass('ui-state-disabled'); 
    for (var i = active; i >= 0; i--) { 
     $headers.eq(i).removeClass('ui-state-disabled'); 
    } 
}