2013 年 10 月の記事一覧です(1 件)

[JavaScript][jQuery]InfinateScrollを導入した

Twitter(ブラウザ版)みたいな無限スクロールをブログに適用したくて色々と調べていたんですけど、InfinateScrollっていうjQueryプラグインを使うことにしました。

他にも類似品はあるのだけれど、これはGitHubでスターいっぱい付いているし、なによりこちらが参考になったので。

使い方はbodyの閉じタグ直前にjQuery本体、InfinateScrollの順に設置してあげて、その後にプラグインの設定部分を記述するだけです。

実際のコードはこんなかんじになっています。

<script type="text/javascript" src="/static/js/jquery.infinitescroll.min.js"></script>
<script>
    $(function(){
        $('#wrapper').infinitescroll({
            <!-- debug        : console.log, -->
            navSelector  : "li.next",
            nextSelector : "li.next a",
            itemSelector : "#wrapper div.container"
        });
    });
</script>

適用したのはPaginateを持っているapp.routeで今のところトップページとタグページになります。当初トップページだけでしたが、タグによってはかなりエントリ件数が増えているのでPaginate機能を持たせました。

閲覧してなんかおかしいところあったら教えてください。


PAGE TOP