分享一个自己动手写的jQuery分页插件


Posted in Javascript onAugust 28, 2014

工作需要一个JS分页插件,心想自己动手写一个吧,一来上网找一个不清楚代码结构的,出了问题难以解决,而且网上的插件所包含的功能太多,有些根本用不到,就没必要加载那段JS,二来想起没写过jQuery插件,就当练一下手了,好了,先看结果:

 简单说一下这个插件所要实现的功能

 后台将查询出来的内容全部显示到页面上,这个插件要控制这些内容,使其一页一页显示。有上一页,下一页,首页,尾页的功能。在第一页时,上一页,首页要隐藏。在最后一页时,尾页,下一页要隐藏。一次只显示几个按钮,当点击当次最后一个按钮时,显示后面几个。

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

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

//为了更好的兼容性,开始前有个分号
;(
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)'>首页</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)'>尾页</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();
}
} 
});

 好了,基本的代码流程就是这样了,程序的源代码在附件中,具体的功能实现在源代码注释中已经解释的挺清楚了。对于闭包还有疑问的,可以查看我上一篇博客,谈谈javascript闭包。

下面总结一下jQuery插件的基本要点,呵呵,从锋利的jQuery中摘录出来的。

•插件的文件名推荐为 jquery.[插件名].js,例如jquery.color.js
• 所有的对象方法都应当附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身上

•在插件内部,this指向的是当前通过选择器获取的jQuery对象,而不像一般的方法那样,例如click()方法,内部的this指向的是DOM元素

•可以通过this.each来遍历所有元素
•所有的方法或函数插件,都应当以分号结尾,否则压缩时可能出问题,有的为了更加稳妥些,在插件的开始处加上一个分号
•插件应该返回一个jQuery对象,这样可以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量,例如字符串或者数组等
•尽量利用闭包技巧历来避免变量名的冲突
 

因为第一次写jQuery插件,可能会有一些地方说的不对,请大家包涵。

Javascript 相关文章推荐
javascript 中that的含义示例介绍
May 14 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
javascript图片延迟加载实现方法及思路
Dec 31 Javascript
JS中JSON对象和String之间的互转及处理技巧
Apr 06 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 #Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 #Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 #Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 #Javascript
JavaScript实现的in_array函数
Aug 27 #Javascript
JavaScript AJAX之惰性载入函数
Aug 27 #Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 #Javascript
You might like
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
jQuery 树形结构的选择器
2010/02/15 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
常用的javascript设计模式
2017/01/11 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
Python设计模式之观察者模式实例
2014/04/26 Python
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
SVM基本概念及Python实现代码
2017/12/27 Python
Python使用combinations实现排列组合的方法
2018/11/13 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
Python制作动态字符图的实例
2019/01/27 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
Python实现AI换脸功能
2020/04/10 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
销售合作意向书范本
2015/05/08 职场文书
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android
一条慢SQL语句引发的改造之路
2022/03/16 MySQL