jquery分页插件的思路和步骤分享给大家,本分页插件功能很简单,但是却很实用,不想其他插件似的,功能一大堆。好了,废话不多说,还是看正文吧
工作需要一个JS分页插件,心想自己动手写一个吧,一来上网找一个不清楚代码结构的,出了问题难以解决,而且网上的插件所包含的功能太多,有些根本用不到,就没必要加载那段JS,二来想起没写过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对象里面添加了一个max方法,调用的时候可以进行这样调用:jQuery.max()
那么,jQuery.fn是什么呢,打开jQuery源码,可以看到 jQuery.fn = jQuery.prototype。那么jQuery.fn.extend相当于在jQuery中添加成员函数。
这样子应该明白两者之间的区别了吧,静态方法可以直接调用,jQuery.max()。成员函数只有jQuery实例可以调用,比如jQuery("#my").max()。
这里我采用jQuery.extend方法。代码如下:
easypage就是使用分页插件使用的方法名,contentclass,navigateid,everycount,navigatecount是参数。
基本框架已经搭好了,接下来就是完成功能。
首先是要找到要分页的内容,并生成导航按钮。代码如下:
接下来就是就是实现一些基本的功能,这里抽取其中两个显示
好了,基本的代码流程就是这样了,程序的源代码在附件中,具体的功能实现在源代码注释中已经解释的挺清楚了。对于闭包还有疑问的,可以查看我上一篇博客,谈谈javascript闭包。
下面总结一下jQuery插件的基本要点,呵呵,从锋利的jQuery中摘录出来的。
•插件的文件名推荐为 jquery.[插件名].js,例如jquery.color.js
• 所有的对象方法都应当附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身上
•在插件内部,this指向的是当前通过选择器获取的jQuery对象,而不像一般的方法那样,例如click()方法,内部的this指向的是DOM元素
•可以通过this.each来遍历所有元素
•所有的方法或函数插件,都应当以分号结尾,否则压缩时可能出问题,有的为了更加稳妥些,在插件的开始处加上一个分号
•插件应该返回一个jQuery对象,这样可以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量,例如字符串或者数组等
•尽量利用闭包技巧历来避免变量名的冲突
因为第一次写jQuery插件,可能会有一些地方说的不对,请大家包涵。
新闻热点
疑难解答