分享一个自己动手写的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 相关文章推荐
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
jquery实现图片随机排列的方法
May 04 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 Javascript
详解AngularJS中ng-src指令的使用
Sep 07 Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 Javascript
原生JS 购物车及购物页面的cookie使用方法
Aug 21 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
ligerUI---ListBox(列表框可移动的实例)
Nov 28 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
详解Vue中使用Axios拦截器
Apr 22 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 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
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
php.ini中的request_order推荐设置
2015/05/10 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
繁简字转换功能
2006/07/19 Javascript
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
python 修改本地网络配置的方法
2019/08/14 Python
python将字母转化为数字实例方法
2019/10/04 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
python反转列表的三种方式解析
2019/11/08 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
校长就职演讲稿
2014/01/06 职场文书
法学个人求职信范文
2014/01/27 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
大学生个人学年总结
2015/02/15 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
法制教育讲座心得体会
2016/01/14 职场文书