jquery-ui - 各タブのjquery uiタブ関数

Question

jquery UI タブの各インデックスに関数をバインドするにはどうすればよいですか?

たとえば、3 部構成のスライド サインアップを作成しています。ステップ 1 はフォームであり、検証があります。そのためのコードをステップ 1 のロード内に配置し、タブにクラスを追加して #2 と #3 を無効にします。 1 のときは #1 を無効にし、#2 のときは #3 を無効にします

Answer 1

関数をタブにバインドする必要はありません。プラグインに組み込まれています。

プラグインページから：

$('#tabs').tabs({
   select: function(event, ui) { ... }
});

関数内で、現在のタブを特定し、そこから必要なことを実行できます。

• 現在のタブ インデックスを取得する

  currentTabIndex = $('#tabs').tabs('option', 'selected')
  

• 現在のタブ コンテンツ ID を (href から) 取得します。もっと簡単な方法があるかもしれませんが、まだ見つかりません。

  currentTabContent = $( $('.ui-tabs-selected').find('a').attr('href') );
  

しかし、使用しようとしているこのタブ/フォーム システムについて投稿した他の質問を見て、ここにデモをまとめました。

HTML

<div id="tabs">
 <ul class="nav"> <!-- this part is used to create the tabs for each div using jquery -->
  <li class="ui-tabs-selected"><a href="#part-1"><span>One</span></a></li>
  <li><a href="#part-2"><span>Two</span></a></li>
  <li><a href="#part-3"><span>Three</span></a></li>
 </ul>

 <div id="part-1">
  <form name="myForm" method="post" action="" id="myForm">
   <div class="error"></div>
    Part 1
    <br /><input type="checkbox" /> #1 Check me!
    <br />
    <br /><input id="submitForm" type="button" disabled="disabled" value="next >>" />
  </form>
 </div>

 <div id="part-2">
  <div class="error"></div>
   Part 2
   <br />Search <input type="text" />
   <br />
   <br /><input id="donePart2" type="button" value="next >>" />
 </div>

 <div id="part-3">
  <div class="error"></div>
   Part 3:
   <br />Some other info here
 </div>
</div>

脚本

$(document).ready(function(){
 // enable Next button when form validates
 $('#myForm').change(function(){
  if (validate()) {
   $('#submitForm').attr('disabled','')
  } else {
   $('#submitForm').attr('disabled','disabled')
  }
 })
 // enable form next button
 $('#submitForm').click(function(){
    // enable the disabled tab before you can switch to it, switch, then disable the others.
  if (validate()) nxtTab(1,2);
 })
 // enable part2 next button
 $('#donePart2').click(function(){
    var okForNext = true; // do whatever checks, return true 
  if (okForNext)  nxtTab(2,1);
 })
 // Enable tabs
 $('#tabs').tabs({ disabled: [1,2], 'selected' : 0 });
})
function validate(){
 if ($('#myForm').find(':checkbox').is(':checked')) return true;
 return false;
}
function nxtTab(n,o){
 // n = next tab, o = other disabled tab (this only works for 3 total tabs)
 $('#tabs').data('disabled.tabs',[]).tabs( 'select',n ).data('disabled.tabs',[0,o]);
}