jquery - jQuery选项卡可排序订单Cookie

我想创建一个cookie来记住我的jquery选项卡的顺序。我该如何实现？我看到您也可以创建一个cookie，但是我真的不知道从哪里开始。

<script>
    $(function() {
        $( "#tabs" ).tabs().find( ".ui-tabs-nav" ).sortable({ axis: "x" });
    });
    </script>


<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>

最佳答案

抱歉，这可能不完全是您想要的标记，但是这是一个不错的开始！

看一下我创建的这个示例：
JSFiddle - COOKIES DEMO
（任何更改后刷新页面！！）

用于此HTML：

<div id="menu_holder">

    <div class="menu">
        <h2 class="button" id="button1">Menu title 1</h2>
        <ul class="list list1">
            <li>List 1</li>
            <li>List 2</li>
            <li>List 3</li>
        </ul>
    </div>

    <div class="menu">
        <h2 class="button" id="button2">Menu title 2</h2>
        <ul class="list list2">
            <li>List 1</li>
            <li>List 2</li>
            <li>List 3</li>
        </ul>
    </div>

    <div class="menu">
        <h2 class="button" id="button3">Menu title 3</h2>
        <ul class="list list3">
            <li>List 1</li>
            <li>List 2</li>
            <li>List 3</li>
        </ul>
    </div>

</div>

下载此jQuery COOKIES插件-> HERE!

这是我用于演示的jQuery脚本：

$(document).ready(function(){
    $("ul.list").hide();        //Hide all

    $('h2.button').each(function(){                       // For each button
        if  ($.cookie( $(this).attr("id") ) == 'open')    // wich cookie value...
        {                                                 // is equal to the button ID
            $(this).next().show();                        // ...show next element (ul)
            $(this).addClass('opened');                    // and add to this button a class 'opened'
        }
    });

    $("h2.button").click(function(){                    // ON CLICK:

        $(this).toggleClass('opened');                    // toggle class.

        if ( $(this).hasClass('opened') )
        {
        $.cookie( $(this).attr("id") , 'open' , {expires: 1} );
        }
        else
        {
        $.cookie( $(this).attr("id") , null , {expires: 1} );
        };

        $(this).next().slideToggle(800);
    });
});

要查看如何处理Cookie，请安装Firebug和他的Cookies插件！
单击按钮，然后查看响应。

留下任何问题的评论！

关于jquery - jQuery选项卡可排序订单Cookie，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6072392/