封装的分页jq
(function ($) {
$.fn.page = function (options) {
var defaults = {
divid: "pagediv",
count: , //remove or hide
pageindex: ,
callback: function (pageindex) { }
};
var html = "";
var opts = $.extend(defaults, options);
opts.callback();
var div = $("#" + opts.divid);
var a = [];
//根据当前页数判断上一页是否可以点击
if (opts.pageindex == ) {
html = html + "<a href=\"#\" class=\"prev unclick\">上一页</a>";
} else {
html = html + "<a href=\"#\" class=\"prev\">上一页</a>";
}
for (var i = ; i < opts.count; i++) {
//判断显示页码的样式
if ((i + ) == opts.pageindex) {
html = html + "<a href=\"javascript:void(0)\" style=\"background:#999\">" + (i + ) + "</a>"
} else {
html = html + "<a href=\"javascript:void(0)\">" + (i + ) + "</a>";
}
}
//根据当前页数判断上一页是否可以点击
if (opts.pageindex == opts.count) {
html = html + "<a href=\"javascript:void(0)\" class=\"next unclick\">下一页</a>";
} else {
html = html + "<a href=\"javascript:void(0)\" class=\"next\">下一页</a>";
}
$("#" + opts.divid).html(html);
$("#" + opts.divid + " a").not($(".prev")).not(".next").click(function () {
$(this).css("background", "#999")
$(this).siblings().removeAttr("style");
opts.pageindex = $(this).html();
if (opts.pageindex != ) {
$(".prev").removeClass("unclick");
} else {
$(".prev").addClass("unclick");
}
if (opts.pageindex == opts.count) {
$(".next").addClass("unclick");
} else {
$(".next").removeClass("unclick");
}
opts.callback(opts.pageindex);
})
$(".prev").click(function () {
$("#" + opts.divid + " a").eq(opts.pageindex).removeAttr("style");
if (opts.pageindex == ) {
opts.pageindex ==
} else {
opts.pageindex = opts.pageindex - ;
}
$("#" + opts.divid + " a").eq(opts.pageindex).css("background", "#999");
if (opts.pageindex != ) {
$(".prev").removeClass("unclick");
} else {
$(".prev").addClass("unclick");
}
if (opts.pageindex == opts.count) {
$(".next").addClass("unclick");
} else {
$(".next").removeClass("unclick");
}
opts.callback(opts.pageindex);
});
$(".next").click(function () {
$("#" + opts.divid + " a").eq(opts.pageindex).removeAttr("style");
if (opts.pageindex == ) {
opts.pageindex ==
} else {
opts.pageindex = parseInt(opts.pageindex) + ;
}
$("#" + opts.divid + " a").eq(opts.pageindex).css("background", "#999");
if (opts.pageindex != ) {
$(".prev").removeClass("unclick");
} else {
$(".prev").addClass("unclick");
}
if (opts.pageindex == opts.count) {
$(".next").addClass("unclick");
} else {
$(".next").removeClass("unclick");
}
opts.callback(opts.pageindex);
});
}
})(jQuery);
封装的分页jq的更多相关文章
- 基于jQuery封装的分页组件
前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...
- 使用JS分页 <span> beta 3.0 完成封装的分页
<html> <head> <title>分页</title> <style> #titleDiv{ width:500px; backgr ...
- 基于jQuery封装的分页组件(可自定义设置)
jQuery封装的分页组件 前几天做了一个vue的组件分页,而现在需求是jquery的分页,我就根据我自己的需求写了一个.在网上找了很久的基于jquery的分页封装,可是都不是我想要的结果,那么今天我 ...
- uinty3d使用ugui封装一个分页控件
我们在显示数据时有的数据比较多,手机内存有限,我们不可能分配很多的控件来显示这些数据,分页是一个不错的选择.比如玩家交易行.我们现在封装一个自己简单的分页控件来显示玩家交易行. 分页控件的原理其实很简 ...
- mysql数据库封装和 分页查询
1 之前我们学到了php连接mysql数据库的增删改查,中间要多次调用数据库, 而且以后用到的表比较多,上传中如果需要改数据的话会非常麻烦,但是如果 我们把数据库封装,到时就可以很轻松的把改掉一些数据 ...
- MySQL数据库封装和分页查询
1.数据库封装 <?php //我用的数据库名是housedb class DBDA {public $host="localhost";public $uid=" ...
- 封装page分页类
类: <?php //分页工具类 class Page{ /* * 获取分页字符串 * @param1 string $uri,分页要请求的脚本url ...
- 基于Vue封装分页组件
使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...
- 大话分页(补充)——Threadlocal封装offSet和pageSize简化分页工具类
经过前两篇文章(大话分页一.大话分页二)的介绍,我认为我想介绍的东西已经介绍完了,不过想精益求精的童鞋可以继续看本篇文章. 在第一篇文章中介绍了一个分页的工具类(具体请看大话分页一),从实现功能上来说 ...
随机推荐
- 利用icepdf将pdf文件转为图片
所需jar 包为icepdf-core.jar.icepdf-extra.jar.icepdf-pro-intl.jar.icepdf-pro.jar和icepdf-viewer.jar. 示例代码如 ...
- (十)学习CSS之padding属性
浏览器支持 所有浏览器都支持 padding 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit". 定义和用法 pa ...
- Apache,PHP,MySQL的安装,配置
Apache 1. 下载 Apache版本号为2.2.22. 最好下载msi安装文件.下载地址为:http://www.apache.org/dist/httpd/binaries/win32/ 如果 ...
- Beginning Android 4 Programming Book学习
Chapter 3 EditText不自动获取焦点,自动获取焦点但不显示软键盘 Page 122-123 只有定义了android:id属性的控件在屏幕翻转后状态才会被持久化 Page 133 C ...
- HDU 4825-Xor Sum(trie)
题意: 给你一组数,开始询问给一个数 求组中与该数异或值最大的数. 分析:根据异或的特点 要想得到的异或值最大 尽可能的让两个数的每位都相反 先把给定的一组数建树,数的最后一位对应的节点保存这个数的 ...
- linu、C语言、计算机基础教程
Linux操作系统入门教程:http://see.xidian.edu.cn/cpp/linux/ 鸟哥的linux私房菜:http://vbird.dic.ksu.edu.tw/ 计算机操作系统教程 ...
- Node与Express开发 坑1
添加 app.set('views', __dirname + '/views') 修改 app.use(express.static(__dirname + '/public')); express ...
- POJ1503: Integer Inquiry(连续多个大整数加法运算)
#include<iostream> #include<cstring> using namespace std; string sum; ; string tool(stri ...
- CP-ABE环境配置
本环境配置步骤参考互联网: 1.安装m4 sudo apt-get install m4 2.安装gmphttp://gmplib.org/ 下载gmplib ./configure make ma ...
- Java经典面试题
1. Java中的异常处理机制的简单原理和应用. 当Java 程序违反了Java的语义规则时,Java虚拟机就会将发生的错误表示为一个异常.违反语义规则包括2种情况.一种是Java类库内置的语义检查. ...