jquery вкладки сортируемый порядок cookie - PullRequest
Новая
       7

jquery вкладки сортируемый порядок cookie

2 голосов
/ 20 мая 2011

Я хотел бы создать 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>

1 Ответ

0 голосов
/ 20 мая 2011


Прошу прощения, возможно, это не совсем та разметка, на которую вы смотрели, но это отличное начало!

ПОСМОТРИТЕ НА ЭТОМ ПРИМЕРЕ, который Я СОЗДАЛ:
JSFiddle -COOKIES DEMO (Обновить страницу после любого изменения !!)

Использовать для Ex этот 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);
    });
});

Чтобы увидеть, как обрабатываются куки, установите Firebug и его CookiesПлагин!
Нажмите на кнопки и увидите ответ.

Оставьте комментарий к любому вопросу!

...