2

我有两个按钮弹出相同的模态窗口，但在模态窗口中显示不同的选项卡。每个选项卡中都有一个带有多个输入的表单。我的问题是Focus()在模态框内的两个选项卡中的任何一个中获取第一个表单输入。

这是我到目前为止所拥有的（我省略了一些不必要的代码）：

咖啡脚本：

# Triggers when a modal tab is shown
$ ->
  $('a[data-toggle="tab"]').bind 'shown', (event) =>
    $(this).closest('input').focus()

    # Further info:
    # event.target = activated tab. alert event.target returns 'http://localhost:3000/#tab-1'
    # event.relatedTarget = previous tab. alert event.target returns 'http://localhost:3000/#tab-2'

HTML：

<a href="#modal" id="tab-1-btn">Tab 1 Button</a>
<a href="#modal" id="tab-2-btn">Tab 2 Button</a>

<div class="modal" id="myModal">

  <div class="modal-body">

    <ul class="nav nav-tabs" id="tabs">
      <li class="active"><a href="#home">Home</a></li>
      <li><a href="#profile">Profile</a></li>
    </ul>

    <div class="tab-content" id="tabs">

      <div id="tab-1" class="tab-pane">
        <form id="tab-1-form">
          <input name="tab-1-input" />
        </form>
      </div>

      <div id="tab-2" class="tab-pane">
        <form id="tab-2-form">
          <input name="tab-2-input" />
        </form>
      </div>

    </div>

  </div>
</div>

参考：

我也对 jQuery 或 Javascript 解决方案持开放态度，如有必要，我会自己将它们转换为 CoffeeScript。

任何帮助将不胜感激，谢谢。

4

2 回答 2

3

这是你描述的一个有趣的问题；这是解决该问题的一种尝试，它似乎正在工作，至少在 chrome 中是这样。

http://jsfiddle.net/CqACQ/3/

HTML

<a class="btn" id="home-btn" data-toggle="modal" href="#myModal" >Tab 1 Button</a>
<a class="btn" id="profile-btn" data-toggle="modal" href="#myModal" >Tab 2 Button</a>

    <div class="modal hide" id="myModal">
      <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>
        <h3>A yodel for a Modal</h3>
      </div>
      <div class="modal-body">
        <ul class="nav nav-tabs" id="main-tabs">
          <li class="li-home"><a href="#home" data-toggle="tab">Home</a></li>
          <li class="li-profile"><a href="#profile" data-toggle="tab">Profile</a></li>
        </ul>

        <div class="tab-content" id="tabs">

          <div id="home" class="tab-pane">
            <form id="tab-1-form">
                <label>Home sweet home:</label>
              <input name="home-input" id="home-input" type="text" class="input-medium" />
            </form>
          </div>

          <div id="profile" class="tab-pane">
            <form id="tab-2-form">
                <label>Profile: who are you?:</label>
              <input name="profile-input" id="profile-input" type="text" class="input-medium" />
            </form>
          </div>

        </div>

      </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
      </div>
    </div>​

Javascript（利用 twitter bootstrap 的事件和 jQuery）

$('#myModal').on('show', function () {
// http://stackoverflow.com/questions/48239/getting-the-id-of-the-element-that-fired-an-event-using-jquery    
    // are we working with "home" or with "profile"? 
    var theButtonCaller = event.target.id; 
        theButtonCaller = theButtonCaller.replace("-btn", ""); 

    $(".tab-pane, #main-tabs li").removeClass("active"); 
    $("#" + theButtonCaller).addClass("active");
    $("#main-tabs li.li-" + theButtonCaller).addClass("active"); 
});

$('#myModal').on('shown', function () {
    var theButtonCaller = event.target.id; 
        theButtonCaller = theButtonCaller.replace("-btn", ""); 
    $("#" + theButtonCaller + "-input").focus(); 
});

$('a[data-toggle="tab"]').on('shown', function (e) {
  // console.log( e.target ); // activated tab
    var inputToFocus = $(e.target).attr("href");
        inputToFocus = inputToFocus.replace("#", "");
        $("#" + inputToFocus + "-input").focus();
});
于 2012-05-28T06:08:37.543 回答
2

以下是我最终的 CoffeeScript 解决方案，感谢mg1075的上述帮助：

# Global variable to store tab info
inputTarget = ""

# Toggle login & sign up forms and focus cursor to top input on each
$ ->
  $('#tab-1-btn').click ->
    $('#tabs a[href="#tab-1"]').tab('show')
    inputTarget = "input#tab-1-input"

$ ->
  $('#tab-2-btn').click ->
    $('#tabs a[href="#tab-2"]').tab('show')
    inputTarget = "input#tab-2-input"

# Focus on top input when tab changed
$ ->
  $('a[data-toggle="tab"]').bind 'shown', (event) =>
    currentTabClass = event.target.className + "input" # = tab-1-input
    $("input#" + currentTabInputID).focus()

# Focus on top input when modal is shown
$ ->
  $('#myModal').bind 'shown', (event) =>
    $(inputTarget).focus()
于 2012-06-06T08:23:47.113 回答