自定义jQuery翻页插件

第一次写jQuery插件。自己感觉写的也不怎么样。写jQuery插件利用的就是这个东东 jQuery.fn，例如

jQuery.fn.pluginName=function(){};

这个是我写的分页插件的样子

插件通过一个外放的函数来进行翻页操作，无论是点击前进、后退、还是改变页面大小，都会调用该函数。

先看看插件的代码结构

 1 (function ($) {
 2
 3             //存放插件所需的属性字段
 4             var PagerFields = {
 5             };
 6
 7             //插件的私有函数
 8             function setImageButtonSate() {
 9
10
11             }
12
13             //插件的公共函数
14             var methods = {
15                 _pagerFields: null,
16                 ini: function (options) {
17
18
19                 },
20                 destory: function (options) {
21                     return $(this).each(function () {
22                         var $this = $(this); $this.removeData('HGPager2');
23                     });
24                 }
25             };
26
27             //定义插件
28             $.fn.HGPager2 = function () {
29                 var method = arguments[0];
30
31                 if (methods[method]) {
32                     method = methods[method];
33                     arguments = Array.prototype.slice.call(arguments, 1);
34                 }
35                 else if (typeof (method) == 'object' || !method) {
36                     method = methods.ini;
37                 }
38                 else {
39                     $.error('Method ' + method + ' does not exist on jQuery.pluginName');
40                     return this;
41                 }
42
43                 return method.apply(this, arguments);
44             };
45         })(jQuery);

这个结构是按照《深入理解jQuery插件开发》文中的模式(这篇文章个人感觉不错的，一开始学习写插件的朋友建议先看看这篇文章)。整个插件的定义、以及它的私有变量函数都被包在$(function(){});里面了。用这种方式即可以保护插件私有变量的安全性，从另一个角度看也可以避免了变量名重复而导致的麻烦。如果把私有变量放在$.fn.HGPager2 = function () {}这个函数里面的话，会有弊端，要是插件外放了一些函数来获取插件的一些参数信息（如当前的页码，当前页大小诸如此类）就不能获取到确切的参数信息。因为根据js的作用域理论之前构造插件时的参数信息与后来调用函数进入的作用域是不一样的。上面的这种模式，就确保了构造插件与调用插件函数时进入的作用域是一样的。

下面再列举插件的各个部分

这是插件的私有变量，用一个PagerFields类来存放。

           var PagerFields = {pageSize: 10, //页面大小pageCount: 0,//页面数量recordCount: 0,//记录总数currentPage: 0,//当前页码pagerFunction: null //翻页时触发的调用的函数，用于读取数据。};

这个是插件的私有函数，用于设置翻页按钮的状态（按钮的图片没有上传，若是把代码直接复制粘贴运行的话没有图片的）

              function setImageButtonSate() {if (PagerFields.currentPage <= 1)$("#HG_pagerPre").css("backgroundPosition", "-3px -3px"); //grey preelse$("#HG_pagerPre").css("backgroundPosition", "-3px -19px"); // black preif (PagerFields.currentPage == PagerFields.pageCount)$("#HG_pagerNext").css("backgroundPosition", "-20px -3px");  //grey nextelse$("#HG_pagerNext").css("backgroundPosition", "-20px -19px"); // black next}

这个是构造插件的函数

 1                ini: function (options) {
 2                     _pagerFields = PagerFields;
 3                     return this.each(function () {
 4
 5                         var $this = $(this);
 6                         $this.text("");
 7                         $out_div = $("<div id='hg_pager_outter_div' style='margin-bottom:-10px'></div>");
 8                         $this.append($out_div);
 9                         $out_div.append("<div><span id='HG_pagerPre'  style='background-position:-3px -19px'></span></div>");
10                         $out_div.append("<div style='float:left;'><input id='HG_pageNum' type='text' value='0' readonly='readonly'/></div>");
11                         $out_div.append("<div><span id='HG_pagerNext' style='background-position:-20px -19px' ></span></div>");
12                         $out_div.append("页&nbsp;&nbsp;");
13                         $out_div.append("共<span id='HG_pageCount'>0</span>页");
14                         $out_div.append("&nbsp;&nbsp;");
15                         $out_div.append("每页<select id='HG_pagerSize'></select>个记录");
16                         $out_div.append("&nbsp;&nbsp;");
17                         $out_div.append("共有 <span id='HG_recordCount'>0</span> 个记录");
18                         $out_div.append("&nbsp;&nbsp;");
19                         $this.append("<br/>");
20
21                         $this.find("#HG_pagerPre").css("backgroundPosition", "-3px -3px");
22                         $this.find("#HG_pagerNext").css("backgroundPosition", "-20px -3px");
23
24                         if (options.pageSizes) {
25                             for (var i = 0; i < options.pageSizes.length; i++) {
26                                 $("#HG_pagerSize").append("<option>" + options.pageSizes[i] + "</option>");
27                             }
28                             _pagerFields.pageSize = options.pageSizes[0];
29                         }
30                         else {
31                             var default_page_size = [10, 30, 50];
32                             for (var i = 0; i < default_page_size.length; i++) {
33                                 $("#HG_pagerSize").append("<option>" + default_page_size[i] + "</option>");
34                             }
35                             _pagerFields.pageSize = default_page_size[0];
36                         }
37
38                         if (options.selRecord != undefined && !options.selRecord) {
39                             $("#selRecord_div").css("display", 'none');
40                         }
41
42                         if (options.pagerFuncton) {
43                             _pagerFields.pagerFunction = options.pagerFuncton;
44                         }
45
46                         if (options.recordCount) {
47                             _pagerFields.recordCount = options.recordCount;
48                             $("#HG_recordCount").text(_pagerFields.recordCount);
49                             _pagerFields.pageCount = _pagerFields.recordCount % _pagerFields.pageSize == 0 ? _pagerFields.recordCount / _pagerFields.pageSize : Math.ceil(_pagerFields.recordCount / _pagerFields.pageSize);
50                             $("#HG_pageCount").text(_pagerFields.pageCount);
51                             _pagerFields.currentPage = 1;
52                             $("#HG_pageNum").val(_pagerFields.currentPage);
53                             setImageButtonSate();
54                             _pagerFields.pagerFunction(_pagerFields.pageSize, _pagerFields.currentPage);
55                         }
56                         // setting element
57
58                         // bingding event
59                         $("#HG_pagerPre").click(function () {
60                             if (_pagerFields.currentPage <= 1) return;
61                             else _pagerFields.currentPage--;
62                             setImageButtonSate();
63                             $("#HG_pageNum").val(_pagerFields.currentPage);
64                             _pagerFields.pagerFunction(_pagerFields.pageSize, _pagerFields.currentPage);
65                         });
66
67                         $("#HG_pagerNext").click(function () {
68                             if (_pagerFields.currentPage == _pagerFields.pageCount) return;
69                             else _pagerFields.currentPage++;
70                             setImageButtonSate();
71                             $("#HG_pageNum").val(_pagerFields.currentPage);
72                             _pagerFields.pagerFunction(_pagerFields.pageSize, _pagerFields.currentPage);
73                         });
74
75                         $("#HG_pagerSize").change(function () {
76                             _pagerFields.pageSize = $this.find("option:selected").text() * 1;
77                             _pagerFields.pageCount = _pagerFields.recordCount % _pagerFields.pageSize == 0 ? _pagerFields.recordCount / _pagerFields.pageSize : Math.ceil(_pagerFields.recordCount / _pagerFields.pageSize);
78                             $("#HG_pageCount").text(_pagerFields.pageCount);
79                             _pagerFields.currentPage = 1;
80                             $("#HG_pageNum").val(1);
81                             setImageButtonSate();
82                             _pagerFields.pagerFunction(_pagerFields.pageSize, _pagerFields.currentPage);
83                         });
84                     });
85
86                 }

下面是插件的公共函数

 1                //获取当前的页码
 2                getCurrentPageIndex: function (options) {
 3
 4
 5                         return _pagerFields.currentPage;
 6                 },
 7
 8                 //获取记录的总数
 9                 getRecordCount: function (options) {
10
11                         return _pagerFields.recordCount;
12
13                 },
14
15                 //获取当前页面数量
16                 getCurrentPageCount: function (options) {
17
18                         return _pagerFields.pageCount;
19
20                 },
21
22                 //获取页面的大小
23                 getCurrentPageSize: function (options) {
24
25                         return _pagerFields.pageSize;
26
27                 }

使用示例：

 $(function () {$("#testPager").HGPager2({pageSizes: [10, 20, 30],recordCount: 123,pagerFuncton: function (size, index) {alert("size: " + size + " index: " + index);}});});function test_Click() {alert($("#testPager").HGPager2("getCurrentPageIndex")+" "+$("#testPager").HGPager2("getRecordCount")+" "+$("#testPager").HGPager2("getCurrentPageCount")+" "+$("#testPager").HGPager2("getCurrentPageSize"));}

由于本人对js作用域的理解不够透彻，此个插件采用的模式也不知道是否最适合，上述内容如有说错的，请批评指正。

自定义jQuery翻页插件相关推荐

20个强大的jQuery翻书插件【 jQuery flipbook】
许多网站使用jQuery翻书插件来展示产品目录和销售广告册子.jQuery翻页书解决方案给访客提供了方便而有效的浏览一套东西的体验.如果做得好,就如同手头有一本印刷版的册子.通过翻页书插件,你可以 ...
android 自动翻页插件,网页自动翻页Chrome插件下载
AutoPagerize是一款在谷歌浏览器上运行的网页自动翻页chrome插件,AutoPagerize插件可以让你通过鼠标滚轮翻页.当你的鼠标滚轮滚动到页面底部时,再向下就会发现下一页的内容.操作简 ...
jQuery翻页yunm.pager.js，涉及div局部刷新
前端的翻页插件有很多,bootstrap的翻页界面看起来就不错,做起来也易于上手,但应用于项目中的翻页实现还有有几个难点,分别是: 如何封装一个翻页插件,如题中的yunm.pager.js. 涉及到的 ...
DIY chrome浏览器漫画翻页插件
最近迷上了火影忍者,在爱漫画网站上看的漫画版.每看完一页都要用鼠标点一下翻页键,时间长了觉得有些不爽.要是按上下键看漫画时,按一下旁边的键,就可以翻到下一页,会舒服不少. 用的是chrome浏览器,装 ...
react封装翻页插件
插件演示今天用react封装一个翻页插件,先给大家看一下效果: 翻页插件上面的文字是从后台获取的. 插件说明这个插件有五部分组成:首页.上一页.中间显示数字.下一页.尾页.具体的功能是:如果当前页 ...
uAutoPagerize – 自动翻页插件
uAutoPagerize – 自动翻页插件 uAutoPagerize – 自动翻页插件背景 uAutoPagerize – 自动翻页插件介绍 uAutoPagerize – 自动翻页插件功能 uA ...
html jquery 翻页效果代码,jquery实现的点击翻书效果代码
本文实例讲述了jquery实现的点击翻书效果代码.分享给大家供大家参考,具体如下: 这是自写一个翻书的Js效果,基于jquery-1.4.2.min.js插件实现,还正在完善中,希望大家能喜欢,我觉得 ...
html分页自动加载,AutoPagerize插件，网页自动翻页插件，自动加载分页网站
AutoPagerize,是一款可以实现网页自动翻页的浏览器插件,该插件会自动缓存下一页网页,将翻页式的内容变为瀑布流的形式,无需手动点击翻页,即可自动链接到下一页. 用于自动加载分页网页的浏览器扩展 ...
翻页插件turn.js
老实说翻页turn.js里面的坑非常多,记得那时候项目中踩了几天都踩不完.个人建议谨慎使用下面就介绍一下最简单的入门吧~ 1.引入文件部分(注意必须要引入jQ,turn.js文件可以上网找,mode ...
vue 路由不同动画翻页插件
vue-router-page-turning https://github.com/SUNbrightness/vue-router-page-turning Project setup npm i ...

自定义jQuery翻页插件

自定义jQuery翻页插件相关推荐

最新文章

热门文章