因为是内部项目,需要分页控件,网上找了一大堆,给领导一看,都说不行,原因很简单,太复杂,领导就想要个简单点的,类似百度的分页,可是自己也没写过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. 求最小生成树(Prim算法)(1075)

    Description 求出给定无向带权图的最小生成树.图的定点为字符型,权值为不超过100的整形.在提示中已经给出了部分代码,你只需要完善Prim算法即可. Input 第一行为图的顶点个数n    ...

  2. 采访:Go语言编程

    Go语言是由Google在2009年11月份公布的,它的目标是要应对软件开发所面临的最新挑战.Go语言特别被设计为快速(包括在编译时).支持多核的语言,并且兼顾了动态语言的简单性和静态类型语言的安全性 ...

  3. Android系统的进程分类

    1.前台进程:即当前正在前台运行的进程,说明用户当前正在与通过该进程与系统进行交互,所以该进程为最重要的进程,除非系统的内容已经到不堪重负的情况,否则系统是不会将改进程终止的.2.可见进程:一般还是显 ...

  4. Jquery 对象集合的迭代扩展forEach

    if (jQuery && !jQuery.fn.forEach) { $(function () { (function ($) { $.fn.extend({ forEach: f ...

  5. oracle11g rac asm 实例内存修改

    ASM实例内存修改 memory_max_target(它为静态参数,修改完成后需要重启实例) memory_target(它为动态参数,不需要重启实例) SQL> select name,is ...

  6. strings和nm命令

    strings和nm命令 strings 一.简介: 显示文件中的可打印字符 二.用法 strings [option(s)] [file(s)] 选项说明: -a – –all 扫描整个文件而不是只 ...

  7. Subarray Sum Closest

    Question Given an integer array, find a subarray with sum closest to zero. Return the indexes of the ...

  8. 程序设计实习MOOC / 继承和派生——编程作业 第五周程序填空题1

    描述 写一个MyString 类,使得下面程序的输出结果是: 1. abcd-efgh-abcd- 2. abcd- 3. 4. abcd-efgh- 5. efgh- 6. c 7. abcd- 8 ...

  9. Generating SSH Keys [Ubuntu Linux]

    Generating SSH Keys We strongly recommend using an SSH connection when interacting with GitHub. SSH ...

  10. Apache Ant在Windows下配置环境变量

    Windows下ANT用到的环境变量主要有2个: ANT_HOME 和 PATH. 1..设置ANT_HOME指向ant的安装目录,如下: ANT_HOME = D:\soft\apache\apac ...