1

jquery (および ASP.NET MVC3 Razor エンジン) を使用した簡単なタブ設定があります。
html は次のとおりです。

<ul id="tabul">
    <li id="litab" class="ntabs add"><a href="" id="addtab">+</a></li>
    <li id="hometab" class="ntabs">Home</li>
    <li id="componentstab" class="ntabs">Components</li>
    <li id="documentstab" class="ntabs">Documents</li>
    <li id="userstab" class="ntabs">Users</li>
</ul>
<div id="tabcontent">
    <div id="hometabcontent" class="tabcontainer">
        @{
            Html.RenderPartial("GetTest1Tab");
        }
    </div>
    <div id="componentstabcontent" class="tabcontainer" style="display: none;">
        @{
            Html.RenderPartial("GetTest2Tab");
        }
    </div>
    <div id="documentstabcontent" style="display: none;" class="tabcontainer">
        @{
            Html.RenderPartial("GetTest3Tab");
        }    
    </div>
    <div id="userstabcontent" style="display: none;" class="tabcontainer">
        @{
            Html.RenderPartial("GetTest4Tab");
        }
    </div>
</div>

そしてここにJQueryがあります：

        $(function () {
            var total_tabs = 0;

            $("#tabcontent .tabcontainer").hide();
            $("#hometabcontent").fadeIn('slow');

            $("#addtab, #litab").click(function () {
                total_tabs++;
                $("#tabcontent .tabcontainer").hide();
                addtab(total_tabs);
                return false;
            });
            $("#hometab").click(function () {
                $("#tabul li").removeClass("ctab");
                $("#hometab").addClass("ctab");
                $("#tabcontent .tabcontainer").hide();
                $("#hometabcontent").show();
                $("#hometabcontent").children().show();
            });

            $("#componentstab").click(function () {
                $("#tabul li").removeClass("ctab");
                $("#componentstab").addClass("ctab");
                $("#tabcontent .tabcontainer").hide();
                $("#componentstabcontent").fadeIn('slow');
            });
            $("#documentstab").click(function () {
                $("#tabul li").removeClass("ctab");
                $("#documentstab").addClass("ctab");
                $("#tabcontent .tabcontainer").hide();
                $("#documentstabcontent").fadeIn('slow');
            });
            $("#userstab").click(function () {
                $("#tabul li").removeClass("ctab");
                $("#userstab").addClass("ctab");
                $("#tabcontent .tabcontainer").hide();
                $("#userstabcontent").fadeIn('slow');
            });

            function addtab(count) {
                var closetab = '<a href="" id="close' + count + '" class="close">&times;</a>';
                $("#tabul").append('<li id="t' + count + '" class="ntabs">Tab ' + count + '&nbsp;&nbsp;' + closetab + '</li>');
                $("#tabcontent").append('<div id="c' + count + '" class="tabcontainer">Tab Content ' + count + '</div>');

                $("#tabul li").removeClass("ctab");
                $("#t" + count).addClass("ctab");

                $("#t" + count).bind("click", function () {
                    $("#tabul li").removeClass("ctab");
                    $("#t" + count).addClass("ctab");
                    $("#tabcontent .tabcontainer").hide();
                    $("#c" + count).fadeIn('slow');
                });

                $("#close" + count).bind("click", function () {
                    // activate the previous tab
                    $("#tabul li").removeClass("ctab");
                    $("#tabcontent .tabcontainer").hide();
                    $(this).parent().prev().addClass("ctab");
                    $("#c" + count).prev().fadeIn('slow');

                    $(this).parent().remove();
                    $("#c" + count).remove();
                    return false;
                });
            }
        });

とてもシンプルです。アクティブでないタブのコンテンツを非表示にするだけです。新しいタブが追加<li>されると、「tabul」に新しいタブが追加され、「tabContent」に新しいタブが追加され<div>ます。最初の 4 つのタブは静的であり、閉じられることはありません (最初に静的に追加されているのはそのためです)。

私の質問は、ページが更新されたときのタブの永続性についてです。セッションを維持したいと思います。これについての正しい方法は何でしょうか？JQ Cookie プラグインを使用できますか? もしそうなら、どのように？

4

0 に答える 0