jquery - 如何使用 cookie 保存 jquery 可排序选项卡和 Accordion 顺序？

Question

我有一些 jQuery 可排序选项卡和 Accordion ，我希望它们在用户获取该页面时保持相同的顺序。我正在考虑使用 cookie 来做到这一点。

我该怎么做？

提前致谢。

Answer 1

要更轻松地设置和获取 cookie，请使用此 jquery 函数:

// COOKIES!
// setting: $.cookie('name', value [, int]); // optional expiry in days
// getting: $.cookie('name');
// deleting: $.cookie('name', null);
$.cookie = function() {
  function get(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');

    for (var i=0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0)==' ') c = c.substring(1,c.length);
      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
  }

  function set(name,value,days) {
    if (days) {
      var date = new Date();
      date.setTime(date.getTime()+(days*24*60*60*1000));
      var expires = "; expires="+date.toGMTString();
    } else {var expires = "";}

    document.cookie = name+"="+value+expires+"; path=/";
  }

  function xdelete(name) {
    set(name, null, -1);
  }

  if (arguments.length == 1) {
    return get(arguments[0]);

  } else if (arguments[1] == null) {
    xdelete(arguments[0]);

  } else {
    set(arguments[0], arguments[1], arguments[2]);
  }
}  

然后在可排序选项卡上设置排序处理程序(假设您使用的是 jquery UI 可排序):

$('.sortable').bind('sortchange', function() {
    // serialize the sort order (http://jqueryui.com/demos/sortable/#method-serialize)
    var sortable_order = $(this).sortable('serialize');
    // now you have a query string containing your item ids and their position
    // you can save them to a cookie and then do something with it next time the page loads
    $.cookie('sortable_order', sortable_order);

    // or you can send the sortable_order back to the server and save their order so that 
    // they can be rendered in the new order. This bypasses the need for cookies
    $.post('/your_item_sort_route_here', sortable_order);
    // of course you'd have to write your own backend logic for this
});

使用 cookie 方法，您可以在页面加载时检查 sortable_order cookie

$(document).ready(function() {
    var sortable_order = $.cookie('sortable_order');

    if (sortable_order) {
        // you would parse the sortable_order string to get the sortable item ids and their positions
        // and then use jQuery manipulation functions to rearrange the DOM
        // I'll leave that up to you! tee hee. If you can't figure this part out post back
        // and i'll give it a shot.
    }
});

希望这能将您推向正确的方向!