分享错误,学习生活

自己动手写jQuery分页插件

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

 

 

1.美国宣布新军事战略将重心转向亚太地区
2.春运期间极端最低温达零下5度
3.上海妇女社会地位调查结果公布
4.暖手袋发生漏液有危险
5.上海相关调查称新车内挥发性有机物严重超标
6.申城进入流感高发期
7.上海仍有部分幼儿园开设各类收费兴趣班 家长支持
8.达人秀将揭晓复赛阵容 洗碗工麻袋姐走改编路线
9.苹果侵权中国作家立案 韩寒等9人索赔1200万元
10.嘉汇广场一商务楼外墙剥落砸伤过路男子(图)
11.石岚二村小区高空抛物现象严重 多辆轿车被砸
12.女子从11家银行申领24张信用卡 透支本金45万
13.松江一家化工厂发生爆炸 一名技术工人当场死亡
14.UPS公司内鬼组团集体犯罪侵占公司运费980多万元
15.奔驰车胎漏气监测不报警
16.CBA-新疆新援能否战JR 连败北京遇强敌
17.科比30+8湖人负开拓者 詹韦休战热火三加时胜老鹰
18.英媒惊曝曼联挖角兰帕德 小贝最新内裤广告超酷造型
19.曼奇尼笑迎孙继海 英主力紧拥
20.冬运花滑庞清佟健复出夺冠
21.中国彩票年销2214亿涨33%
22.双色球26注530万分落14省市
23.安全是根本 自主品牌C-NCAP碰撞评说
24.赏豪车买车尽在车型总汇
25.蔡澜:风情万种的日本版朱茵
26.微访谈:黄觉其实是个艺术家
27.杨澜访邓婕:当家庭主妇难
28.中学女生迎新“黑丝”上阵
29.陆空三军都干过的将军
30.科比无敌1挑2!180度转体颜扣 103中51别再骂他打铁
31.2米13神塔玩出白巧绝技 湖人新体系?瞎子才忽视他
32.湖人22+15霸王8天后跌落人间 大梦鲨鱼附体?还早呢
33.纳什17助攻太阳大胜雄鹿
34.单节17分!非同级别较量 阿联渐入状态归队日子临近
35.状元秀21分骑士负开拓者
36.38岁纳什1战写65年纪录 10+17!最美就是这不老传奇
37.开拓者老大遭梦之队冷落 直言想打奥运哪怕选拔赛
38.雷霆大将右膝十字韧带撕裂 确定赛季报销择日手术
39.博格特周三回归对阵马刺 经纪人:感谢各方的支持
40.詹皇转变创造惊艳开局 哈队:谁能在内线防住他?
41.斯帅新赛季给波什两特权 龙王:当个组织者真难啊
42.连夜赶场累坏热火将士 詹姆斯:感觉像飞了趟中国
43.米勒打勇士复出?NO!再观察 斯帅:他还需要训练
44.热火迎赛季首次完整训练 斯帅惜时如金飞机上放录像
45.不再为忠诚or冠军挣扎 纳什:我愿在太阳到日落
46.石佛退居二线马刺愿供养 布莱尔:歇到季后赛再打
47.前蜂王欲组团买下母队 :我识人懂商会十分完美
48.魔兽仅5分4板仍克国王 雷霆灭马刺背靠背靠背全胜
49.赏豪车买车尽在车型总汇
50.蔡澜:风情万种的日本版朱茵
51.微访谈:黄觉其实是个艺术家
52.杨澜访邓婕:当家庭主妇难
53.中学女生迎新“黑丝”上阵
54.陆空三军都干过的将军
55.科比无敌1挑2!180度转体颜扣 103中51别再骂他打铁
56.2米13神塔玩出白巧绝技 湖人新体系?瞎子才忽视他
57.湖人22+15霸王8天后跌落人间 大梦鲨鱼附体?还早呢
58.纳什17助攻太阳大胜雄鹿
59.单节17分!非同级别较量 阿联渐入状态归队日子临近
60.状元秀21分骑士负开拓者
61.嘉汇广场一商务楼外墙剥落砸伤过路男子(图)
62.石岚二村小区高空抛物现象严重 多辆轿车被砸
63.女子从11家银行申领24张信用卡 透支本金45万
64.松江一家化工厂发生爆炸 一名技术工人当场死亡
65.UPS公司内鬼组团集体犯罪侵占公司运费980多万元
66.奔驰车胎漏气监测不报警
67.CBA-新疆新援能否战JR 连败北京遇强敌
68.科比30+8湖人负开拓者 詹韦休战热火三加时胜老鹰
69.英媒惊曝曼联挖角兰帕德 小贝最新内裤广告超酷造型
70.曼奇尼笑迎孙继海 英主力紧拥
71.冬运花滑庞清佟健复出夺冠
72.中国彩票年销2214亿涨33%
73.双色球26注530万分落14省市
74.安全是根本 自主品牌C-NCAP碰撞评说
75.赏豪车买车尽在车型总汇
76.蔡澜:风情万种的日本版朱茵

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

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

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

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

//为了更好的兼容性,开始前有个分号
;(
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 >'+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插件,可能会有一些地方说的不对,请大家包涵。

程序源文件

暂无评论

发表评论

电子邮件地址不会被公开。