jquery插件封装
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.pageInit
{
padding: 5px 10px;
border: 1px solid #ff9600;
text-decoration: none;
color: #ff6500;
margin-left: 10px;
}
.pageSelected
{
padding: 5px 10px;
border: 1px solid #ff6500;
text-decoration: none;
color: #ff6500;
background: #ffbe94;
margin-left: 10px;
}
</style>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/JScript1.js" type="text/javascript"></script>
<script>
$(function () {
console.log($("table tbody tr").length);
//类级别 ，通过jQuery访问（即$）
//$.simplePaging({ table: $("table"), pageSize: 5, currentPage: 0 });
//对象级别，通过对象访问（即$("table")）
$("table").simplePaging({ pageSize: , currentPage: });
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<td>
第一列
</td>
<td>
第二列
</td>
<td>
第三列
</td>
<td>
第四列
</td>
<td>
第五列
</td>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</body>
</html>
jQuery插件（文件名：JScript.js）
/**
* 插件内部方法，外部无法访问，要求：table的绘制需要规范，即table需要采用如下格式:
* <table>
* <thead>
* </thead>
* <tbody>
* </tbody>
* </table>
* 说明：本分页函数仅对tbody中的行进行分页显示
*
* @param {} table table对象 。 必须参数
* @param {} pageSize 每页显示的行数 。必选参数
* @currentPage 当前页，索引值从0开始，默认值为0,即0代表第一页。 可选参数
*/
(function ($) {
////类级别 ，通过jQuery访问（即$），访问方式如：$.simplePaging({ table: $("table"), pageSize: 5, currentPage: 0 });
// var defaults = {
// mytable: null,
// pageSize: 5,
// currentPage: 0
// };
// $.extend({
// simplePaging: function (options) {
// $.extend(defaults, options); //使用jQuery.extend 覆盖插件默认参数
// return paging(options.mytable, options.pageSize, options.currentPage);
// }
// }); /*对象级别，通过对象访问（即$("table")） 访问方式如：$("table").simplePaging({ pageSize: 6, currentPage: 1 });*/
var defaults = {
pageSize: ,
currentPage:
};
$.fn.simplePaging = function (options) {
var opts = $.extend({}, defaults, options); //使用jQuery.extend 覆盖插件默认参数
return this.each(function () { //这里的this 就是 jQuery对象
//遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom
//根据参数来设置 dom的样式
paging($this, opts.pageSize, opts.currentPage);
});
};
//插件内部方法，外部无法访问
function paging(table, pageSize, currentPage) {
var $table = $(table); //表格对象
if (currentPage == null || currentPage < ) {
currentPage = ;
}
var sumRows = $table.find('tbody tr').length; //总行数
var sumPages = Math.ceil(sumRows / pageSize); //总页数
if (sumPages == currentPage) {
currentPage--;
}
//默认所有行都隐藏，然后根据分页显示
$table.find('tbody tr').hide().slice(currentPage * pageSize, (currentPage + ) * pageSize).show();
//避免多次调用产生重复的页码
$table.next("div[tablePagingDiv]").remove();
if (sumPages > ) {
$table.bind('paging', function () {
//默认所有行都隐藏，然后根据分页显示
$table.find('tbody tr').hide().slice(currentPage * pageSize, (currentPage + ) * pageSize).show();
});
//页码div
var $pager = $('<div tablePagingDiv="" style="height:40px;line-height:40px;"></div>');
for (var pageIndex = ; pageIndex < sumPages; pageIndex++) { $('<a href="#"><span>' + (pageIndex + ) + '</span></a>').bind('click', { 'newPage': pageIndex }, function (event) {
currentPage = event.data['newPage'];
$(this).addClass('pageSelected').siblings().removeClass('pageSelected');
//为每一个要显示的页数上添加触发分页函数
$table.trigger('paging');
}).appendTo($pager);
$pager.append(" ");
}
//添加初始化css
$('a', $pager).addClass('pageInit');
$('a:eq(' + currentPage + ')', $pager).addClass('pageSelected').siblings().removeClass('pageSelected');
$pager.insertAfter($table);
//在table上触发paging事件
$table.trigger('paging');
}
}
})(jQuery);
jquery插件封装的更多相关文章
- 最简单的原生js和jquery插件封装
最近在开发过程中用别人的插件有问题,所以研究了一下,怎么封装自己的插件. 如果是制作jquery插件的话.就将下面的extend方法换成 $.extend 方法,其他都一样. 总结一下实现原理: 将 ...
- 【jQuery】jquery插件封装
扩展jQuery插件开发的基本知识,最佳做法和常见的陷阱. 入门 编写一个jQuery插件开始于给jQuery.fn加入新的功能属性,此处添加的对象属性的名称就是你插件的名称: jQuery.fn ...
- jQuary总结11:jQuery插件封装---jQuery封装 手风琴 动画插件
完整代码下载点击我的GitHub: https://github.com/XingJYGo/jquery-accordion 1 手风琴的效果展示如下: 2 封装插件目录结构如下: 主要包括:HTML ...
- jquery插件封装成seajs模块
jquery直接在html中引入. jquery插件修改为: define(function (require, exports, moudles) { return function (jquery ...
- jQuery插件封装系列（一）—— 金额录入框
基于jQuery原型封装数值录入框,禁止录入.粘贴非数值字符 (function ($) { // 数值输入框 $.fn.numbox = function (options) { var type ...
- jquery插件封装思路整理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- (jQuery 插件)封装容器的表单为json对象
下面代码可以把一个页面容器中的表单元素封装成一个json对象. (function($){ $.fn.serializeObject=function(){ var inputs=$(this).fi ...
- jQuery 插件封装的方法
方式1.$.fn.xxx ==>针对元素添加方法: ;(function ($) { $.fn.myPlugin = function () { //你自己的插件代码 }; })(jQuer ...
- jquery 插件封装模板
//插件编写模板 ;(function ($) { $.fn.plugIn = function ( opt ) { var def = { //这里填写自定义的参数例如: event : 'clic ...
随机推荐
- CSS3-loading动画（五）
CSS3-loading加载动画 在线示例demo:http://liyunpei.xyz/loading.html 之前发了四篇,二十二个效果,今天再分享六个效果,总计二十八个效果. 二十三.效果二 ...
- JS - 实现简单易用的倒计时 x 天 x 时 x 分 x 秒
<script> (function () { var tian = document.getElementsByClassName('JS-tian')[0]; var shi = do ...
- C语言代码训练（一）
今天我们先来讲解一道C语言的经典例题,也是从零开始系列中的一道课后练习题. 请用控制台程序绘制如下图案. 循环经典例题 分析情况 这个题目是要求打印30行"*",每行打印的个数不同 ...
- anaconda 下多版本Python 安装说明
网上针对多版本的Python兼容安装的文章逐渐增多,都是大家在实践中总结的经验.本人的安装经过几次的反复实验还是觉得其中一种更为方便. 有人的安装方法是: 1. 先安装一个版本的python(一般先安 ...
- ES6中的Symbol类型
前面的话 ES5中包含5种原始类型:字符串.数字.布尔值.null和undefined.ES6引入了第6种原始类型——Symbol ES5的对象属性名都是字符串,很容易造成属性名冲突.比如,使用了一个 ...
- docker - 由于docker swarm子网与host机器网络冲突导致的container通信问题的解决方案
背景 近期,公司网络要迁移到新的网段,所以原来在服务器上面搭建的docker swarm需要重新构建... 拿到新的服务器地址看了一下,“10.xxx.xxx.xxx" ... 纳尼,这IP ...
- Fiddler基础使用一之捕获https请求
fiddler抓包工具: http协议cookieFiddler是一个调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的"进出"Fiddle ...
- business meeting
Metting are all about discussions . discussion expression 开始会议 Let's get started We need to discuss. ...
- 奇葩app大盘点，你知道几个
1.I'm Rich 这个App最奇葩.不仅奇葩,还无聊.炫富.浮夸,曾经荣耀一时的"劳资是土豪"应用,售价999.99美元,功能和它的简介一样粗暴,999美元买来的红钻石就是土豪 ...
- 如何把我的Java程序变成exe文件？
JAVA是一种“跨平台”的语言,拥有“一次编写,处处运行”的特点,让它成为当今IT行业,必不可少的一门编程语言.每一个软件开发完成之后,应该大家都需要打包程序并发送给客户,常见的方式:java程序打成 ...