如果您不想閱讀整篇文章，請跳至底部更新＃2。保存JQuery-UI可排序連接列表自定義配置到本地Cookie
我已經使用jQuery UI的連接列表中創建一個自定義的UI： http://jqueryui.com/sortable/#connect-lists
我現在想的UI用戶的配置保存到一個cookie本地機器上，以便下一次他們加載頁面他們以前設置的佈局將加載，如本頁討論： http://devheart.org/articles/jquery-customizable-layout-using-drag-and-drop/
問題是，在討論如何保存他的寫作的第2部分中的多個連接列表的自定義配置後，他忽略包括多個在他實施公司的第3部分中的關聯名單德成爲一個實際的設計。我已經能夠使頁面上的所有內容像該頁面上的最後一個示例一樣工作，但每當我嘗試修改代碼以使用連接列表時，頁面都不再起作用。
我明白代碼在做什麼背後的基本思想，但我不知道JavaScript，並且沒有成功修改代碼以使用連接列表。我希望知道JavaScript的人能夠輕鬆修改下面的代碼來處理像第2部分那樣的連接列表。
第2部分保存多個連接列表的順序，但不會使用相應的名稱加載外部html頁面。
第3部分使用相應的項目名稱加載外部html頁面，但僅支持單個列表。
代碼連解釋從第2部分：
// Load items
function loadItemsFromCookie(name)
{
if ($.cookie(name) != null)
{
renderItems($.cookie(name), '#wrapper');
}
else
{
alert('No items saved in "' + name + '".');
}
}
// Render items
function renderItems(items, container)
{
var html = '';
var columns = items.split('|');
for (var c in columns)
{
html += '<div class="column"><ul class="sortable-list">';
if (columns[c] != '')
{
var items = columns[c].split(',');
for (var i in items)
{
html += '<li id="' + items[i] + '">Item ' + items[i] + '</li>';
}
}
html += '</ul></div>';
}
$('#' + container).html(html);
}
從部分3不支持連接列表碼（正在嘗試修改該支持連接列表）：
// Get items
function getItems(id)
{
return $('#' + id + '-list').sortable('toArray').join(',');
}
// Render items
function renderItems(id, itemStr)
{
var list = $('#' + id + '-list');
var items = itemStr.split(',')
for (var i in items)
{
html = '<li class="sortable-item';
if (id == 'splash')
{
html += ' col3 left';
}
html += '" id="' + items[i] + '"><div class="loader"></div></li>';
list.append(html);
// Load html file
$('#' + items[i]).load('content/' + items[i] + '.html');
}
}
更新＃1：
我想我幾乎擁有它，我只是無法讓它從外部html文件插入html。它能夠讓它插入變量和純文本，而不是外部html。
// Render items
function renderItems(items)
{
var html = '';
var columns = items.split('|');
for (var c in columns)
{
html += '<div class="column';
if (c == 0)
{
html += ' first';
}
html += '"><ul class="sortable-list">';
if (columns[c] != '')
{
var items = columns[c].split(',');
for (var i in items)
{
html += '<li class="sortable-item" id="' + items[i] + '">';
//---------This Line Isn't Working--------->
$('#' + items[i]).load(items[i] + '.html');
//---------This Line Isn't Working--------->
html += '</li>';
}
}
html += '</ul></div>';
}
$('#example-2-3').html(html);
}
更新＃2：
我一直在找起來正是在例子中的每個的JavaScript命令不，我想我已經想通了這個問題。我不能只加載頁面，我需要將外部頁面的代碼附加到html變量。我想我需要使用.get命令，例如：
var pagedata = '';
.get(items[i] + '.html', function(pagedata);
html += pagedata;
任何人都知道要完成此操作的正確語法是什麼？