分页插件jPages.js的使用示例

柳飞飙

2023-12-01

1 兼容性ie7+

2 只能展示客户端资源(勉强可以通过修改来加载远程数据)

//对静态图片资源进行分页

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <meta charset="UTF-8">
  <title>jPages</title>
  <link rel="stylesheet" href="css/jPages.css">

  <script src="js/jquery-1.11.3.min.js"></script>
  <script src="js/jPages.min.js"></script>

  <style>
    * {margin: 0; padding: 0;}
  </style>
</head>
<body>

    <div class="holder"></div>
    <p class="next">后一页自定义>>></p>
    <p class="goPage">跳转到某一页>>></p>
    <p class="add">动态增加图片</p>
    <p class="reset">重置</p>
    <div id="itemContainer">
        <div><img src="images/a1.png" alt="">1</img></div>
        <div><img src="images/a2.png" alt="">2</img></div>
        <div><img src="images/a3.png" alt="">3</img></div>
        <div><img src="images/a4.png" alt="">4</img></div>
        <div><img src="images/a5.png" alt="">5</img></div>
        <div><img src="images/a6.png" alt="">6</img></div>
        <div><img src="images/a7.png" alt="">7</img></div>
        <div><img src="images/a8.png" alt="">8</img></div>
        <div><img src="images/a9.png" alt="">9</img></div>
        <div><img src="images/a10.png" alt="">10</img></div>
        <div><img src="images/a11.png" alt="">11</img></div>
        <div><img src="images/a12.png" alt="">12</img></div>
        <div><img src="images/a13.png" alt="">13</img></div>
        <div><img src="images/a14.png" alt="">14</img></div>
        <div><img src="images/a15.png" alt="">15</img></div>
        <div><img src="images/a16.png" alt="">16</img></div>
        <div><img src="images/a17.png" alt="">17</img></div>
        <div><img src="images/a18.png" alt="">18</img></div>
        <div><img src="images/a19.png" alt="">19</img></div>
        <div><img src="images/a20.png" alt="">20</img></div>
    </div>
  <script>
	$(function() {

        $('.holder').jPages({
            containerID: 'itemContainer',
            first: '第一页',//false为不显示
            previous: '前一页',//false为不显示
            next: '.next',//false为不显示 自定义按钮
            last: '最后一页',//false为不显示
            perPage: 3,//每页最多显示5个
            keyBrowse: true,//键盘切换
            scrollBrowse: true,//滚轮切换
            //pause: 1000,//自动切换
            //clickStop: true,//点击停止自动切换
            //delay: 250,//每张图片显示动画延迟
            //direction: "auto",//本页图片显示的顺序 -> "forward", "backwards", "auto" or "random".
            //fallback: 5000,//每张图片显示透明度延迟
            callback: function(pages, items) {
                console.log(pages);
                console.log(items);
            }, 
        });

        //跳转到某一页
        $('.goPage').on('click', function() {
            $(".holder").jPages(5);
        });


	});


  	
  </script>
	



  
</body>
</html>

对远程图片资源进行分页(配合ajax)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <meta charset="UTF-8">
  <title>jPages</title>
  <link rel="stylesheet" href="css/jPages.css">

  <script src="js/jquery-1.11.3.min.js"></script>
  <script src="js/jPages.min.js"></script>

  <style>
    * {margin: 0; padding: 0;}
    img {width: 120px; height: 100px; border: 1px solid red;}
  </style>
</head>
<body>

    <div class="holder"></div>
    <div id="itemContainer"></div>
    <div class="imgContainer"></div>

  <script>
	$(function() {
        var pageNo = 1;

        $.ajax({
            url: '/material/list?type=1&pageSize=20&pageNo='+ pageNo,
            success: function(data) {
                var html = '';

                for(var i=0; i<data.total; i++) {
                    html += '<div></div>';
                }
                $('#itemContainer').append(html);

                html = '';

                for(var i=0; i<data.list.length; i++) {
                    html += '<img src="/'+ data.list[i].Path +'">';
                }
                $('.imgContainer').empty().append(html);

                $('.holder').jPages({
                    containerID: 'itemContainer',
                    perPage: 20,
                    callback: function(pages, items) {
                        $.ajax({
                            url: '/material/list?type=1&pageSize=20&pageNo='+ pages.current,
                            success: function(data) {
                                var html = '';

                                for(var i=0; i<data.list.length; i++) {
                                    html += '<img src="/'+ data.list[i].Path +'">';
                                }
                                $('.imgContainer').empty().append(html);
                            },
                        });
                    },
                });
            },
        });

	});


  	
  </script>
	



  
</body>
</html>

jPages.css实在是太丑了，自定义css如下：

.holder {
	margin: 15px 0;
}

.holder a {
	font-size: 12px;
	cursor: pointer;
	color: #428bca;
	position: relative;
    padding: 8px 12px;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    border-right: none;
}

.holder a:hover {
	color: #2a6496;
	background-color: #eee;
}

.holder a.jp-previous { 
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}
.holder a.jp-next { 
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
    border-right: 1px solid #ddd;
}

.holder a.jp-current, a.jp-current:hover { 
	color: #FF4242;
	font-weight: bold;
}

.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; }

分页插件jPages.js的使用示例

相关阅读

相关文章

相关问答

相关文档