因为是内部项目,需要分页控件,网上找了一大堆,给领导一看,都说不行,原因很简单,太复杂,领导就想要个简单点的,类似百度的分页,可是自己也没写过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. 超级列表框List Ctrl

    LVCFMT_CENTER居中对齐 LONG styles; CListCtrl *str=new CListCtrl; str->Create(LVS_ICON, CRect(,,,), ); ...

  2. ural 1215 Exactness of Projectile Hit

    #include <cstdio> #include <cstring> #include <cmath> #include <algorithm> # ...

  3. 让自己的C++程序(非服务程序)运行为一个windows service

    因为项目的一些变化和原因,需要把数据处理的一个后台程序创建为一个windows服务,运行以下命令能创建成功: sc create "MyApp Service Name" binP ...

  4. yiic模块module使用

    模块是一个独立的软件单元,它包含 模型, 视图, 控制器 和其他支持的组件. 在许多方面上,模块看起来像一个 应用.主要的区别就是模块不能单独部署,它必须存在于一个应用里. 用户可以像他们访问普通应用 ...

  5. 牛逼的 弹出层 layer !!!

    功能强大,实用,操作方便,文档齐全. http://layer.layui.com/api.html 常用功能代码: <!doctype html> <html> <he ...

  6. 关于标准C语言的预定义宏

    标准C语言预处理要求定义某些对象宏,每个预定义宏的名称一两个下划线字符开头和结尾,这些预定义宏不能被取消定义(#undef)或由编程人员重新定义.下面预定义宏表,被我抄了下来.__LINE__  当前 ...

  7. 【转】VirtualBox direct access to SD Card in Windows--不错

    原文网址:http://www.sandyscott.net/2013/08/14/virtualbox-direct-drive-access/ I’ve trying to get my Rasp ...

  8. wpf在异步中给前台赋值

    wpf,新建异步方法: Thread newThread = new Thread(new ParameterizedThreadStart(GetResult)); newThread.Start( ...

  9. 最近看到一篇cell点击时的动画,感觉还不错

    http://blog.csdn.net/cloudox_/article/details/51262827

  10. (转)awk命令

    转自:http://man.lupaworld.com/content/manage/ringkee/awk.htm#id2874788 整理:Jims of 肥肥世家 <jims.yang@g ...