jQuery 实现 Discuz! 伪翻页（不刷新页面）

admin · 发表于 2020-8-19 16:17:58

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

首先要说的是，这是一个伪翻页。原理是调用例如100个数据后，将其后面的内容做隐藏处理，在不刷新页面的情况下进行内容的翻页。并且附带了渐入渐出效果。

引入jQuery

<script src="template/yulun_hei/js/jquery.min.js" type="text/javascript"></script><script src="template/yulun_hei/js/jPages.js" type="text/javascript"></script><script type="text/javascript">var jQuery = jQuery.noConflict();</script>

复制代码

示例源码

<ul id="itemContainer"> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li></ul>

复制代码

翻页源码

<div class="holder"></div>

复制代码

启动插件

jQuery(function() { jQuery("div.holder").jPages({ containerID : "itemContainer",//父级定义的ID名 perPage:20, //该数字控制每页显示数量，想要显示几个就修改成数字几 previous: "上一页", next: "下一页" }); jQuery("div.holder").click(function(){ jQuery('body,html').animate({scrollTop:370},500); return false; });});

复制代码

这里需要注意的是：perPage:20，是每页显示的个数，也就是说<li>标签的总数，必须大于这里的20。

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

Discuz智能体 · 发表于 2025-3-21 03:43:58

要实现 Discuz! 的伪翻页效果，你可以使用 jQuery 插件 `jPages` 来实现。这个插件的原理是将所有内容加载到页面中，然后通过隐藏和显示来控制翻页效果。以下是一个完整的实现步骤和代码示例：

### 1. 引入 jQuery 和 jPages 插件
首先，你需要在页面中引入 jQuery 和 jPages 插件。你可以通过以下方式引入：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jPages/0.7.3/jPages.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jPages/0.7.3/jPages.min.css">

复制代码

### 2. HTML 结构
接下来，你需要准备一个包含所有内容的容器和一个用于分页控制的容器。例如：

<div id="itemContainer">
<div class="item">内容1</div>
<div class="item">内容2</div>
<div class="item">内容3</div>
</div>
<div class="holder"></div>

复制代码

### 3. 初始化 jPages 插件
在页面加载完成后，初始化 jPages 插件。你可以通过以下代码来实现：

jQuery(function() {
jQuery("div.holder").jPages({
containerID: "itemContainer", // 父级定义的ID名
perPage: 20, // 每页显示的数量
previous: "上一页",
next: "下一页"
});
// 点击翻页按钮后滚动到指定位置
jQuery("div.holder").click(function() {
jQuery('body,html').animate({scrollTop: 370}, 500);
return false;
});
});

复制代码

### 4. CSS 样式
为了让翻页效果更加美观，你可以添加一些 CSS 样式：

.item {
padding: 10px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
.holder {
text-align: center;
margin-top: 20px;
}
.holder a {
padding: 5px 10px;
margin: 0 5px;
border: 1px solid #ccc;
text-decoration: none;
color: #333;
}
.holder a:hover {
background-color: #f0f0f0;
}

复制代码

### 5. 注意事项
- `perPage: 20` 表示每页显示 20 个内容项。你需要确保 `#itemContainer` 中的内容项总数大于这个数字。
- 如果你想要实现渐入渐出效果，可以在 `jPages` 的配置中添加动画效果，或者使用 CSS 过渡效果来实现。

### 6. 完整示例
以下是一个完整的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪翻页示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jPages/0.7.3/jPages.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jPages/0.7.3/jPages.min.css">
<style>
.item {
padding: 10px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
.holder {
text-align: center;
margin-top: 20px;
}
.holder a {
padding: 5px 10px;
margin: 0 5px;
border: 1px solid #ccc;
text-decoration: none;
color: #333;
}
.holder a:hover {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="itemContainer">
<div class="item">内容1</div>
<div class="item">内容2</div>
<div class="item">内容3</div>
</div>
<div class="holder"></div>
<script>
jQuery(function() {
jQuery("div.holder").jPages({
containerID: "itemContainer", // 父级定义的ID名
perPage: 20, // 每页显示的数量
previous: "上一页",
next: "下一页"
});
// 点击翻页按钮后滚动到指定位置
jQuery("div.holder").click(function() {
jQuery('body,html').animate({scrollTop: 370}, 500);
return false;
});
});
</script>
</body>
</html>