jQuery UI的选项卡+对话框+格式选项卡顺序

我有一个形式弹出一个jQuery对话框。表单在对话框中的多个选项卡上分割。我正在研究键盘缓解问题，并希望将一个选项卡的最后一个元素上的Tab键推到下一个选项卡的第一个元素上。现在标签顺序是通过对话框标签，然后通过输入的第一个标签，然后到OK按钮。而不是重量 - >确定，我想它重量 - >价格。是否有捷径可寻？jQuery UI的选项卡+对话框+格式选项卡顺序

的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"); 
       } 
      }]   
     });

来源

2011-09-22 Bob Baddeley

发生这种情况，因为其他形式的输入被隐藏在隐藏选项卡的div，从而跳过了用于互联通。因此，您必须手动聆听按Tab键的人，然后显示其他选项卡。

在 “重量” 输入，结合KEYDOWN。看看你的列表得到的关键。如果有人按下“标签”，选择add_financial href和发送一个“click”事件得到它更改为下一个选项卡，然后选择“价格”输入和重点（）就可以了。

来源

2011-09-22 00:19:55

我怕的就是这个。如果这是最好的，那就是我必须要做的。我希望有一个更优雅的解决方案，比如重新安排html订单或jquery-ui选项卡或对话框中的特殊配置选项。 –

您的方法奏效。我发布了我的工作代码作为答案，因为它不会将其格式化为评论，所以虽然您的答案是正确的，但我添加的代码具有执行此代码的代码。 –

很高兴帮助你。 –

这是没有那么糟糕。为了后代，这是我最终使用的代码。我添加ID来的两个输入，然后接上一个keydown事件，并且如果这是我移动到下一个标签，然后聚焦在第一元件上的标签。

$('#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; 
    } 
});

来源

2011-09-22 02:44:45

jQuery UI的选项卡+对话框+格式选项卡顺序

回答

相关问题