使用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 相关文章推荐
使用Jquery打造最佳用户体验的登录页面的实现代码
Jul 08 Javascript
关于jquery input textare 事件绑定及用法学习
Apr 03 Javascript
js将json格式内容转换成对象的方法
Nov 01 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
JS浮点数运算结果不精确的Bug解决
Aug 01 Javascript
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中json_encode中文编码问题分析
2011/09/13 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
php计算税后工资的方法
2015/07/28 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
Javascript基础教程之数组 array
2015/01/18 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
js创建数组的简单方法
2016/07/27 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
2020/07/27 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
Django中处理出错页面的方法
2015/07/15 Python
Python装饰器用法示例小结
2018/02/11 Python
python使用webdriver爬取微信公众号
2018/08/31 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
绿色环保口号
2014/06/12 职场文书
转让协议书范本
2014/09/13 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL
Python list列表删除元素的4种方法
2021/11/01 Python