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 ...
随机推荐
- 7个原因告诉你为什么要选择一个“多模型”的数据库？-ArangoDB
ArangoDB 是一个开源的分布式原生多模型数据库 (Apache 2 license). 其理念是:利用一个引擎,一个 query 语法,一项数据库技术,以及多个数据模型,来最大力度满足项目的灵活 ...
- 【学习笔记】C# 构造和析构
构造方法 构造方法是一个特殊的方法,负责初始化对象 构造方法名必须和类名一致 构造方法没有返回值,但可以有参数,能够重载 构造方法可以不写,系统会自动为类添加一个无参的默认构造 如果将构造方法设置为P ...
- 1、微信小程序----弹幕的实现(无后台)
小程序刚刚出来,现在网上的demo是多,但是要找到一个自己需要的却不容易.今天跟大家分享自己写的一个弹幕功能. 先来一张效果图: 我的思路是这样的,先用<switch>标签确定是否打开弹幕 ...
- JAVA入门[22]—thymeleaf
一.thymeleaf官网 官网:https://www.thymeleaf.org/index.html doc:https://www.thymeleaf.org/documentation.ht ...
- reversing.kr easy crack 之write up
之前学逆向感觉学得一踏糊涂,这阶段好多师傅带我,一定要好好学,重新开始,认真学习. 来看打开可执行文件: 用ollydbg载入,单步执行后停到了入口点: 分析入口点,并没有加壳,于是F9执行程序,跳出 ...
- [补档][NOI 2008]假面舞会
[NOI 2008]假面舞会 题目 一年一度的假面舞会又开始了,栋栋也兴致勃勃的参加了今年的舞会.今年的面具都是主办方特别定制的.每个参加舞会的人都可以在入场时选择一个自己喜欢的面具. 每个面具都有一 ...
- 用SSH解决大局域网反向端口转发问题
本文作者Tony Lee,转载自FreeBuf.COM 自从家里换了联通光纤后,联通就在我家宽带出口前搭了一个路由器,我家也彻底沦为192.168.1.0/24段的局域网了,带来的问题就是在外网无 ...
- rocketmq client for c#
基于ikvm的rocketmq的c#客户端,由于阿里对c#不敏感,对这方面的东西缺少.因为工作需要弄了一个,分享给大家 https://github.com/franknew/RocketMQ-Cli ...
- mybatis 详解（五）------动态SQL
前面几篇博客我们通过实例讲解了用mybatis对一张表进行的CRUD操作,但是我们发现写的 SQL 语句都比较简单,如果有比较复杂的业务,我们需要写复杂的 SQL 语句,往往需要拼接,而拼接 SQL ...
- swift 导出测试包（Save for Ad Hoc Deployment）卡在compile bitcode处问题
如图取消Rebuild from bitcode选中速度会快很多