分享一个自己动手写的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 相关文章推荐
jQuery创建自己的插件(自定义插件)的方法
Jun 10 Javascript
javascript奇异的arguments分析
Oct 20 Javascript
JavaScript词法作用域与调用对象深入理解
Nov 29 Javascript
js使下拉列表框可编辑不止是选择
Dec 12 Javascript
在JS中解析HTML字符串示例代码
Apr 16 Javascript
javascript获取flash版本号的方法
Nov 20 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 Javascript
vue-router 控制路由权限的实现
Sep 24 Javascript
JS实现购物车基本功能
Nov 08 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.ini中文版
2006/10/09 PHP
php获取错误信息的方法
2015/07/17 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
ext form 表单提交数据的方法小结
2008/08/08 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
python调用java的jar包方法
2018/12/15 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
Python requests上传文件实现步骤
2020/09/15 Python
css3学习心得分享
2013/08/19 HTML / CSS
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
阿里旅行:飞猪
2017/01/05 全球购物
音乐系毕业生自荐信
2013/10/27 职场文书
民间借贷借条范本
2015/05/25 职场文书
丧事主持词
2015/07/02 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书