因为是内部项目,需要分页控件,网上找了一大堆,给领导一看,都说不行,原因很简单,太复杂,领导就想要个简单点的,类似百度的分页,可是自己也没写过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. Hive笔记--配置以及遇到的问题

    ubuntu安装mysql  http://www.2cto.com/database/201401/273423.html Hive安装: http://www.aboutyun.com/forum ...

  2. IOS学习:ios中的数据持久化初级(文件、xml、json、sqlite、CoreData)

    IOS学习:ios中的数据持久化初级(文件.xml.json.sqlite.CoreData) 分类: ios开发学习2013-05-30 10:03 2316人阅读 评论(2) 收藏 举报 iOSX ...

  3. SolrCloud 5.2.1 installation and configuration

    虽然不是很有技术含量的事情,主要依靠的是阅读能力,然而知识的东西还是记录一下,以备后继待查. 环境相关 1. Server:h1,h2,h3 2. OS RHEL 6.2 3. Zookeeper 3 ...

  4. BZOJ1690: [Usaco2007 Dec]奶牛的旅行

    1690: [Usaco2007 Dec]奶牛的旅行 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 552  Solved: 286[Submit][St ...

  5. Delphi 在使用exports中的方法 带参数的用法

    最近项目中,需要在一个bpl中调用另一个bpl中的单元的方法, 方法如下: 在被调用的单元中定义: procedure Inner_Ex(VoucherType: TVoucherType); exp ...

  6. Codeforces Round #236 (Div. 2)E. Strictly Positive Matrix(402E)

    E. Strictly Positive Matrix   You have matrix a of size n × n. Let's number the rows of the matrix f ...

  7. poj2955:括号匹配,区间dp

    题目大意: 给一个由,(,),[,]组成的字符串,其中(),[]可以匹配,求最大匹配数 题解:区间dp: dp[i][j]表示区间 [i,j]中的最大匹配数 初始状态 dp[i][i+1]=(i,i+ ...

  8. Palindrome Permutation II 解答

    Question Given a string s, return all the palindromic permutations (without duplicates) of it. Retur ...

  9. char和int的转换

    import java.util.Scanner; public class test7 { public static void main(String[] args) { // TODO Auto ...

  10. Linux下Weblogic域的创建过程

    环境介绍:操作系统 :Redhat 5.5Weblogic :英文版 8.1.6 Weblogic安装目录 :/weblogic 一.域的建立执行下面语句进入weblogic的bin目录: cd /w ...