使用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的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
JavaScript弹窗基础篇
Apr 27 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
微信小程序实现评论功能
Nov 28 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 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读取30天之内的根据算法排序的代码
2008/04/06 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
使用PHP遍历文件夹与子目录的函数代码
2011/09/26 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
javascript中对对层的控制
2006/12/29 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
vue elementui form表单验证的实现
2018/11/11 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
linux系统使用python监测系统负载脚本分享
2014/01/15 Python
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
详解Python中的动态属性和特性
2018/04/07 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
纯CSS实现设置半个字符的样式
2014/07/03 HTML / CSS
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
新闻编辑专业毕业自荐书范文
2014/02/05 职场文书
二手房买卖协议书
2014/04/10 职场文书
捐助倡议书范文
2014/04/15 职场文书
网络妈妈观后感
2015/06/08 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js