使用jQuery.fn自定义jQuery翻页插件


Posted in Javascript onJanuary 20, 2013

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

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

这个是我写的分页插件的样子
插件通过一个外放的函数来进行翻页操作,无论是点击前进、后退、还是改变页面大小,都会调用该函数。
先看看插件的代码结构
(function ($) { 
//存放插件所需的属性字段 
var PagerFields = { 
}; 
//插件的私有函数 
function setImageButtonSate() { 
} 
//插件的公共函数 
var methods = { 
_pagerFields: null, 
ini: function (options) { 
}, 
destory: function (options) { 
return $(this).each(function () { 
var $this = $(this); $this.removeData('HGPager2'); 
}); 
} 
}; 
//定义插件 
$.fn.HGPager2 = function () { 
var method = arguments[0]; 
if (methods[method]) { 
method = methods[method]; 
arguments = Array.prototype.slice.call(arguments, 1); 
} 
else if (typeof (method) == 'object' || !method) { 
method = methods.ini; 
} 
else { 
$.error('Method ' + method + ' does not exist on jQuery.pluginName'); 
return this; 
} 
return method.apply(this, arguments); 
}; 
})(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 pre 
else 
$("#HG_pagerPre").css("backgroundPosition", "-3px -19px"); // black pre 
if (PagerFields.currentPage == PagerFields.pageCount) 
$("#HG_pagerNext").css("backgroundPosition", "-20px -3px"); //grey next 
else 
$("#HG_pagerNext").css("backgroundPosition", "-20px -19px"); // black next 
}

这个是构造插件的函数
ini: function (options) { 
_pagerFields = PagerFields; 
return this.each(function () { 
var $this = $(this); 
$this.text(""); 
$out_div = $("<div id='hg_pager_outter_div' style='margin-bottom:-10px'></div>"); 
$this.append($out_div); 
$out_div.append("<div><span id='HG_pagerPre' style='background-position:-3px -19px'></span></div>"); 
$out_div.append("<div style='float:left;'><input id='HG_pageNum' type='text' value='0' readonly='readonly'/></div>"); 
$out_div.append("<div><span id='HG_pagerNext' style='background-position:-20px -19px' ></span></div>"); 
$out_div.append("页  "); 
$out_div.append("共<span id='HG_pageCount'>0</span>页"); 
$out_div.append("  "); 
$out_div.append("每页<select id='HG_pagerSize'></select>个记录"); 
$out_div.append("  "); 
$out_div.append("共有 <span id='HG_recordCount'>0</span> 个记录"); 
$out_div.append("  "); 
$this.append("<br/>"); 
$this.find("#HG_pagerPre").css("backgroundPosition", "-3px -3px"); 
$this.find("#HG_pagerNext").css("backgroundPosition", "-20px -3px"); 
if (options.pageSizes) { 
for (var i = 0; i < options.pageSizes.length; i++) { 
$("#HG_pagerSize").append("<option>" + options.pageSizes[i] + "</option>"); 
} 
_pagerFields.pageSize = options.pageSizes[0]; 
} 
else { 
var default_page_size = [10, 30, 50]; 
for (var i = 0; i < default_page_size.length; i++) { 
$("#HG_pagerSize").append("<option>" + default_page_size[i] + "</option>"); 
} 
_pagerFields.pageSize = default_page_size[0]; 
} 
if (options.selRecord != undefined && !options.selRecord) { 
$("#selRecord_div").css("display", 'none'); 
} 
if (options.pagerFuncton) { 
_pagerFields.pagerFunction = options.pagerFuncton; 
} 
if (options.recordCount) { 
_pagerFields.recordCount = options.recordCount; 
$("#HG_recordCount").text(_pagerFields.recordCount); 
_pagerFields.pageCount = _pagerFields.recordCount % _pagerFields.pageSize == 0 ? _pagerFields.recordCount / _pagerFields.pageSize : Math.ceil(_pagerFields.recordCount / _pagerFields.pageSize); 
$("#HG_pageCount").text(_pagerFields.pageCount); 
_pagerFields.currentPage = 1; 
$("#HG_pageNum").val(_pagerFields.currentPage); 
setImageButtonSate(); 
_pagerFields.pagerFunction(_pagerFields.pageSize, _pagerFields.currentPage); 
} 
// setting element 
// bingding event 
$("#HG_pagerPre").click(function () { 
if (_pagerFields.currentPage <= 1) return; 
else _pagerFields.currentPage--; 
setImageButtonSate(); 
$("#HG_pageNum").val(_pagerFields.currentPage); 
_pagerFields.pagerFunction(_pagerFields.pageSize, _pagerFields.currentPage); 
}); 
$("#HG_pagerNext").click(function () { 
if (_pagerFields.currentPage == _pagerFields.pageCount) return; 
else _pagerFields.currentPage++; 
setImageButtonSate(); 
$("#HG_pageNum").val(_pagerFields.currentPage); 
_pagerFields.pagerFunction(_pagerFields.pageSize, _pagerFields.currentPage); 
}); 
$("#HG_pagerSize").change(function () { 
_pagerFields.pageSize = $this.find("option:selected").text() * 1; 
_pagerFields.pageCount = _pagerFields.recordCount % _pagerFields.pageSize == 0 ? _pagerFields.recordCount / _pagerFields.pageSize : Math.ceil(_pagerFields.recordCount / _pagerFields.pageSize); 
$("#HG_pageCount").text(_pagerFields.pageCount); 
_pagerFields.currentPage = 1; 
$("#HG_pageNum").val(1); 
setImageButtonSate(); 
_pagerFields.pagerFunction(_pagerFields.pageSize, _pagerFields.currentPage); 
}); 
}); 
}

下面是插件的公共函数
//获取当前的页码 
getCurrentPageIndex: function (options) { 
return _pagerFields.currentPage; 
}, 
//获取记录的总数 
getRecordCount: function (options) { 
return _pagerFields.recordCount; 
}, 
//获取当前页面数量 
getCurrentPageCount: function (options) { 
return _pagerFields.pageCount; 
}, 
//获取页面的大小 
getCurrentPageSize: function (options) { 
return _pagerFields.pageSize; 
}

使用示例
$(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作用域的理解不够透彻,此个插件采用的模式也不知道是否最适合,上述内容如有说错的,请批评指正。
Javascript 相关文章推荐
DOM节点删除函数removeChild()用法实例
Jan 12 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
Javascript中实现String.startsWith和endsWith方法
Jun 10 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
jQuery中$.grep() 过滤函数 数组过滤
Nov 22 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
微信小程序实现底部弹出模态框
Nov 18 Javascript
微信小程序实现购物车功能
Nov 18 Javascript
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 #Javascript
js+数组实现网页上显示时间/星期几的实用方法
Jan 18 #Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 #Javascript
js replace正则表达式应用案例讲解
Jan 17 #Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 #Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 #Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 #Javascript
You might like
PHP操作XML作为数据库的类
2010/12/19 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
php生成微信红包数组的方法
2019/09/05 PHP
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
jQuery垂直多级导航菜单代码分享
2015/08/18 Javascript
JavaScript实现广告弹窗效果
2016/08/09 Javascript
JS作用域深度解析
2016/12/29 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
Python读写Excel文件的实例
2013/11/01 Python
Django之模型层多表操作的实现
2019/01/08 Python
Python发展简史 Python来历
2019/05/14 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
python exit出错原因整理
2020/08/31 Python
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
个人简历自我评价
2014/01/06 职场文书
教师职称自我鉴定
2014/02/12 职场文书
服装采购员岗位职责
2014/03/15 职场文书
工程索赔意向书
2014/08/30 职场文书
售房委托书
2014/08/30 职场文书
作风整顿剖析材料
2014/09/30 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
Python Django ORM连表正反操作技巧
2021/06/13 Python
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL
Redis性能监控的实现
2021/07/09 Redis
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android