Jquery UIタブ+ダイアログ+フォームタブオーダー

Question

フォームをポップアップ表示するjqueryダイアログがあります。フォームは、ダイアログ内の複数のタブに分割されます。私はキーボードの操作が簡単で、タブの最後の要素にタブキーを押して、次のタブの最初の要素に移動させたいと思っています。今すぐタブの順序は、ダイアログのタブを介して入力の最初のタブを介して、次に[OK]ボタンに行くことです。重量 - > OKの代わりに私はそれが重量 - >価格に行きたい。これを行う簡単な方法はありますか？

HTML：

<div id='add_dialog' title='Add'> 
    <form id="add_form" method="POST"> 
     <input type="hidden" name="action" value="add"> 
     <input type="hidden" name="ProductId" value="2"> 
     <div id="jquery-ui-tabs"> 
      <ul> 
       <li><a href="#add_details">Details</a></li> 
       <li><a href="#add_financial">Financial & Comments</a></li> 
      </ul> 

      <div id="add_details">     
       Quantity: <input type="text" name="Quantity" value="1"><br /> 
       QuantityPerPack: <input type="text" name="QuantityPerPack" value="0"><br /> 
       Pc Weight: <input type="text" name="PieceWeight" value=" "><br /> 
      </div> 
      <div id="add_financial"> 
       Price: <input type="text" name="PriceHigh" value="0.00"><br /> 
       Comment: <textarea name="StockComment"></textarea><br /> 
      </div> 
     </div> 
    </form> 
</div> 

そして、初期化のjavascript：

$('#add_dialog').dialog(
     { 
      autoOpen: false, 
      maxHeight: 500, 
      width: 600, 
      minWidth: 600, 
      zIndex: 99999, 
      position: ['center', 50], 
      buttons:[{ 
       text: "Ok", 
       class: "dialog_ok", 
       click: function() { 
       $(this).dialog("close"); 
        $("#add_form").submit(); 
        } 
       }, 
       { 
       text: "Cancel", 
       class: "dialog_cancel", 
       click: function() { 
        $(this).dialog("close"); 
       } 
      }]   
     }); 

Answer 1

これは、他のフォームの入力が隠されたタブのdivの中に隠されているので起こって、ひいてはてタブ移動のためにスキップされます。だからあなたは手動で誰かがタブを押しているのを聞いてから、他のタブを表示しなければなりません。

"weight"入力で、keydownにバインドします。あなたのリスターが来たときに彼らが押した鍵を見てください。誰かが「タブ」を押した場合、add_financial hrefを選択して「クリック」イベントを送信して次のタブに変更し、「価格」入力とフォーカス（）を選択します。

Answer 2

それほど悪くありませんでした。後世のために、私が最終的に使用したコードはここにあります。 2つの入力にIDを追加した後、キーダウンイベントをアタッチし、タブの場合は次のタブに移動して最初の要素にフォーカスします。

$('#add_form_pieceweight').keydown(function(e) { 
    var code = e.keyCode || e.which; 
    if (code == '9') { 
     $('#jquery-ui-tabs').tabs('select',1); 
     $('#add_form_price').focus(); 
     return false; 
    } 
});