4

投稿全体を読みたくない場合は、下部の更新＃2にスキップしてください。

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ページをロードしますが、サポートするのは1つのリストのみです。

パート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

I finally got the code to work. Here is the full code (not including jquery-ui related code). External pages need to be named the same as the list 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>

Script

$(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 に答える