1

ページ内のリンクをクリックすると、jqueryダイアログボックスが開き（まだ開いていない場合）、その中にjqueryuiタブが追加されます。ここから次の例

しかし、jqueryダイアログを閉じて再度開くと、以前に開いていたタブが表示されます。ダイアログを閉じて再度開くときに、jqueryダイアログ内にタブを配置しないようにし、ダイアログ内に新しいタブを追加できるようにします。

これは私のjqueryドキュメントの準備ができているコードです：

<script type="text/javascript">
var tab_counter = 1;

$(document).ready(function() {
var $tabs_example_1 = $('#example_1').tabs();

$('#addUiTab').click(function(){
        var label = 'Tab'+tab_counter,
        content = '<span id="tab">This is a sample tab content</span>';

        $('body').append('<div id="tab_'+tab_counter+'">'+content+'</div>');
        $tabs_example_1.tabs('add','#tab_'+tab_counter,label);
        tab_counter++;

        return false;
    });
});
</script>

これは、ダイアログボックスを開き（まだ開いていない場合）、ページ内のリンクをクリックすると、その中にタブを追加する関数です。

function open_dialog()
{
    if(($("#jdialog_box_content").dialog( "isOpen" ) === true) == false)
    {
        $('#jdialog_box_content').dialog({
        open: function(event, ui) {  },
        close: function(event, ui) {  },
        autoResize: false,
        width: 460,
        height: 230,
        closeOnEscape: false,
        title: 'Dialog1'
        });
    }

    $('#addUiTab').trigger("click");
}

そして最後に、これはjqueryダイアログボックス内のjqueryタブに使用されるhtmlです。

<div id="jdialog_box_content" style="display:none;">    
    <div id="example_1" class="tabs">
        <ul>
            <li><a href="#tabs-1-2">Tab 1</a></li>
            <li><a href="#tabs-2-2">This is tab 2</a></li>
            <li><a href="#tabs-3-2">This is tab number 3</a></li>           
        </ul>
        <div id="tabs-1-2">Tab 1<br>Lorem ipsum dolor sit amet</div>
        <div id="tabs-2-2">This is tab 2<br>Lorem ipsum dolor sit amet</div>
        <div id="tabs-3-2">This is tab 3<br>Lorem ipsum dolor sit amet</div>
    </div>
</div>

jqueryダイアログボックスを再度開いたときに、既存のタブを削除する方法を知りたいだけです。

注：このサイトのjqueryuiタブの例に従っています。

4

2 に答える 2

5

close: function(event, ui) { $("#jdialog_box_content").html(""); }ダイアログ宣言で必要です。空のダイアログが必要なく、タブがない場合は、次の方法で行うことができます。

$('#jdialog_box_content').dialog({
        open: function(event, ui) {  },
        close: function(event, ui) {
            var $tabs = $('#example_1');
            var l = $tabs.tabs('length');
            while(l)
            {
               $tabs.tabs('remove', l-1);                       
               l = $tabs.tabs('length');
            }

        },
        autoResize: false,
        width: 460,
        height: 230,
        closeOnEscape: false,
        title: 'Dialog1'
        });
于 2012-05-23T06:56:06.393 に答える
0

おかげで、jqueryダイアログのcloseイベントの下でforループコードを使用して、開いているすべてのタブを閉じることもできます。

close: function(event, ui) 
{ 
    for (var i = $('#example_1').tabs('length') - 1; i >= 0; i--) {
    $('#example_1').tabs('remove', i);                  
    }
}
于 2012-05-23T09:41:30.847 に答える