jquery tabs 可排序的 cookie 顺序

Question

我想创建一个 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>

Answer 1

我很抱歉，这可能不完全是您正在寻找的标记，但这是一个很好的开始！

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

使用此 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 插件 --> 这里！

这是我用于演示的 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 和他的 Cookie 插件！
单击按钮并查看响应。

如有任何问题请发表评论！