1
  • 私の HTML アプリケーションでは、*n グリッドが必要で、いつでもその一部だけを表示します。
  • 各タイルには、画像ではなく HTML コンテンツが表示されます。
  • ユーザーは、1 行または 1 列ずつ水平または垂直にスクロールできます。
  • 新しいタイルがマップに読み込まれると、ajax を介してコンテンツが読み込まれます。

カルーセル、タイル エンジン、マップ レンダリング ライブラリなど、さまざまなカテゴリの多数の js ライブラリを調べました。

各カテゴリのライブラリには、いずれかが欠けています。

  • カルーセル - 双方向スクロールとグリッドがありません
  • タイル エンジン - タイルの非同期読み込みは利用できません。
  • マップ レンダラー - レイヤー/画像のみをサポートします。

この要件に最適な適切なライブラリを提案してください。

4

1 に答える 1

2

iScroll.js を使用してみてください。動作します

<script src="http://lab.cubiq.org/iscroll/src/iscroll.js"></script>
<div id="vertical">
    <div id="vert_scroller">

    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        var HTML = "";
        for(i=0;i < 10;i++){
            HTML += '<div id="sc'+i+'" class="innerWrap"><div class="innerSc"><span>'+(Math.random()*64654).toString()+'</span></div></div>';
        }
        $("#vert_scroller").html(HTML);
        myScroll = new iScroll('vertical');
        for(i=0;i<10;i++){
            innerScroll_1 = new iScroll('sc'+i);
        }
    })
</script>


    #vertical{
    top:0px;
    left:0px;
    position:relative;
    height:300px;
    width:300px;
    z-index:1;
    letter-spacing: 1em;
}

#vert_scroller{
    width:100%;
    display:inline-block;
}
.innerWrap{
    height:40px;
    width:100%;
    position:relative;
    z-index:1;
    top:0px;
    left:0px;
}
.innerSc{
    padding:10px;
    width:450px;
    display:inline-block;
    border-bottom:1px solid black;
}
于 2013-02-01T11:42:33.917 に答える