我必须承认，我几乎是 jQuery 的新手，但我想以某种方式使其工作.
我有一个带有此代码的可排序小部件的 igoogle 风格内容
<div class="box"><div class="box-header">标题小部件<div class="box-content"><p>内容小部件</p>
<div 类=列"><div class="box"><div class="box-header">标题小部件
<div class="box-content"><p>内容小部件</p>
$(".column").sortable({连接:'.column'，句柄:'.box-header',回复:500});如何使用 cookie 插件实现此功能?
感谢您的时间和帮助.
首先，下载 cookie 插件(如果您还没有):http://plugins.jquery.com/project/cookie
接下来，阅读这篇解释如何使用插件的简短文章:http://www.electrictoolbox.com/jquery-cookies/
最后，决定您要在页面加载之间存储哪些信息，然后在适当的时候连接事件以保存该信息.要使用该信息，请添加一个 onReady 事件来查找它并对其进行处理.
例如，如果您想跟踪哪个列的顺序，您需要在这些列上放置一些 ID，然后执行:
$(".column").sortable({连接:'.column'，句柄:'.box-header',回复:500更新:函数(事件，用户界面){//这将在排序完成后触发var 排序 = "";var $columns = $(".column");$columns.each(function() {排序 += this.id + "=" + $columns.index(this) + ";";});$.cookie("排序", 排序);}});然后执行以下操作以使用该信息:
$(function() {var ordering = $.cookie("ordering");var orderings = ordering.split(";");$.each(orderings, function(index, ordering) {//使用每一个排序，它会以someId=someIndex"的形式来实际//对你的东西进行排序.不太熟悉 Sortable 包，所以你必须看看//这部分由你自己决定......或者只使用基本的 jQuery 东西};});希望有所帮助.
I must admit, that I'm pretty much newbie to jQuery, though I want to somehow make this work.
I have a igoogle style content with sortable widgets with this code
<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>
$(".column").sortable({
connectWith: '.column',
handle: '.box-header',
revert: 500
});
How do I get this work with cookie plugin?
Thanks for your time and help.
First off, download the cookie plug-in (if you haven't already): http://plugins.jquery.com/project/cookie
Next, read this short article that explains how to use the plug-in: http://www.electrictoolbox.com/jquery-cookies/
Finally, decide what information you want to store between page loads, and then hook up events to save that info whenever appropriate. To use that information, add an onReady event that looks it up and does something with it.
For instance, if you wanted to keep track of which column is in which order, you would need to put some IDs on those columns, then do:
$(".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);
}
});
and then do something like the following to use that information:
$(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
};
});
Hope that helps.
这篇关于jQuery UI Sortable 和 Cookie的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
