jPages-master分页组件

HTML sass jade

+

到了开始做毕业设计的时候了，我们组的课题是 购物商城 。

一开始还挺高兴得，但是碰到我们的导师，顿时一脸懵逼的...0.0...

今天我在做商品列表的功能，需要做商品的翻页功能，商品展示的页面长度有限制，展示不完所有的商品，就要靠翻页来实现。
我在写了半天的时候，同学告诉我有专门写分页的插件，心里一万匹草泥马飘过。。。。

之后百度搜素了一下，发现jPages-master这个组件功能比较不错，蛮适合我的需求，我是直接下载的，只要引用就行了。。

demo

下面是核心代码:

(1) 引入jPages:

1
2
3
4
5
<script src="../js/JS/jquery-1.8.2.min.js"></script>
   <script src="../js/JS/highlight.pack.js"></script>
   <script src="../js/JS/tabifier.js"></script>
   <script src="../js/JS/js.js"></script>
   <script src="../js/JS/jPages.js"></script>

(2) select_brands.js 

引入jPages中，你所需要的分页功能，我用到了跳转、共多少页，共多少条商品，还有基本功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-28718218-1']);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
/* when document is ready */
$(function() {
    /* initiate plugin */
    $("div.holder").jPages({
        containerID : "itemContainer",
        callback    : function( pages, items ){
            $("#legend1").html(" 共 " + pages.count + "页,");
            $("#legend2").html( " 共 " + items.count + "条");
        }
    });
    /* when button is clicked */
    $("button").click(function(){
        /* get given page */
        var page = parseInt( $("input").val() );
        /* jump to that page */
        $("div.holder").jPages( page );
    });
});
导入商品的数据信息

1
2
3
4
5
6
7
8
9
10
var obj = obj;
var item = obj.item;
console.log(item)
var UL = document.querySelector("#itemContainer");
console.log(UL);
var str1="";
for(var i=0; i<267;i++){
    str1 +=  '<li><a href="#"><img src="'+item[0].pic+'"></a>';
}
UL.innerHTML += str1;

(3)select_data.js

1
2
3
4
5
	var obj = {
    item:[{
        pic:'../image/goods.png'
    }]
}

(4)select_brands.jade

1
2
3
4
5
6
7
8
9
10
11
12
13
14
body
	div.selectGoods
           div.goods_center
               ul#itemContainer
               div.page
                   div.holder
                   div.shouye
                       a(href="#") 首页
                   div#legend1
                   span.dao 到
                   input(type="text")
                   span.ye 页
                   button 确定
                   div#legend2