1

いくつかの画像をアップロードして、それらを div コンテナーに追加しようとしています。

私の質問は、アップロードする画像が 1000 枚以上あるので、それらを同じ div スクロールバーにアップロードすると表示されますが、ユーザーには見栄えがよくありません。そのため、それらの画像にページネーションを追加したいと思います。

私のニーズに合ったこのサイト（例5 ）を見つけました。実際には単純なdivが含まれており、構造は次のとおりです。

 <div id="paginationdemo" class="demo">
                    <h1>Demo 5</h1>
                    <div id="p1" class="pagedemo _current" style="">Page 1</div>
                    <div id="p2" class="pagedemo" style="display:none;">Page 2</div>
                    <div id="p3" class="pagedemo" style="display:none;">Page 3</div>
                    <div id="p4" class="pagedemo" style="display:none;">Page 4</div>
                    <div id="p5" class="pagedemo" style="display:none;">Page 5</div>
                    <div id="p6" class="pagedemo" style="display:none;">Page 6</div>
                    <div id="p7" class="pagedemo" style="display:none;">Page 7</div>
                    <div id="p8" class="pagedemo" style="display:none;">Page 8</div>
                    <div id="p9" class="pagedemo" style="display:none;">Page 9</div>
                    <div id="p10" class="pagedemo" style="display:none;">Page 10</div>
                    <div id="demo5">                   
                    </div>

 </div>

そして、そのスクリプトは次のとおりです。

 <script type="text/javascript">
   $(function () {
       $("#demo5").paginate({
           count: 10,
           start: 1,
           display: 7,
           border: true,
           border_color: '#fff',
           text_color: '#fff',
           background_color: 'black',
           border_hover_color: '#ccc',
           text_hover_color: '#000',
           background_hover_color: '#fff',
           images: false,
           mouse: 'press',
           onChange: function (page) {
               $('._current', '#paginationdemo').removeClass('_current').hide();
               $('#p' + page).addClass('_current').show();
           }
       });
   });

    </script>

これは、画像を動的にアップロードする方法です

 $.each(data.result, function (index, file) {
                    $('#p1').append("<img class='LoadclickImage' align='left' style='height:48px;width:75px;' src='Uploads/" + file.name + "' width='75' height='50'  href='Uploads/" + file.name + "' >");
                });

画像を追加すると、同じページに追加され、リストが増え続けるので、画像を特定のdivに制限し、動的に作成して次のページに追加するにはどうすればよいですか?アップロードするメイジの数を指定し、超過した場合は次のページに追加しようとします。

そして、誰かが共有できるより良い、最も単純なアイデアを持っているなら.私はそれらを聞くのが大好きです:)

4

2 に答える 2

1

画像を追加する「ページ」divを制御する必要があります。すでにループで画像を追加しているので、途中です。

これをすべてjQueryセレクターを介して行う方法があるかもしれませんが、私はそれほど多くのjQuerykung-fooを持っていません。そのため、「ページ」divがいっぱいかどうかを追跡するためにhtml属性を使用しています。

私のコードでは、追加しています

タグと設定番号を使用します。この方法でテストする方が簡単でしたが、メインロジックに違いはありません。

これが私のHTMLです...

<div id="p1" full="no" class="pagedemo _current" style="">Page 1</div>
<div id="p2" full="no" class="pagedemo">Page 2</div>
<div id="p3" full="no" class="pagedemo">Page 3</div>
<div id="p4" full="no" class="pagedemo">Page 4</div>
<div id="p5" full="no" class="pagedemo">Page 5</div>
<div id="p6" full="no" class="pagedemo">Page 6</div>

そしてこれが私のスクリプトです...

<script>
    $(document).ready(function () {
        var images = 65;

        for(var i = 1; i <= images; i++)
        {
            var page = $('.pagedemo[full="no"]').first();

            $(page).append("<p>" + i + "</p>");

            if ($(page).children("p").length == 10)
            {
                $(page).attr('full', 'yes');
            }
        }
    });

</script>
于 2012-04-08T15:28:48.410 に答える
1

これを解決する方法は次のとおりです（ただし、すべての画像が1回のajaxリクエストで同時にロードされると仮定します）。

<div id="paginationdemo" class="demo">
    <h1>Demo 5</h1>
    <div id="pagesContainer">
        <div id="p1" class="pagedemo _current"></div>
    </div>
    <div id="demo5"></div>
</div>

Javascript:

var imagesPerPage = 4, pageNumber = 1;

function onAjaxSucceded(data) {
    var pagesContainer = $('#pagesContainer'),
        imagesInPage = 0,
        divPage = $("#p1");

    $.each(data.result, function(index, file) {
        if (imagesInPage >= imagesPerPage) {
            imagesInPage = 1;
            pageNumber += 1;
            divPage = $('<div/>', {id : "p" + pageNumber}).addClass('pagedemo').hide().appendTo(pagesContainer);
        } else {
            imagesInPage += 1;
        }
        var src = 'Uploads/' + file.name;
        $('<img>', {src: src, href: src, "class": 'LoadclickImage', align: 'left'}).appendTo(divPage);
    });

    $("#demo5").paginate({
        count: pageNumber,
        start: 1,
        display: Math.min(7, pageNumber),
        border: true,
        border_color: '#fff',
        text_color: '#fff',
        background_color: 'black',
        border_hover_color: '#ccc',
        text_hover_color: '#000',
        background_hover_color: '#fff',
        images: false,
        mouse: 'press',
        onChange: function(page) {
            $('#paginationdemo ._current').removeClass('_current').hide();
            $('#p' + page).addClass('_current').show();
        }
    });
}

そして、ここにライブデモがあります: http://jsfiddle.net/protron/gbzsR/7/

于 2012-04-09T05:27:48.783 に答える