分享一个自己动手写的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 相关文章推荐
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
Jquery api 速查表分享
Jan 12 Javascript
纯JavaScript实现实时反馈系统时间
Oct 26 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
javascript运行机制之执行顺序理解
Aug 03 Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 Javascript
微信小程序调用后台service教程详解
Nov 06 Javascript
JavaScript中的Proxy对象
Nov 27 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 curl的深入解析
2013/06/02 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
php使用codebase生成随机数
2014/03/25 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
php for 循环使用的简单实例
2016/06/02 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python访问MySQL封装的常用类实例
2014/11/11 Python
在Python中使用列表生成式的教程
2015/04/27 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
python保存文件方法小结
2018/07/27 Python
Python hashlib模块实例使用详解
2019/12/24 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
Python类的动态绑定实现原理
2020/03/21 Python
keras分类之二分类实例(Cat and dog)
2020/07/09 Python
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
经典优秀个人求职自荐信格式
2013/09/25 职场文书
优秀研究生自我鉴定
2013/12/04 职场文书
小学班主任寄语大全
2014/04/04 职场文书
法院信息化建设方案
2014/05/21 职场文书
历史博物馆观后感
2015/06/05 职场文书
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python