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 ...
随机推荐
- Spring Boot 系列（一）快速入门
简介 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置 ...
- H5读取本地文件操作
H5读取本地文件操作 本文转自:转:http://hushicai.com/2014/03/29/html5-du-qu-ben-di-wen-jian.html感谢大神分享. 常见的语言比如php. ...
- zookeeper的集群介绍、搭建、环境、安装
zookeeper是本身是一种分布式协调服务(英文意思动物园园长因为Hadoop就是一个动物园,storm.hadoop.kafkaka.hbaser都是基于zookeeper开发的) 原理:Zook ...
- 工程经验总结之吹水"管理大境界"
1.个人认为项目管理最核心的能力是预见风险和快速解决风险的能力. 从实践来看,没有百分百的完美计划,任何计划都有出现偏差的可能,或者说计划总是不会按照最初的设定去完美执行的. 项目经理存在的主要价值就 ...
- 初次使用Mybatis配置出现错误待解决
数据库: create table STUDENT ( STUID NUMBER(9) not null, SNAME VARCHAR2(50) not null, SEX VARCHAR2(4), ...
- Docker初步了解
Docker 是什么 https://www.docker.com/ Docker 这个单词英文原意是码头工人,搬运工的意思,这个搬运工搬运的是各种应用的容器. 官方的说法是,Docker 是提供给开 ...
- VerilogHDL概述与数字IC设计流程学习笔记
一.HDL的概念和特征 HDL,Hard Discrimination Language的缩写,翻译过来就是硬件描述语言.那么什么是硬件描述语言呢?为什么不叫硬件设计语言呢?硬件描述语言,顾名思义就是 ...
- Java使用拦截器的两种方式
拦截器是个好东西,之前用到过,现在记录一下,供以后参考使用! 其一,使用org.aspectj.lang.annotation.Aspect 先上代码: package com.test.interc ...
- （转）log4j（六）——log4j.properties简单配置样例说明
一:测试环境与log4j(一)——为什么要使用log4j?一样,这里不再重述 1 老规矩,先来个栗子,然后再聊聊感受 (1)使用配文件的方式,是不是感觉非常的清爽,如果不在程序中读取配置文件就更加的清 ...
- LeetCode题解 343.Integer Break
题目:Given a positive integer n, break it into the sum of at least two positive integers and maximize ...