`
happyqing
  • 浏览: 3198055 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery分页插件simplePagination.js

阅读更多

 

主页及文档

http://flaviusmatis.github.io/simplePagination.js/

下载地址

https://github.com/flaviusmatis/simplePagination.js

 

效果图:

 

<!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" />
<link type="text/css" rel="stylesheet" href="simplePagination.css"/>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.simplePagination.js"></script>
<title>分页测试</title>
<script type="text/javascript">
$(function() {
    var selector = "#pageDiv";
    $(selector).pagination({
        //items: 100,
        //itemsOnPage: 10,
        pages: 10,
        edges: 1,
        displayedPages: 3,
        cssStyle: 'light-theme',
        prevText: '<',
	nextText: '>',
        onPageClick: changePage
    });
});

function changePage(index){
	//alert(index);
}
</script>
</head>
<body>
<div id="pageDiv"></div>
</body>
</html>

 

上一页、下一页变灰

jquery.simplePagination.js

找到

if (options.classes) {
	$link.addClass(options.classes);
}

 

修改为

if (options.classes) {
	if("current" == $link.attr("class")){
		$link.css({"background": "#cccccc", "border-color": "#cccccc"});
	}
	$link.addClass(options.classes);
}

 

  • 大小: 1.4 KB
  • 大小: 825 Bytes
分享到:
评论

相关推荐

    simplePagination.js:一个简单的jQuery分页插件

    **简单jQuery分页插件——simplePagination.js** 在网页开发中,当数据量过大时,为了提高用户体验,通常会采用分页的方式展示信息。`simplePagination.js` 是一个轻量级、易于使用的jQuery分页插件,它允许开发者...

    简单实用的jquery分页插件

    一个非常简洁漂亮的分页插件效果,附件里提供了三个效果,可供给懒人分享使用。代码简洁,使用方法简单: ... 3、在网页结束的底部调用jquery库以及jquery.simplePagination.js插件和lanrenzhijia.js即可

    前端项目-simplePagination.js.zip

    本项目“simplePagination.js”是一个基于jQuery的轻量级分页插件,它旨在简化网页的分页实现,提供良好的用户体验。这个插件具有3种预设的CSS主题,以及对Bootstrap框架的良好兼容性,能够轻松地与Bootstrap布局...

    jquery 分页插件,simplePagination

    本篇文章将深入探讨jQuery分页插件,特别是"simplePagination",并介绍与之相关的jQuery库和技术。 首先,jQuery分页插件如`jquery.page`和`jquery.simplePagination`是用于在网页中实现分页功能的工具。它们通过...

    四种jQuery+bootstrap分页效果插件.rar

    这个"四种jQuery+bootstrap分页效果插件.rar"压缩包文件包含了四个不同的jQuery和Bootstrap分页插件,每个都有其独特的特性和应用场景。 首先,我们来了解一下jQuery。jQuery是一个轻量级、高性能的JavaScript库,...

    jQuery SimplePagination分页插件

    jQuery SimplePagination是一款轻量级的分页插件,专为jQuery设计,用于在网页上实现高效、易用的分页功能。它允许开发者通过简单的配置就能实现多样化的分页效果,提升用户体验,尤其是在数据量较大的网页应用中,...

    JQuery分页,使用JQuery分页插件

    **jQuery分页插件详解** 在网页开发中,分页是一种常见的数据展示方式,尤其当数据量过大,一次性加载所有内容会影响页面性能时,分页就显得尤为重要。jQuery,作为一个轻量级、高效的JavaScript库,提供了许多插件...

    多款漂亮的jquery分页插件特效

    jQuery分页插件能够帮助开发者轻松实现各种美观且功能丰富的分页效果。下面我们将详细探讨多款漂亮的jQuery分页插件及其特效。 1. **Bootstrap Pagination** Bootstrap是一个流行的前端开发框架,它的分页组件提供...

    jquery simplePagination简单的自动分页

    `jQuery simplePagination`是一个轻量级的jQuery插件,专门用于实现网页上的自动分页功能。它使得开发者无需编写复杂的分页逻辑,只需少量代码就能轻松实现高效、美观的分页效果。 ### 插件简介 `jQuery ...

    jquery - pagination 分页.rar

    5. **插件使用**:jQuery有多种分页插件可供使用,如jQuery Pagination Plugin、jQuery SimplePagination等。这些插件通常提供现成的分页模板和配置选项,可以快速实现分页功能。如果这个压缩包包含了一个分页插件,...

    jQuery分页插件

    2. **引入分页插件**:选择合适的jQuery分页插件,例如jQuery Pagination、jQuery SimplePagination等,并将对应的CSS和JS文件引入到HTML中。 ```html &lt;link rel="stylesheet" href="css/pagination.css"&gt; ...

    jQuery分页

    在实际应用中,有一些流行的jQuery分页插件,如jQuery Pagination Plugin、jQuery SimplePagination、Bootstrap Pagination等。这些插件提供了丰富的选项和定制化能力,可以满足各种复杂的需求。 总的来说,jQuery...

    15个精美的jq分页插件

    而jQuery分页插件则是在jQuery基础上进一步扩展,提供了便捷的分页功能。 1. **Bootstrap Pagination**:基于Bootstrap框架,提供多种样式和主题,易于自定义,适应性强。 2. **jQuery Paginate**:轻量级插件,...

    一个简单的jquery分页

    **jQuery分页插件简介** 在网页开发中,分页是一种常见的数据展示方式,尤其当数据量过大,一次性加载所有内容会影响页面性能时,分页就显得尤为重要。jQuery,作为一个轻量级、功能丰富的JavaScript库,提供了许多...

    jquery分页

    **jQuery分页插件详解** 在网页开发中,分页是一种常见的数据展示方式,尤其当数据量过大时,为了提高用户体验,通常会采用分页来分割数据,每次只加载一部分内容,用户可以逐页浏览。jQuery作为一个轻量级、功能...

    JQuery排序分页

    二、jQuery分页 对于分页功能,可以使用jQuery插件如`jQuery.pagination`或者`jQuery.simplePagination`。这里以`jQuery.simplePagination`为例,介绍如何实现分页: 1. 引入jQuery库和simplePagination插件: ``...

    jQuery插件simplePagination的使用方法示例

    jQuery插件simplePagination是一种用于实现页面分页的轻量级工具,它可以帮助开发者轻松地将大量数据分成多个小块,以便用户能够逐步浏览。在本文中,我们将深入探讨如何使用simplePagination来创建高效的分页功能。...

    5款分页代码JQuer

    JQuery提供了许多分页插件,如jQuery_pagination、jQuery.simplePagination等。这些插件通常包含预定义的样式和逻辑,只需几行代码即可快速集成到项目中。开发者需要了解如何引入插件、设置参数(如每页显示条数、...

    ajax分页

    同时,存在许多jQuery分页插件,如jQuery Paginate、Bootstrap Paginator等,它们提供开箱即用的分页功能。 3. **前端框架集成**:对于使用Vue、React或Angular等现代前端框架的项目,框架内置的Ajax功能和组件库...

    js 分页

    // 更新列表后,分页插件会自动更新状态 } }); ``` 以上就是JavaScript实现分页的基本思路和示例代码。在实际项目中,还需要考虑更多的细节,如错误处理、缓存、SEO友好等。希望这个介绍能帮助你理解和实现...

Global site tag (gtag.js) - Google Analytics