封装的分页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简化分页工具类
经过前两篇文章(大话分页一.大话分页二)的介绍,我认为我想介绍的东西已经介绍完了,不过想精益求精的童鞋可以继续看本篇文章. 在第一篇文章中介绍了一个分页的工具类(具体请看大话分页一),从实现功能上来说 ...
随机推荐
- Springmvc构造RESTful详细讲解
Rest介绍 /blog/1 HTTP GET => 得到id = 1的blog/blog/1 HTTP DELETE => 删除 id = 1的blog/blog/1 HTTP PUT ...
- Terrocotta - 基于JVM的Java应用集群解决方案
前言 越来越多的企业关键应用都必须采用集群技术,实现负载均衡(Load Balancing).容错(Fault Tolerance)和灾难恢复(Failover).以达到系统可用性(High Avai ...
- 打造自己的reset.css
http://shawphy.com/2009/03/my-own-reset-css.html 最近我对此观点有所新的看法,可以查看<真的还需要reset.css么?> 0,引言 每每有 ...
- Java [leetcode 32]Longest Valid Parentheses
题目描述: Given a string containing just the characters '(' and ')', find the length of the longest vali ...
- 27、Service
1服务可以通过startservice的方法 开启.通过stopservice的方法 停止. 服务有一个特点: 只会一次onCreate()方法一旦被创建出来,以后oncreate() 就不会再被执行 ...
- NGUI如何创建自己的精灵图集
说实话其实很简单,但是在不知道的情况下真的不好弄啊. 1. 选择你要制作精灵图集的图片,可以选择多张 2. 提倡使用快捷键Alt + Shift + M 会有如下窗口弹出,也可以NGUI --> ...
- highcharts图表的图例legend怎么改变显示位置
一.将图例Legend放于图表右侧1.设置chart的marginRight属性值:chart: { marginRight: 120}2.设置legend图例属性值如下 legend: { alig ...
- HW6.2
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- python 使用dict和set
dict Python内置了字典:dict的支持,dict全称dictionary,在其他语言中也称为map,使用键-值(key-value)存储,具有极快的查找速度. 举个例子,假设要根据同学的名字 ...
- angular中的promise
angular中的promise用法 标签(空格分隔): angular 前言 Promise其实是一个规范,用类似then().then()这样的链式调用形式来处理因为异步带来意大利面条式的代码(多 ...