封装的分页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简化分页工具类
经过前两篇文章(大话分页一.大话分页二)的介绍,我认为我想介绍的东西已经介绍完了,不过想精益求精的童鞋可以继续看本篇文章. 在第一篇文章中介绍了一个分页的工具类(具体请看大话分页一),从实现功能上来说 ...
随机推荐
- [.NET WebAPI系列01] WebAPI 简单例子
[源] 来自微软WebAPI官方视频,Introduction to the ASP.NET Web API --Uniform Interface -- Demo-Using convention ...
- win8.1 64 安装用友T3+sql2005-64步骤
1. 环境:win8.1 64 专业版 4G内存 .net framwork 3.5 2.初始过程及所需软件 安装sql2008数据库,安装完T3发现并不支持此数据库,运行T3老是出现连接数据时的 ...
- 《深入Java虚拟机学习笔记》- 第14章 浮点运算
<深入Java虚拟机学习笔记>- 第13章 浮点运算
- alibaba笔试1
5.D 一个线程不可以改变另一个线程的程序计数器.如果改变了,线程在切换后就恢复不到正确的位置. 一个线程可以访问另一个线程的栈.http://bbs.csdn.net/topics/39008942 ...
- 统计计算与R语言的资料汇总(截止2016年12月)
本文在Creative Commons许可证下发布. 在fedora Linux上断断续续使用R语言过了9年后,发现R语言在国内用的人逐渐多了起来.由于工作原因,直到今年暑假一个赴京工作的机会与一位统 ...
- 设备扩展(DEVICE_EXTENSION)
原文链接:http://blog.csdn.net/hazy/article/details/481705 WDM中的结构 ---设备扩展 设备扩展(DEVICE_EXTENSION)是与设备对象 ...
- codeforce 605BE. Freelancer's Dreams
题意:给你n个工程,做了每个工程相应增长x经验和y钱.问你最少需要多少天到达制定目标.时间可以是浮点数. 思路:杜教思路,用对偶原理很简易.个人建议还是标准解题法,凸包+线性组合. #include& ...
- Hadoop MapReduce概念学习系列之mr程序详谈(二十三)
这个暂时,没写好. K1,v1 这是增强的for循环. for(Sting w : words) { } 迭代器里,前面,放的是什么类型,后面,迭代的是谁.
- Fragment回调顺序及getActivity()为NullPointerException解决方法
Fragment回调顺序 onAttach->onCreate->onCreateView->onActivityCreated ps:最后发现经常在Fragment里面getAct ...
- Java & XML Tool Overview
As mentioned in the introduction Sun now provides these tools for XML Processing in Java: StAX Reade ...