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 ...
随机推荐
- 中文里带半角空格导致的Text换行问题[Unity]
0x01 问题 最近策划反映了个问题,游戏里的多行文本会出现提前换行的问题,如下图所示: 文本错误地提前换行,导致第一行文本后面有大块空白区域 通过观察可以发现,当字符串中带有半角空格,且半角空格后面 ...
- PowerShell 远程执行任务
在 linux 中我们可以使用 SSH 执行各种远程操作,同样的在 windows 平台上我们可以通过 PowerShell 获得类似的能力.本文将介绍通过 PowerShell 执行远程操作的基本信 ...
- C# 设计模式之空对象模式
最近看了不少的书籍和视频等相关资料,决定自己边学习边写一下个人对设计模式的理解,如果有不对的请大家多多指正. 今天先说说我个人觉得最简单的设计模式 -- [空对象模式] 空对象模式可以减少客户端对对象 ...
- 深入理解Java内部类
内部类就是定义在一个类中的另外一个类,是一种从属关系.在没有实际了解内部类之前,我始终困惑,为什么要在一个类中定义另外一个类,这不是增加代码结构复杂度么?现在才大致能知道这种设计的优势是大于 ...
- IPSP问题
场景:接触IPSP项目是个学习的过程,在此记录一些自己的认知,让自己更能全面的理解项目! 1 总结 1.1 日志追踪 IPSP工程所在的服务器有GW和Server之分,GW是连接外部服务器和serve ...
- html中ul元素水平排列问题
<!DOCTYPE html> <html> <head> <style> #pic_list { display:block; white-space ...
- 【Django】url传递参数
1. url传递参数的特殊字符 在压缩后,可能出现 + - = 空格 这类特殊字符,需要在传递前进行url编码 urllib.enquote(string) 获取参数后 urllib.un ...
- 整合微信小程序的Web API接口层的架构设计
在我前面有很多篇随笔介绍了Web API 接口层的架构设计,以及对微信公众号.企业号.小程序等模块的分类划分.例如在<C#开发微信门户及应用(43)--微信各个项目模块的定义和相互关系>介 ...
- MySQL系列（五）---总结MySQL中的锁
MySQL中的锁 目录 MySQL系列(一):基础知识大总结 MySQL系列(二):MySQL事务 MySQL系列(三):索引 MySQL系列(四):引擎 概述 MyISAM支持表锁,InnoDB支持 ...
- 深入理解Spring MVC 思想
目录 一.前言二.spring mvc 核心类与接口三.spring mvc 核心流程图 四.spring mvc DispatcherServlet说明 五.spring mvc 父子上下文的说明 ...