2

同じモーダル ウィンドウをポップアップする 2 つのボタンがありますが、モーダル ウィンドウ内に別のタブを表示します。各タブには、多数の入力があるフォームがあります。私の問題はFocus()、モーダル内の 2 つのタブのいずれかで最初のフォーム入力を取得することです。

これは私がこれまでに持っているものです（不要なコードをいくつか省略しています）：

コーヒースクリプト:

# 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

あなたが説明したのは興味深い問題です。これは、この問題に対処するための 1 つの試みであり、少なくとも 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 ブートストラップのイベントと 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

以下は、上記のヘルプを提供してくれたmg1075のおかげで、私の最終的な CoffeeScript ソリューションです。

# 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 に答える