<link rel="stylesheet" href="css/jPages.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jPages.js"></script>
<link rel="stylesheet" href="css/animate.css">
<!-- Future navigation panel -->
<div class="holder"></div>
<!-- Item container (doesn't need to be an UL) -->
<ul id="itemContainer">
<!-- Items -->
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
...
</ul>
$(function(){
$("div.holder").jPages({
containerID : "itemContainer"
});
});
<!-- navigation panel -->
<div class="holder">
<a class="jp-previous jp-disabled">← previous</a>
<a class="jp-current">1</a>
<span class="jp-hidden">...</span>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>
<a class="jp-hidden">6</a>
<a class="jp-hidden">7</a>
<a class="jp-hidden">8</a>
<a class="jp-hidden">9</a>
<span>...</span>
<a>10</a>
<a class="jp-next">next →</a>
</div>
/* when document is ready */
$(function(){
/* initiate the plugin */
$("div.holder").jPages({
containerID : "itemContainer",
first: '首页',
last: '尾页',
previous: '上页',
next: '下页',
perPage: 12,
startPage: 1,
startRange: 2,
midRange: 3,
endRange: 2,
animation: 'wobble',
keyBrowse: true,
callback : function( pages, items ){
/* lazy load current images */
items.showing.find("img").trigger("turnPage");
/* lazy load next page images */
items.oncoming.find("img").trigger("turnPage");
}
});
});
相关推荐
**jQuery分页插件**是Web开发中常用的一种工具，用于在大量数据中实现高效的页面导航，提升用户体验。本资源包含一个演示说明，使得理解和应用变得更加直观和简单。以下将详细解析jQuery分页插件的核心知识点及其...
jQuery jPages是一款强大的jQuery插件，专为实现网站分页功能而设计。它不仅提供了基本的页面导航，还引入了许多高级特性和定制选项，使得网页的分页体验更加友好和高效。下面将详细介绍jPages的主要功能和使用方法...
jPages是一个客户端分页插件... jPages is a client-side pagination plugin but it gives you a lot more features comparing to most of the other plugins for this purpose, such as auto page turn, key and ...
《jQuery分页图片切换插件jPages深度解析与应用》 在网页设计中，图片展示是不可或缺的一部分，尤其是在产品展示、摄影集或者画廊类网站中。为了提高用户体验，合理组织大量的图片信息，jQuery分页图片切换插件...
在提供的参考实例中，你可以找到详细的使用示例和配置说明，网址为：[http://www.jq22.com/jquery-info5697](http://www.jq22.com/jquery-info5697)。这个例子将演示如何设置分页插件的基本用法和常见配置，帮助你...
**jQuery分页插件jPages详解** 在网页开发中，数据分页是一种常见的优化加载速度和提高用户体验的方法。尤其在处理大量数据时，分页可以让用户更流畅地浏览信息，而不是一次性加载所有内容。`jQuery`是JavaScript的...
jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)
**jQuery Pagination 分页插件详解** 在Web开发中，数据量过大的页面通常需要实现分页功能，以提高用户体验和加载速度。jQuery Pagination是一款轻量级、易用的前端分页插件，它能帮助开发者快速实现高效且美观的...
jQuery打印插件----jQuery.print.js实现网页的打印功能，亲测有效
二、jQuery表格分页插件 jQuery有多个插件用于实现表格分页，例如： 1. jQuery DataTables：这是一个强大的数据表插件，它提供了分页、排序、搜索和过滤等功能。DataTables支持自定义分页样式，同时提供了多种数据...
**jQuery摄像头插件jquery-webcam-plugin** 在网页开发中，集成摄像头功能可以帮助用户实时捕捉图像，广泛应用于在线证件照上传、视频聊天、虚拟试衣间等场景。`jQuery webcam plugin`是一个优秀的JavaScript库，它...
jQuery静态分页插件是一种广泛应用于网页开发中的组件，它能帮助开发者轻松地在大量数据中实现分页显示，提高用户体验。在这个名为"jQuery静态分页插件.zip"的压缩包中，包含了实现这一功能所需的全部资源。接下来，...
3. `jquery-1.2.6.js`：这是jQuery库的一个版本，为分页插件提供了基础的DOM操作和事件处理功能。 4. `jquery.page.js`：这是分页插件的核心代码，实现了分页逻辑和交互功能。 接下来，我们将详细讲解jQuery分页...
本文将详细介绍一个基于jQuery编写的分页插件，以及如何利用这个插件快速实现网页的分页功能。 分页插件的核心目标是提供一种简单、易用的方式来将大量数据分割成多页，允许用户通过点击页码或导航按钮来浏览数据的...
在这个场景中，"jquery插件-文章分页插件"是一个专门为jQuery设计的轻量级组件，用于实现文章或内容的分页功能。 首先，我们来详细了解一下jQuery插件的基本结构和工作原理。jQuery插件通常是一个函数，该函数接收...
5. **自定义样式**：jQuery Mobile 分页插件支持自定义样式，你可以通过修改 CSS 样式来自定义分页按钮的外观，如颜色、大小、边框等。 6. **事件处理**：插件通常提供一些事件，如 `pagechange` 或 `pagereset`，...
**jQuery分页插件jPages详解** jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。jPages是基于jQuery的分页插件，为网页内容分页提供了简单而强大的解决方案。这个插件旨在...
jqPaginator是一款基于jQuery的简洁、高度自定义的jQuery分页组件，适用于多种应用场景。 用法很简单，首先引入jQuery和jqPaginator，之后就可以初始化分页了 $('#id').jqPaginator({ totalPages: 100, ...