封装的分页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简化分页工具类
经过前两篇文章(大话分页一.大话分页二)的介绍,我认为我想介绍的东西已经介绍完了,不过想精益求精的童鞋可以继续看本篇文章. 在第一篇文章中介绍了一个分页的工具类(具体请看大话分页一),从实现功能上来说 ...
随机推荐
- ExecutorService与Executors例子的简单剖析
对于多线程有了一点了解之后,那么来看看java.lang.concurrent包下面的一些东西.在此之前,我们运行一个线程都是显式调用了Thread的start()方法.我们用concurrent下面 ...
- 如何在CentOS 5.x 中安装Windows Azure Linux Agent (WALA)
Qing Liu Tue, Mar 10 2015 3:06 AM 在今天的这一个章节中,我们主要讨论在CentOs 5.x 中如何安装Windows Azure Linux Agent 2.11 ...
- 【转】eclipse新建项目,报错“Error: workspace\appcompat_v7\res\values-v21\styles_base.xml No resource found that matches the given name”
原文网址:http://www.cnblogs.com/mbp-study/p/5268478.html 新建项目报错,不知道为什么,以前从未出现过的错误,把sdk更新之后,出现莫名错误,自己也是一知 ...
- lightoj 1019
裸的最短路 dijkstra #include<cstdio> #include<string> #include<cstring> #include<ios ...
- xmbc 资源
http://raspberrypi.diandian.com/post/2013-02-25/40048470423 http://blog.csdn.net/lincyang/article/de ...
- [解决]Kali Linux DHCP自动获取IP失败 坑爹的VMWare桥接
root@kali:~# service networking restart [....] Running /etc/init.d/networking restart is deprecated ...
- CDH CM安装及简单群集部署测试
前吃人的故事开始了,金钱是如何吃人的呢?我在想ing,还没想通,一起吧,哈哈: 入题,别胡扯,误人子弟!!!! CM@@!!!!!!....................., 先来张monitor ...
- 关于 Java Collections API 您不知道的 5 件事,第 1 部分
定制和扩展 Java Collections Java™ Collections API 远不止是数组的替代品,虽然一开始这样用也不错.Ted Neward 提供了关于用 Collections 做更 ...
- ALM11测试计划页面图解1
在 ALM 侧栏上的测试下方,选择测试计划. 在查看菜单中,选择测试网格或测试计划树. 在 ALM 侧栏上的测试下方,选择测试计划. 右键单击测试,并选择测试详细信息. 在测试计划树中选择主题文件夹, ...
- android视频播放心得体会
android视频播放主要是两种方式1.系统封装好的videoplayer,有前进.后退.暂停/播放.拉动最基本的功能,够一般使用,操作办法也很简单,如果需要自定义程度高就需要用到第二种方法:Surf ...