Постоянство JQuery Custom Tab с Cookies - PullRequest
Новая
       21

Постоянство JQuery Custom Tab с Cookies

1 голос
/ 22 февраля 2012

У меня есть простая настройка вкладок с использованием jquery (и ASP.NET MVC3 Razor engine).
Вот 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;
                });
            }
        });

Все довольно просто. Просто скрывает все вкладки, которые не активны. Когда добавляется новая вкладка, в "tabul" добавляется новый <li>, а в "tabContent" добавляется новый <div>. Первые четыре вкладки являются статическими и никогда не будут закрыты (именно поэтому они статически добавляются в начале).

У меня вопрос о сохранении вкладок при обновлении страницы, я хочу сохранить сеанс. Каков будет правильный путь? Могу ли я использовать плагин JQ Cookie? Если да, то как?

...