자동 페이지 스크롤 jscroll 사용하기

이번에는 자동 페이지 스크롤 jscroll 을 사용해서 작업해 보았다.

jscroll 은 jquery 와 함께 쓰는 플러그인 MIT 라이선스이다.  ( http://jscroll.com ) 

list.php 기본 목록 페이지내용

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="jquery.jscroll.js"></script> <script type="text/javascript"> $(document).ready(function () {  $('#autoScroll').jscroll({   autoTrigger: true,   loadingHtml: '<div class="next"><img src="./images/loading.gif" alt="Loading" /></div>',   nextSelector: 'a.nextPage:last'  }); }); </script> <? $show_page  = 5; // 한페이지당 글개수 $tQ = "select count(*) from 테이블"; $tresult = mysql_query($tQ); $trow  = mysql_fetch_row($tresult); $total  = $trow[0]; if(!$page) $page = 1; $start = ($page-1)*$show_page; $total_page = (int)(($total-1)/$show_page)+1; $query = "select * from 테이블 order by no DESC limit $start,$show_page"; $res   = mysql_query($query) or die("테이블 정보 얻기 실패"); ?> <ul id="autoScroll"> <? $num = 1; while ($row = mysql_fetch_array($result)) { ?>  <li>목록 내용들<?=$num?></li> <?  $num++; } if ($num > 1) { ?>  <li>   <a href="list_page.php?mode=auto&page=<?=($page+1)?>" class="nextPage">다음페이지</a>  </li> <? } ?> </ul>

list_page.php - 다음페이지 처리페이지 소스

<? $page = $_GET['page']; $mode = $_GET['mode']; if($mode == "auto") {     sleep(1);   // 1초가량 지연시킨다.     $nextPage = $page + 1;  $show_page  = 5;    // 한페이지당 글개수  $tQ = "select count(*) from 테이블";  $tresult = mysql_query($tQ);  $trow  = mysql_fetch_row($tresult);  $total  = $trow[0];  if(!$page) $page = 1;  $start = ($page-1)*$show_page;  $total_page = (int)(($total-1)/$show_page)+1; // 전체 페이지 수  $query = "select * from 테이블 order by no DESC limit $start,$show_page";  $result = mysql_query($query) or die("테이블 정보 얻기 실패");  while ($row = mysql_fetch_array($result)) { ?>      <li>다음페이지의 목록 내용</li>   <?  }     if($page < $total_page) { ?>      <li>       <a href="list_page.php?mode=auto&page=<?=$nextPage?>" class="nextPage">다음페이지</a>      </li> <?     } } ?>

실행결과 화면

jquery.jscroll.js