1

私はJQueryを初めて使用し、タブが動的に追加され、そのコンテンツがAjaxを介してロードされるタブ付きインターフェースを実装しようとしています。JQuery-ui タブを使用しています。私は何日もこの問題を解決しようとしてきました. 現在、タブを 1 つだけ追加すると、インターフェイスは機能します。タブが作成され、選択され、そのコンテンツが Ajax を介して読み込まれます。ただし、2 番目のタブを追加すると、そのコンテンツは適切に読み込まれているように見えますが、最初のタブを選択すると、2 番目のタブの内容が最初のタブの内容に追加されて表示され、切り替えることができなくなります。タブ。

私は Rails 3 に取り組んでいます。コードは Coffeescript で書かれていますが、Javascript を使う人にとっては読みやすいはずです。以下にいくつかの注意事項を示します。

  • $('a.edit')タブを追加するセレクターです。複数回の起動を避けるために、マウス クリックでタブの追加を入札する前に、まずセレクターが既にバインドされているかどうかを確認します。
  • タブのクローズはうまく機能します
  • URL とタブ名は属性として渡されます。URL は html フォームを指します (Rails のパーシャルを介して)
  • 生成された html でタブを追加すると、「ui-tabs-1」と「ui-tabs-2」という ID を持つ 2 つの ui-tab-panel が作成されます。タブには、秒を指す href があります。最初のみ「.ui-tabs-hide」があります。
    • 2 番目のタブを追加すると、「ui-tabs-2」と「ui-tabs-4」を指すタブを持つ 4 つの ui-tab-panel が作成されますが、「.ui-tabs-隠れる"。

ここにコードがあります

$(->
        if !($('a.edit').is('.bound'))
            $('a.edit').on('click', ->
                addTab($(this).attr('url'), $(this).attr('tag'))  
            )
            $('a.edit').addClass('bound')
        $tabs = $('#tabs').tabs
        #$tabs.tabs
            closable: true
            cache: true
            tabTemplate: '<li><a href="#{href}">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>'
            add: (event, ui) ->
                $tabs.tabs('select', '#' + ui.panel.id)

        addTab = (url, tab_name)->
            $tabs.tabs('add',url,tab_name)

        $( "#tabs span.ui-icon-close" ).live(
            "click", ->
                index = $( "li", $tabs ).index( $( this ).parent() )
                $tabs.tabs( "remove", index )
)
4

1 に答える 1

0

この問題を解決するために、いくつかの小さな変更を導入しました。$tabs = $('#tabs')主なものは、タブへのすべての参照とメソッド呼び出しがセレクター自体を参照するように行を追加することでした。理由はわかりませんが、以前は$tabs = $('#tabs').tabs( ... ). $('a.edit')もう 1 つの変更は、セレクターが動的に追加された場合に必要な変更でした。ページが最初に読み込まれたときにセレクターが存在しない可能性があるため、バインドを から.on('click,-> )に.live('click', ->)変更し、フラグを変更して、新しい '.bounded' クラスを #tabs に追加して、複数回の起動を防止しました。

$(-> 
    $tabs = $('#tabs')

    if !($tabs.is('.bound')) 
        $('a.edit').live('click', -> 
            addTab($(this).attr('url'), $(this).attr('tag'))   
        ) 
        $tabs.addClass('bound') 

    $tabs.tabs 
        closable: true 
        cache: true 
        tabTemplate: '<li><a href="#{href}">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>' 
        add: (event, ui) -> 
            $tabs.tabs('select', '#' + ui.panel.id) 

    addTab = (url, tab_name)-> 
        $tabs.tabs('add',url,tab_name) 

    $( "#tabs span.ui-icon-close" ).live( 
        "click", -> 
            index = $( "li", $tabs ).index( $( this ).parent() ) 
            $tabs.tabs( "remove", index ) 
)
于 2012-05-24T22:21:12.733 に答える