JQ利用jPages.js實現完美分頁

時間 2019-11-15

標籤利用 jpages.js jpages 實現完美分頁欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQ利用jPages.js實現完美分頁</title>
<script src="js/jQuery.1.8.2.min.js"></script>
<script src="js/jPages.js"></script>
<script>
    /* when document is ready */
    $(function(){

        /* initiate the plugin */
        $("div.holder").jPages({
            containerID : "itemContainer",
   first: '首頁',
   last: '尾頁',
   previous: '上頁',
   next: '下頁',
   perPage: 1,
   startPage: 1,
   startRange: 2,
    midRange: 3,
    endRange: 2,
   animation: 'wobble',
   keyBrowse: true,
   callback    : function( pages, items){

      $("#page-panel").html("當前頁面:" + pages.current);
      $("#page-pane2").html("頁面總數:" + pages.count);
      $("#page-pane3").html("總數量:" + items.count);
       $("#page-pane4").html("每頁數量:" + items.count/pages.count);css

   }
        });

    });
</script>
<style type="text/css">
  h2 a{
   color: #5DB0E6;
   text-shadow: 0 0 10px #5DB0E6;
  }

        .holder {
      margin: 15px 0;
   text-align:right;
    }

    .holder a {
      font-size: 14px;
      cursor: pointer;
      margin: 0 5px;
      color: #505050;
    }

    .holder a:hover {
      background-color: #222;
      color: #fff;
    }

    .holder a.jp-previous { margin-right: 15px; }
    .holder a.jp-next { margin-left: 15px; }

    .holder a.jp-current, a.jp-current:hover {
      color: #5DB0E6;
      font-weight: bold;
   text-shadow: 1px 1px #505050;
    }

    .holder a.jp-disabled, a.jp-disabled:hover {
      color: #bbb;
    }

    .holder a.jp-current, a.jp-current:hover,
    .holder a.jp-disabled, a.jp-disabled:hover {
      cursor: default;
      background: none;
    }

    .holder span { margin: 0 5px; }
</style>html

</head>ui

<body>
<ul id="itemContainer">
<li>2321321313123</li>
<li>2321321313123</li>
<li>2321321313123</li>
<li>2321321313123</li>
<li>2321321313123</li>

</ul>spa

<div class="holder" style="float:left"></div>
<div style="float:left;margin: 15px 2px;">
<span id="page-panel"></span>
<span id="page-pane2"></span>
<span id="page-pane3"></span>
<span id="page-pane4"></span>
</div>.net

</body>
</html>
xml

完美下載地址：http://download.csdn.net/detail/niwsmbulai1989/6870449htm

演示地址：http://runjs.cn/detail/cdxfiez6ip

http://sandbox.runjs.cn/show/cdxfiez6utf-8