文档章节

jQuery分页插件代码

墙头草
 墙头草
发布于 2012/01/11 09:52
字数 1021
阅读 517
收藏 6
后台将查询出来的内容全部显示到页面上,这个插件要控制这些内容,使其一页一页显示。有上一页,下一页,首页,尾页的功能。在第一页时,上一页,首页要隐藏。在最后一页时,尾页,下一页要隐藏。一次只显示几个按钮,当点击当次最后一个按钮时,显示后面几个。

 接下来简单说一下编码过程:

首先可以大胆的先写下以下的代码:

// 为了更好的兼容性,开始前有个分号
;(
function($){ // 此处将$作为匿名函数的形参
}
)(jQuery) // 将jQuery作为实参传递给匿名函数

这段代码大家应该不陌生,就是javascript的神级特性---闭包。这也是jQuery插件的常见结构。为什么要使用闭包来作这jQuery的常用结构呢,一来既可以避免内部临时变量影响全局空间,又可以在插件内部继续使用$作为jQuery的别名。

接下来就是在这个结构里面写自己的方法了,jQuery提供了两种方式可以在jQuery里面扩展方法。打开jQuery API,找到插件机制,可以看到两个方法

  •  jQuery.extend(object)  扩展jQuery对象本身。用来在jQuery命名空间上增加新函数。
  •  jQuery.fn.extend(object)  扩展 jQuery 元素集来提供新的方法(通常用来制作插件)。
从上面可以看到jQuery.extend(object)是扩展jQuery本身,要是参照java或者C#这些语言的角度来讲,就相当于向jQuery中添加静态方法。比如说我们这样写:
jQuery.extend({
   " max ":function(){
      return max;
   } 

}) 

这样,就相当于在jQuery对象里面添加了一个max方法,调用的时候可以进行这样调用:jQuery.max()

那么,jQuery.fn是什么呢,打开jQuery源码,可以看到 jQuery.fn = jQuery.prototype。那么jQuery.fn.extend相当于在jQuery中添加成员函数。

这样子应该明白两者之间的区别了吧,静态方法可以直接调用,jQuery.max()。成员函数只有jQuery实例可以调用,比如jQuery("#my").max()。

这里我采用jQuery.extend方法。代码如下:

;(
     function($){
        $.extend({
           "easypage": function(options){
            options = $.extend({ // 参数设置
            contentclass:"contentlist", // 要显示的内容的class
            navigateid:"navigatediv", // 导航按钮所在的容器的id
            everycount:"5", // 每页显示多少个
            navigatecount:"5" // 导航按钮一次显示多少个
            }, options); 

}); 

easypage就是使用分页插件使用的方法名胸围,contentclass,navigateid,everycount,navigatecount是参数。

基本框架已经搭好了,接下来就是完成功能。 

首先是要找到要分页的内容,并生成导航按钮。代码如下:

var currentpage = 0; // 当前页    
var contents = $("."+options.contentclass); // 要显示的内容
var contentcount = contents.length; // 得到内容的个数
var pagecount = Math.ceil(contentcount/options.everycount);//计算出页数
// 拼接导航按钮
var navigatehtml = "< div id='pagefirst' class='pagefirst'><a href='javascript:void(0)'& gt;首页</a></div><div id='pagepre' class='pagepre'>< a href='javascript:void(0)'>上一页</a></div>";
for( var i = 1;i <= pagecount;i++){
   navigatehtml+='<div class="pagenavigate"><a href="javascript:void(0)">'+i+'</a></div>';
}
navigatehtml+="<div id='pagenext' class='pagenext'>< a href='javascript:void(0)'>下一页</a></div>< div id='pagelast' class='pagelast'><a href='javascript:void(0)'& gt;尾页</a></div>";
  // 加载导航按钮

$("#"+options.navigateid).html(navigatehtml)  

这段代码比较简单,就不多讲。

接下来就是就是实现一些基本的功能,这里抽取其中两个显示

//隐藏所有的导航按钮
$.extend({
"hidenavigates":function(){
//遍历所有的导航按钮
navigates.each(function(){
$(this).hide();
})
}
});
//显示导航按钮
$.extend({
"shownavigate":function(currentnavigate){
$.hidenavigates();
//当前按钮如果小于要求一次显示按钮个数的,从0开始显示
var begin = currentnavigate>=options.navigatecount?currentnavigate-parseInt(options.navigatecount):0;
//这里保证从第二页开始,按钮的个数都是2*options.navigatecount
if(begin>navigates.length-2*options.navigatecount){
begin = navigates.length-2*options.navigatecount;
}
//开始显示
for(var i = begin;i < currentnavigate+parseInt(options.navigatecount);i++){
$(navigates[i]).show();
}
}
});
 好了,基本的代码流程就是这样了,程序的源代码在附件中,具体的功能实现在源代码注释中已经解释的挺清楚了。对于闭包还有疑问的,可以查看我上一篇博客

© 著作权归作者所有

墙头草
粉丝 16
博文 145
码字总数 117172
作品 0
卢湾
私信 提问
20 个 jQuery 分页插件和教程,附带实例

在这篇文章中我们将向你介绍 20 个最棒的 jQuery 分页插件以及教程,并提供在线演示。 1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页、键盘和...

红薯
2012/04/04
14.9K
6
19个 jQuery 分页插件和教程,附带实例

在这篇文章中我们将向你介绍 20 个最棒的 jQuery 分页插件以及教程,并提供在线演示。 1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页、键盘和...

凯文加内特
2014/04/30
823
0
21 个最佳的 jQuery 翻页插件

jPages [ Demo || Download ] jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页、键盘和滚动浏览,延迟显示以及完全可定制的导航面板。 Easy pagination with jQuery and Ajax [...

oschina
2013/05/14
11K
12
15款提高表格操作的jQuery插件

table表格由于它的浏览器兼容性和复杂的标签嵌套方式,可以算是添加样式最困难的对象之一了。大多数前端er都把网页中的table标签替换为div,主要就是因为div要比table更容易添加CSS样式。但是...

鉴客
2010/08/12
5.8K
1
9款开发者值得一试的jQuery全新应用

jQuery是一个非常给力的JS框架,也因其使用方便而诞生了无数的jQuery应用插件,今天向大家分享9款全新的jQuery插件,前段开发者应该会比较喜欢。 1、jQuery图标选项卡上下滑动切换 这是一款非...

yykj
2013/10/28
822
5

没有更多内容

加载失败,请刷新页面

加载更多

怎样在磁盘上查找MySQL表的大小?这里有答案

导读 我想知道 MySQL 表在磁盘上占用多少空间,但看起来很琐碎。不应该在 INFORMATION_SCHEMA.TABLES 中提供这些信息吗?没那么简单! 我想知道 MySQL 表在磁盘上占用多少空间,但看起来很琐碎...

问题终结者
17分钟前
5
0
jQuery load() 方法实现加载远程数据

jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据,并把返回的数据放入被选元素中。 语法: $(selector).load(URL,data,callback);必需的 URL 参数规定您希望加载的...

前端老手
18分钟前
3
0
Spring Boot缓存实战 Redis 设置有效时间和自动刷新缓存-2

问题 上一篇Spring Boot Cache + redis 设置有效时间和自动刷新缓存,时间支持在配置文件中配置,说了一种时间方式,直接扩展注解的Value值,如: @Override@Cacheable(value = "people#${s...

xiaolyuh
26分钟前
9
0
怎样在磁盘上查找MySQL表的大小?这里有答案

我想知道 MySQL 表在磁盘上占用多少空间,但看起来很琐碎。不应该在 INFORMATION_SCHEMA.TABLES 中提供这些信息吗?没那么简单! 我想知道 MySQL 表在磁盘上占用多少空间,但看起来很琐碎。不应...

Linux就该这么学
51分钟前
5
0
Redis

一、Redis支持的几种数据类型:字符串、List、SET、HASH、ZSET 二、Redis的缓存技术主要是为了降低关系数据库的负载并减少网站成本 三、在Redis里面,被MULTI命令和EXEC命令包围的所有命令会...

BobwithB
53分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部