jQuery UI可排序和Cookie
我必须承认，我是jQuery的新手，虽然我想以某种方式使这项工作。
我有一个带有此代码的可排序小部件的igoogle样式内容
HTML
Header Widget Content widget
Header Widget Content widget
jQuery的
$(".column").sortable({ connectWith: '.column', handle: '.box-header', revert: 500 });
如何使用cookie插件完成这项工作？
感谢您的时间和帮助。
首先，下载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 }; });
希望有所帮助。
你可以尝试这个
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 rebuild[items[v]] = items[v]; } for (var i = 0, n = IDs.length; i < 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引用
感谢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: '/'}); } });
我在互联网上到处都看到了很多关于这个话题的东西。 我发现它们不是很准确和广泛。 对于记录，这是我选择的解决方案，用于多列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( "") .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 < ul; u++ ){ SavedID[u] = SavedID[u].split(',');} for (var Scolumn=0, n = SavedID.length; Scolumn < n; Scolumn++) { for (var Sitem=0, m = SavedID[Scolumn].length; Sitem < 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()
那么现在我可以得到这样的数组，
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中检索它？
这是一个使用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); }; } - block 1
- block 2
- block 3
- block 4
- block 5
- block 6
- block 7
- block 8
- block 9
- block 10
- block 11
- block 12