2

こんにちは、私は Web アプリケーションに取り組んでいますが、クローン作成の問題で立ち往生しています。基本的に、ユーザーがチェックボックスを選択するたびに、タブが表示されます。ユーザーは、ドロップダウン ボックス、検索ボックス、および追加ボタンを使用して、このタブにあるテーブルに詳細を追加できます。

ユーザーが別のチェックボックスを選択すると、空白のテーブルを含む新しいタブが前のタブの隣に表示されます。ユーザーが、前に選択したタブからコピーするか、空白で開始するかを選択できるようにしたいと考えています。

空白を開始するのは簡単なように思えますが、タブに表示されるリンクを追加しました。クリックすると、リンクは非表示になり、タブは空白のテーブルで思い出させます。

$(document).ready(function(){
    $("#tabs").tabs();

    $(".selectedCodeCheckbox").change(function(){
        if ($(this).is(':checked')) {

            // show tab         
            $("#tabs").find(".tabheader-"+$(this).val()).css('display', 'block');
            $("#tabs").find(".tabpanel-"+$(this).val()).css('display', 'block');
            $("#tabs").tabs( "select" , $("#tabs").find(".tabpanel-"+$(this).val()).attr('id'));
            $(".step2").css('display', 'block');
        } else {
            // remove tab
            $("#tabs").find(".tabheader-"+$(this).val()).css('display', 'none');
            $("#tabs").find(".tabpanel-"+$(this).val()).css('display', 'none');
        }
    });

これにより、チェックボックスが選択された後にタブが表示されます。

<div style="width: 600px; float: left; margin-left: 30px; margin-top: 10px;">
                    <table id="clubListTable_${instanceEntry.key}" class="reports" style="width: 100%;">
                        <thead>
                            <tr>
                                <th>Unit Type</th>
                                <th>Unit Name</th>
                                <th><spring:message code="generic.male" text="Male" /></th>
                                <th><spring:message code="generic.female" text="Female" /></th>
                                <th>
                                    <spring:message code="generic.remove" text="Remove" />
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="emptyRow">
                                <td colspan="5">No Units Added</td>
                            </tr>
                        </tbody>
                        </table>

                </div>

これは、複製したいタブのテーブルです。各タブは、同じ から動的に作成されます <div id="tabs"。

タブの配置順序はアルファベット順です。チェックボックスは 6 つしかないため、タブは 1 ～ 6 個しかありません。

また、可能であれば、それが最初に選択されたチェックボックスである場合、ユーザーにオプションを提供できない方法を誰かが説明することもできます。また、ユーザーが複数のチェックボックスを選択して複数のタブを生成することはできません。

4

1 に答える 1

0

ここでサンプルを作成しました: http://jsbin.com/welcome/50444/ おそらく例が役に立ちます

<div id="tabs" style="height:300px;">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li id="tab3"><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">content 1</div>
    <div id="tabs-2">content 2</div>
    <div id="tabs-3">content 3</div>
</div>


<script>
  $(function() {
      $("#tabs").tabs();   
  }); 

  function cloneLast(){
    var lastDiv = $('#tabs div:last-child');
    var lastLi = $('#tabs').find('li').last().find('a');   
    $("#tabs").tabs('add','#newTab',lastLi.html());
    $('#newTab').html(lastDiv.html());
  }
</script>  
<a href="#" onclick="if($('#tab3').is(':visible')) $('#tab3').hide(); else $('#tab3').show();">toggle visibility</a>  

<a href="#" onclick="cloneLast()">clone last</a>
于 2012-11-18T16:04:06.060 に答える