Home > 未分類 > infinitescroll

infinitescroll

とあるプロジェクトでつかったmasonry.jsとinfinitescroll.js
masonryはpinterest的なタイルレイアウトを実現するjqueryプラグイン
infinitescrollは無限スクロールを実装できるプラグイン

infinitescrollは基本的には一番下までスクロールすると、つぎのページを自動で読み込むんだけども
バージョン1.4からTwitterのように、ボタンを押すとロードされるUIも実装できるようになった(とwebサイトに書いてあった)

クライアントさんがボタンをおしたらロードされるUIを希望していたので、infinitescrollのこの機能を利用しようとして失敗した話

infinitescroll (http://www.infinite-scroll.com/)

masonry (http://masonry.desandro.com/

infinitescrollのwebサイトによると


$('#content').infinitescroll({

navSelector : “div.navigation”,
// selector for the paged navigation (it will be hidden)
nextSelector : “div.navigation a:first”,
// selector for the NEXT link (to page 2)
itemSelector : “#content div.post”
// selector for all items you’ll retrieve
});

の下に


$(window).unbind('.infscr');
$('a.next').click(function(){
$(document).trigger('retrieve.infscr');
return false;
});

と書くと、リンクを押したらロードされるUIが実装されるという


$(window).unbind('.infscr');
$('a.next').click(function(){
$('.container').infinitescroll('retrieve');
return false;
});

が、これがまぁまったくもって動かない。
設定したリンクを押しても何もおきない。

ググっていたら見つけたのがこのページ

http://stackoverflow.com/questions/10762656/infinite-scroll-manual-trigger

コードを下記にしたら無事に動くようになった。

しかし、なんでサイトに載っているのと違う書き方をしたら動くようになったんだろう??

Home > 未分類 > infinitescroll

Search
Feeds
Meta

Return to page top