使用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 相关文章推荐
document.designMode的功能与使用方法介绍
Nov 22 Javascript
让FireFox支持innerText的实现代码
Dec 01 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
分享一个原生的JavaScript拖动方法
Sep 25 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 Javascript
关于angular js_$watch监控属性和对象详解
Apr 24 Javascript
JS分页的实现(同步与异步)
Sep 16 Javascript
Vue使用NProgress的操作过程解析
Oct 10 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 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
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
php实现通过ftp上传文件
2015/06/19 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
js url传值中文乱码之解决之道
2009/11/20 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
基于wordpress的ajax写法详解
2018/01/02 Javascript
js数组去重的方法总结
2019/01/18 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
python 图片验证码代码分享
2012/07/04 Python
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
python实现各进制转换的总结大全
2017/06/18 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
Python3 中文文件读写方法
2018/01/23 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
python django生成迁移文件的实例
2019/08/31 Python
python列表的逆序遍历实现
2020/04/20 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
培训主管的岗位职责
2013/11/23 职场文书
《三袋麦子》教学反思
2014/03/02 职场文书
父母对孩子的寄语
2014/04/09 职场文书
教师个人自我评价
2015/03/04 职场文书
《我是什么》教学反思
2016/02/16 职场文书
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers