google画像検索のようなUIを作りたい時に使うjavascriptってあるようで意外とないですね
試したもの試してないものありますがとりあえず次のためにまとめておきます
- Infinite Scroll | jQuery plugin, WordPress plugin, interaction design pattern
- Infinite AJAX Scroll – The SEO-friendly infinite scroll plugin for jQuery
- spage – ページ自動読み込み & 継ぎ足しプラグイン | PORTFOLIO PAPER by FAT
- “Infinite” Scroll to Load More Content Pagination with jQuery | InsertHTML
- jScroll – a jQuery Plugin for Infinite Scrolling / Lazy Loading
- jQuery.autopager
Infinite Scroll | jQuery plugin, WordPress plugin, interaction design pattern
・MIT License
・定番でなんでも出来る
・WordPress Pluginも用意されている
・次のページを読む部分が決め打ちすぎてとにかく使いにくい。。
・history back に対応しているかよくわからない (SEO フレンドリーらしい)
・次頁を自動で読み込むか、ボタンで読み込むか選択可能
Infinite AJAX Scroll – The SEO-friendly infinite scroll plugin for jQuery
・Commercial licensing （商用サイトは有料ライセンスが必要）
・実装されているページングのhtmlをそのまま使ってくれるので、導入が超簡単だった
・history back に対応している
・既存ボタンは消して、javascriptが動的に生成する部分がイマイチ
html:
~~~
2
~~~
javascript:
~~~
var ias = $.ias({
container: “.container”,
item: “.item”,
pagination: “#pagination”,
next: “.next a”
});
~~~
spage – ページ自動読み込み & 継ぎ足しプラグイン | PORTFOLIO PAPER by FAT
・MIT License
・jQuery v1.7.2の使用を推奨
・history back に対応しているっぽい
・試したけど導入出来なかった、pagenationをどう書けばよかったんだろう？
~~~
~~~
“Infinite” Scroll to Load More Content Pagination with jQuery | InsertHTML
・導入は簡単そう
・history back に対応していない
jScroll – a jQuery Plugin for Infinite Scrolling / Lazy Loading
・MIT and GPL Version 2 licenses
・導入は簡単そう
・history back に対応していない？
・次頁を自動で読み込むか、ボタンで読み込むか選択可能
html:
~~~
Page 1
Content here…
next page
~~~
javascript:
~~~
$(‘.jscroll’).jscroll({
loadingHtml: ‘ Loading…’,
padding: 20,
nextSelector: ‘a.jscroll-next:last’,
contentSelector: ‘li’
});
~~~
jQuery.autopager
・導入は簡単そう
・history back に対応していない
・古い？（すでに公式には配布されていない）
コメント