因为是内部项目,需要分页控件,网上找了一大堆,给领导一看,都说不行,原因很简单,太复杂,领导就想要个简单点的,类似百度的分页,可是自己也没写过Jquery控件,硬着头皮找了些资料,写了这个分页控件,目前只在chrome测试,其他的兼容性不知道,      总算也会自己写插件了,  虽然很烂,但好歹也是进步啊,附上图片,源码,也许有人也有同样的需求可以用得到,欢迎指正,批评!!

css:

@charset "utf-8";
* {
margin:0px;
padding:0px;
font-family:"微软雅黑";
font-size:14px;
}
._ul {
float:left;
height:38px;
display:block;
}
._ul li {
list-style-type:none;
height:36px;
width:36px;
border:1px solid #e1e2e3;
cursor:pointer;
text-align:center;
line-height:36px;
color:blue;
float:left;
margin:0 3px;
}
._ul li:hover,._before:hover,._after:hover {
border:1px solid #38f;
background: #f2f8ff;
}

.li-hover {
border:1px solid #38f;
background: #f2f8ff;
}

._before {
width:86px;
height:36px;
border:1px solid #e1e2e3;
float:left;
cursor:pointer;
text-align:center;
line-height:36px;
color:blue;
margin:0 3px;
}
._after {
width:86px;
height:36px;
border:1px solid #e1e2e3;
float:left;
cursor:pointer;
text-align:center;
line-height:36px;
color:blue;
margin:0 3px;
}

.Hidden {
display:none;
}
._select {
border:1px solid #fff !important;
color:black !important;
}
._left {
float:left;
margin-left:200px;
}
._right {
float:right;
margin-right:200px;
}

js:

; (function ($, window, document, undefined) {
var isShow = function (ele,options) {
this.$element = ele,
this.defaults = {
maxpage: 10,
count: 0,
total: 0,
float: 'right',
margin:'200px',
getData:null
},
this.options = $.extend({}, this.defaults, options)
}
isShow.prototype={
showDiv:function(){
this.bindEvent();
},
showHtml:function(){
var _this = this, strHtml = "",count=Math.ceil(_this.options.total / _this.options.count);
strHtml += "<div class='"+(_this.options.float=='right'?'_right':'_left')+"'><div class='_before Hidden'><上一页</div><ul class='_ul'>";
for (var i = 1; i <= count ; i++) {
strHtml += "<li data-index='"+(i==1?'frist':i==count?'last':'middle')+"' class='"+(i==1?'_select':'')+" "+(i>_this.options.maxpage?'Hidden':'')+"'>"+i+"</li>";
}
strHtml += "</ul><div class='_after'>下一页></div></div>";
_this.$element.append(strHtml);
},
MoveIndex:function(index){
var _this = this, _index = this.options.maxpage, count = Math.ceil(_this.options.total / _this.options.count);
var middle = _index / 2;
var curr = _this.$element.find("li");
if (count <= _index) {
$(curr).show();
} else {
var ftemp = 0,ltemp=0;
if (index < middle)
ftemp = (middle - index);
if (middle > count - index)
ltemp=(middle-(count-index));
$(curr).each(function () {
var currindex = parseInt($(this).text());
if (currindex > index - middle-ltemp && currindex <= parseInt(index) + parseInt(middle)+ftemp) {
$(this).show();
} else {
$(this).hide();
}
});
}
},
WhichFind:function(status,_index){
var _this=this;
switch (status) {
case 'frist':
_this.$element.find("._before").hide();
_this.$element.find("._after").show();
break;
case 'last':
_this.$element.find("._after").hide();
_this.$element.find("._before").show();
break;
case 'middle':
_this.$element.find("div").show();
break;
}
_this.MoveIndex(_index);
_this.options.getData({ index: _index });
},
bindEvent:function(){
var _this = this;
_this.showHtml();
_this.$element.find("li").click(function () {
var status = $(this).data("index"), _index = $(this).text();
$(this).addClass("_select").siblings().removeClass("_select");
_this.WhichFind(status,_index);
});

_this.$element.find("._before").click(function () {
var status = $("._select").prev().data("index"), _index = $("._select").prev().text();
$("._select").prev().addClass("_select").siblings().removeClass("_select");
_this.WhichFind(status,_index);
});

_this.$element.find("._after").click(function () {
var status = $("._select").next().data("index"), _index = $("._select").next().text();
$("._select").next().addClass("_select").siblings().removeClass("_select");
_this.WhichFind(status,_index);
});
}
}
$.fn.FY = function (option) {
var fs = new isShow(this, option);
return fs.showDiv();
}
})(jQuery,window,document);

自己写的简单的jQuery分页控件的更多相关文章

  1. jquery 分页控件2

    jquery 分页控件(二) 上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的 ...

  2. jquery 分页控件1

    jquery 分页控件(一) 以前一直都是用别人的分页控件,虽然用得很爽,但总觉的还是自己写个小插件比较好,这个插件效果.代码等都有参照别人完成的控件.即便功能并不是那么完善,扩展性也不好,bug或许 ...

  3. jquery 分页控件(二)

    上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的,我弄了个简单的asp.net ...

  4. jquery 分页控件(一)

    以前一直都是用别人的分页控件,虽然用得很爽,但总觉的还是自己写个小插件比较好,这个插件效果.代码等都有参照别人完成的控件.即便功能并不是那么完善,扩展性也不好,bug或许还很多.个人觉得,适合自己用就 ...

  5. 小白写的一个ASP.NET分页控件,仅供娱乐

    无聊,第一次写博客,自己动手写了一个分页控件.由于我是新手,有很多地方写得不够好,希望各位大牛多多指正.哈哈哈 /// <summary> /// 分页控件 /// </summar ...

  6. jquery 分页控件功能

      <script>        //分页         function getPageNum(num) {             $("#PageNum ul" ...

  7. .net分页控件简单实现

    .net分页控件简单实现 好久好久没写博客了.....最近写了一个.net的分页控件,放到园子里...你觉得好,就点个赞,不好呢,就告诉我为啥吧.... 是使用Request.QueryString的 ...

  8. jQuery.page 分页控件

    分享一下自己在项目中引用的Jquery分页控件 index.html内容 <!DOCTYPE html> <html lang="zh-cn" xmlns=&qu ...

  9. 自定义angularjs分页控件

    继昨天写了knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页 ,正好最近刚学习angularjs ,故琢磨着写一个angularjs版本的分页 ...

随机推荐

  1. HttpHelper工具类

    /// <summary> /// 类说明:HttpHelper类,用来实现Http访问,Post或者Get方式的,直接访问,带Cookie的,带证书的等方式,可以设置代理 /// 重要提 ...

  2. FPGA那些事 --经典总结

    规范很重要 工作过的朋友肯定知道,公司里是很强调规范的,特别是对于大的设计(无论软件还是硬件),不按照规范走几乎是不可实现的.逻辑设计也是这样:如果不按规范做的话,过一个月后调试时发现有错,回头再看自 ...

  3. LINUX下为LVM磁盘增加硬盘空间

    总结: ~~~~~~~~~~~~~~~~~~~~ fdisk -lpvcreate /dev/sdbvgextend VolGroup /dev/sdblvextend -L +180G /dev/m ...

  4. Building Web Apps with SignalR, Part 1

    Building Web Apps with SignalR, Part 1 In the first installment of app-building with SignalR, learn ...

  5. yum 使用说明

    linux如何安装yum 使用YUM来安装软件,就可以不用去到处找依赖关系的RPM了.很方便. 第一步:安装yum  第二步:下载createrepo包并安装 下载地址: ftp://195.220. ...

  6. HDOJ 1395 2^x mod n = 1

    Problem Description Give a number n, find the minimum x(x>0) that satisfies 2^x mod n = 1. Input ...

  7. MSSQL 标准PROC 写法

    MSSQL 标准PROC 写法 ALTER PROC [dbo].[usp_ADM_InsertFlowSortInfo]@FlowSortName NVARCHAR(50),AS/*PAGE: 分类 ...

  8. 护肤品总结 Skin Care (1)

    很久没有更博了,最近过年在家,就写些生活上面的总结吧- 从护肤品开始,接下来陆陆续续会有化妆品,北美生活购物等. 因为是学生党,所以此帖中的东西基本都是价钱适中.因为经常买买买,所以用的好的坏的都会在 ...

  9. java与数据结构(8)---java实现链队列

    链队列 实际上就是单链表,只是规定了删除在队头进行,添加在队尾进行. 链队列代码结构 package list.queue; public interface Queuable<T>; p ...

  10. java与数据结构(2)---java实现静态链表

    结点类 1 //结点类 2 class Node<T> { 3 private T data; 4 private int cursor; 5 6 Node(T data, int cur ...