jQuery UI可排序和Cookie

时间：2009-09-02 22:10:01

标签： jquery jquery-ui cookies

我必须承认，我是jQuery的新手，不过我想以某种方式使这项工作。

我有一个带有此代码的可排序小部件的igoogle风格内容

HTML 

<div class="column">
    <div class="box">
        <div class="box-header">
            Header Widget
        </div>
                  <div class="box-content">
            <p>
            Content widget
            </p>
               </div>
        </div>
</div>


<div class="column">
        <div class="box">
            <div class="box-header">
                Header Widget
            </div>
                      <div class="box-content">
                <p>
                Content widget
                </p>
                   </div>
            </div>
    </div>

的jQuery 

$(".column").sortable({
        connectWith: '.column',
        handle: '.box-header',
        revert: 500
    });

如何使用cookie插件来完成这项工作？

感谢您的时间和帮助。

6 个答案:

答案 0 :(得分：2)

首先，下载cookie插件（如果还没有）： http://plugins.jquery.com/project/cookie

接下来，阅读这篇介绍如何使用插件的简短文章： http://www.electrictoolbox.com/jquery-cookies/

最后，确定要在页面加载之间存储哪些信息，然后在适当的时候挂钩事件以保存该信息。要使用该信息，请添加一个onReady事件，该事件可以查找它并对其执行某些操作。

例如，如果您想跟踪哪个列的顺序，您需要在这些列上放置一些ID，然后执行：

$(".column").sortable({
  connectWith: '.column',
  handle: '.box-header',
  revert: 500
  update: function(event, ui) {
    // This will trigger after a sort is completed
    var ordering = "";
    var $columns = $(".column");
    $columns.each(function() {
      ordering += this.id + "=" + $columns.index(this) + ";";
    });
    $.cookie("ordering", ordering);
  }
});

然后执行以下操作以使用该信息：

$(function() {
  var ordering = $.cookie("ordering");
  var orderings = ordering.split(";");
  $.each(orderings, function(index, ordering) {
    // Use each ordering, which will be in the form of "someId=someIndex" to actually
    // sort your stuff.  Not super-familiar with the Sortable package so you'll have to look
    // this part up on your own ... or just use basic jQuery stuff
  };
});

希望有所帮助。

答案 1 :(得分：2)

你可以尝试这个

var setSelector = "#list1";
var setCookieName = "listOrder";
var setCookieExpiry = 7;


// function that writes the list order to a cookie
function getOrder() {
    // save custom order to cookie
    $.cookie(setCookieName, $(setSelector).sortable("toArray"), { expires: setCookieExpiry, path: "/" });
}

// function that restores the list order from a cookie
function restoreOrder() {
    var list = $(setSelector);
    if (list == null) return

    // fetch the cookie value (saved order)
    var cookie = $.cookie(setCookieName);
    if (!cookie) return;

    // make array from saved order
    var IDs = cookie.split(",");

    // fetch current order
    var items = list.sortable("toArray");

    // make array from current order
    var rebuild = new Array();
    for ( var v=0, len=items.length; v<len;>
        rebuild[items[v]] = items[v];
    }

    for (var i = 0, n = IDs.length; i &lt; n; i++) {


        var itemID = IDs[i];

        if (itemID in rebuild) {


            var item = rebuild[itemID];

            var child = $("ul.ui-sortable").children("#" + item);

            var savedOrd = $("ul.ui-sortable").children("#" + itemID);

            child.remove();

            $("ul.ui-sortable").filter(":first").append(savedOrd);
        }
    }
}

// code executed when the document loads
$(function() {

    $(setSelector).sortable({
        axis: "y",
        cursor: "move",
        update: function() { getOrder(); }
    });

    restoreOrder();
});

保存在Cookie中

引自  Shopdev

答案 2 :(得分：1)

我在互联网上到处都看到了很多关于这个主题的事情。我发现它们不是很准确和广泛。 对于记录，这是我选择的解决方案，用于多列portlet仪表板（如Jquery-UI示例中所示）。 首先构建列和portlet。

$( ".ui-portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" );
$( ".ui-column .ui-portlet" ).find( ".ui-portlet-header" )
              .addClass( "ui-widget-header ui-corner-all" )
              .prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
              .end()
      .find( ".ui-portlet-content" );
$( ".ui-portlet .ui-portlet-header .ui-icon" ).click(function() {
      $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
      $( this ).parents( ".ui-portlet:first" ).find( ".ui-portlet-content" ).toggle("blind", "fast");
      return false;
});
$( ".ui-column" ).disableSelection();

然后，大多数重要的东西都会给每个元素（列，portlet ......）提供Id。

$( ".ui-column" ).each(function(index, domEle){ $(domEle).attr('id', 'column_'+index)})
$( ".ui-column .ui-portlet" ).each(function(index, domEle){ $(domEle).attr('id', 'portlet_'+index)})

然后使用on update事件函数对事物进行排序，以便在每次置换后设置cookie。

$( ".ui-column" ).sortable({
      connectWith: ".ui-column",
      handle: '.ui-portlet-header',
      update: function(event, ui) {
          var cooked = new Array;
          $( ".ui-column" ).each(function(index, domEle){ cooked[index]= $(domEle).sortable('toArray')});
          $.cookie('cookie_name', cooked.join('|'), { expires: 7, path: '/'});
      }
});

现在是restoreOrder函数。

function restoreOrder() {
    var cookie = $.cookie('cookie_name');
    if (!cookie) return;
    var SavedID = cookie.split('|');
    for ( var u=0, ul=SavedID.length; u &lt; ul; u++ ){ SavedID[u] = SavedID[u].split(',');}
    for (var Scolumn=0, n = SavedID.length; Scolumn &lt; n; Scolumn++) {
        for (var Sitem=0, m = SavedID[Scolumn].length; Sitem &lt; m; Sitem++) {
            $(".ui-column").eq(Scolumn).append($(".ui-column").children("#" + SavedID[Scolumn][Sitem]));
        }
    }
}
// TODO check why an empty column crash the loops !? Should not be complicate...

加载文档restoreOrder()

后偏离正轨

答案 3 :(得分：1)

感谢Elmatou。只是一个对我有用的肮脏修复（在填写cookie之前只是一封信）。

$( ".ui-column" ).sortable({
      connectWith: ".ui-column",
      handle: '.ui-portlet-header',
      update: function(event, ui) {
          var cooked = new Array;
          $( ".ui-column" ).each(function(index, domEle){ cooked[index]= $(domEle).sortable('toArray')});
          $.cookie('cookie_name', 'x'+cooked.join('|'), { expires: 7, path: '/'});
      }
});

答案 4 :(得分：0)

现在我可以得到这样的数组，

function saveOrder() {
    var cookieName = "order";
     $.cookie(cookieName, $(".column").each(function(){ $(this).sortable("toArray")}));
    }

然后

$(".column").sortable({
    connectWith: '.column',
        handle: '.box-header',
        revert: 500,
        update: function(event, ui) {
        saveOrder();

  }

现在如何从cookie中检索它？

答案 5 :(得分：0)

这是一个使用localStorage保存订单的示例。 参见示例，首先元素需要id。该id将被存储并用于恢复订购。

演示：http://jsfiddle.net/bartburkhardt/2wgnsc2v 

      $(function() {

        //add id's to the li elements so after sorting we can save the order in localstorage
        $( "#sortable>li" ).each(function(index, domEle){ $(domEle).attr('id', 'item_'+index)});

        $( "#sortable" ).sortable({
          placeholder: "ui-state-highlight",
          update: function(event, ui) {        
            localStorage.setItem("sorted",  $("#sortable").sortable("toArray") );
          }
        });

        restoreSorted();

      });


      function restoreSorted(){

          var sorted = localStorage["sorted"];      
          if(sorted == undefined) return;

          var elements = $("#sortable");
          var sortedArr = sorted.split(",");

          for (var i = 0; i < sortedArr.length; i++){
              var el = elements.find("#" + sortedArr[i]);
              $("#sortable").append(el);
          };

      }

<ul id="sortable">
  <li class="ui-state-default">block 1</li>
  <li class="ui-state-default">block 2</li>
  <li class="ui-state-default">block 3</li>
  <li class="ui-state-default">block 4</li>
  <li class="ui-state-default">block 5</li>
  <li class="ui-state-default">block 6</li>
  <li class="ui-state-default">block 7</li>
  <li class="ui-state-default">block 8</li>
  <li class="ui-state-default">block 9</li>
  <li class="ui-state-default">block 10</li>
  <li class="ui-state-default">block 11</li>
  <li class="ui-state-default">block 12</li>
</ul>
相关问题
最新问题