4

如果您不想阅读整篇文章，请跳至底部的更新 #2。

我使用 jquery-ui 连接列表创建了一个可自定义的 UI：http: //jqueryui.com/sortable/#connect-lists

我现在想将用户的 UI 配置保存到他们本地机器上的 cookie 中，以便下次他们加载页面时，他们之前设置的布局将被加载，如本页所述： http: //devheart.org/文章/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;

任何人都知道完成此操作的正确语法是什么？

4

1 回答 1

0

我终于让代码工作了。这是完整的代码（不包括 jquery-ui 相关代码）。外部页面需要与列表 id 命名相同。

HTML

    <div id="example-2-3">

                <div class="column first">

                    <ul class="sortable-list">
                        <li class="sortable-item" id="id1"></li>
                        <li class="sortable-item" id="id2"></li>
                        <li class="sortable-item" id="id3"></li>
                    </ul>

                </div>

                <div class="column">

                    <ul class="sortable-list">
                        <li class="sortable-item" id="id4"></li>
                    </ul>

                </div>

                <div class="column">

                    <ul class="sortable-list">
                        <li class="sortable-item" id="id5"></li>
                        <li class="sortable-item" id="id6"></li>
                    </ul>

                </div>

    </div>

脚本

$(document).ready(function(){

    window.onload = loadItemsFromCookie('cookie-2');
    // Get items
    function getItems(exampleNr)
    {
        var columns = [];

        $(exampleNr + ' ul.sortable-list').each(function(){
            columns.push($(this).sortable('toArray').join(','));                
        });

        return columns.join('|');
    }

    // Load items from cookie
    function loadItemsFromCookie(name)
    {
        if ( $.cookie(name) != null )
        {
            renderItems($.cookie(name));
        }
        else 
        {
            alert('No items saved in "' + name + '".');
        }   
    }

    // Render items
    function renderItems(items)
    {
        var html = '';
        var pagedata = '';

        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] + '">';

                    var pagedata = '';
                    var scriptUrl = items[i] + ".html"
                    $.ajax({
                        url: scriptUrl,
                        type: 'get',
                        dataType: 'html',
                        async: false,
                        success: function(data) {
                            result = data;
                            html += data;
                        } 
                    });

                    html += '</li>';
                }
            }

            html += '</ul></div>';
        }

        $('#example-2-3').html(html);
    }

    $('#example-2-3 .sortable-list').sortable({
        connectWith: '#example-2-3 .sortable-list',
        update: function(){
            $.cookie('cookie-2', getItems('#example-2-3'));
        }
    });

});

</script>
于 2012-10-24T18:28:08.177 回答