Web制作(フリーランスWebデザイナー)

日にち2015/3/7
コーディング

【簡単】オートページャーを使うならコレ!

この記事は書いてから 約 2年 経過しています。 1年以上経過しているので情報が古い可能性があります。

【簡単】オートページャーを使うならコレ!

過去にWEB制作を担当した時に使用しました。正直これが一番使いやすいかと思います。では、オートページャーというのは、スクロールして一番下に行くとコンテンツがどんどん増えていく機能です。わかりやすいのが、TwitterやFacebookだと思います。しかし、この機能は記者はあまり好きではないです。それでは、使い方の紹介です。

ダウンロードとデモは下記URLで確認できます。

https://code.google.com/p/jquery-autopager/

まずは、HTMLです

まずはDIVタグで記事一覧を作ります。

<div class="test">記事</div>
<div class="test">記事</div>
<div class="test">記事</div>

記事一覧の下に下記コードを入れます。

<div id="next">
    <a href="homeScroll.php"></a>
    <img id="loading" src="images/icon-loading.gif" alt="読み込み中"  width="29" height="29">
</div>

これが、読み込む部分になります。

次にjQueryを入れます

bodyの閉じタグのすぐ上に下記コードを入れてください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.autopager-1.0.0.js"></script>
<script type="text/javascript">
var maxpage = 99; //MAXページ数があれば入力
$('#loading').css('display', 'none');
$.autopager({
content: '.test',// 読み込むコンテンツ
link: '#next a', // 次ページへのリンク
autoLoad: true,// スクロールの自動読込み解除(falseにするとクリック読み込み)
start: function(current, next){
$('#loading').css('display', 'block');
$('#next a').css('display', 'none');
},
load: function(current, next){
$('#loading').css('display', 'none');
$('#next a').css('display', 'block');
if( current.page >= maxpage ){ //最後のページ
$('#next a').hide(); //次ページのリンクを隠す
}
}
});
$('#next a').click(function(){ // 次ページへのリンクボタン
$.autopager('load'); // 次ページを読み込む
return false;
});
</script>
facebook twitter

© 2013-2017 visual hallucination.