自己写的简单的jQuery分页控件
因为是内部项目,需要分页控件,网上找了一大堆,给领导一看,都说不行,原因很简单,太复杂,领导就想要个简单点的,类似百度的分页,可是自己也没写过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分页控件的更多相关文章
- jquery 分页控件2
jquery 分页控件(二) 上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的 ...
- jquery 分页控件1
jquery 分页控件(一) 以前一直都是用别人的分页控件,虽然用得很爽,但总觉的还是自己写个小插件比较好,这个插件效果.代码等都有参照别人完成的控件.即便功能并不是那么完善,扩展性也不好,bug或许 ...
- jquery 分页控件(二)
上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的,我弄了个简单的asp.net ...
- jquery 分页控件(一)
以前一直都是用别人的分页控件,虽然用得很爽,但总觉的还是自己写个小插件比较好,这个插件效果.代码等都有参照别人完成的控件.即便功能并不是那么完善,扩展性也不好,bug或许还很多.个人觉得,适合自己用就 ...
- 小白写的一个ASP.NET分页控件,仅供娱乐
无聊,第一次写博客,自己动手写了一个分页控件.由于我是新手,有很多地方写得不够好,希望各位大牛多多指正.哈哈哈 /// <summary> /// 分页控件 /// </summar ...
- jquery 分页控件功能
<script> //分页 function getPageNum(num) { $("#PageNum ul" ...
- .net分页控件简单实现
.net分页控件简单实现 好久好久没写博客了.....最近写了一个.net的分页控件,放到园子里...你觉得好,就点个赞,不好呢,就告诉我为啥吧.... 是使用Request.QueryString的 ...
- jQuery.page 分页控件
分享一下自己在项目中引用的Jquery分页控件 index.html内容 <!DOCTYPE html> <html lang="zh-cn" xmlns=&qu ...
- 自定义angularjs分页控件
继昨天写了knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页 ,正好最近刚学习angularjs ,故琢磨着写一个angularjs版本的分页 ...
随机推荐
- 【结构型】Decorate模式
装饰模式主要意图是为对象扩展额外的职责,但对于用户来说,在使用行为上并没有任何的变化.在此举一个例子来解释该模式的含义.假如你手上有一张照片,此时可以给它盖上一片玻璃片,同时再套上一个精美的相框.如此 ...
- Asp.net禁用页面缓存的方法
方法1.在Asp页面首部<head>中添加如下代码 Response.Buffer = True Response.ExpiresAbsolute = Now() - 1 Response ...
- 在windows下搭建linux-c学习环境
下载virtualbox并安装: https://www.virtualbox.org/wiki/Downloads 现在vagrant并安装: https://www.vagrantup.com/d ...
- 清除oracl中有主外键关联的表中的部分数据。
1.禁用主外键BEGINfor c in (select 'ALTER TABLE '||TABLE_NAME||' DISABLE CONSTRAINT '||constraint_name||' ...
- NET Core & VS Code 之路(2) Web API
NET Core & VS Code 之路(2) Web API 开发Core项目的条件 Visual Studio 2015 Update 3 .NET Core 1.0.0 - VS 20 ...
- C51系列RAM寄存器表
特殊功能寄存器地址表 SFR 符号 字节 地址 位地址和位名称 D7 D6 D5 D4 D3 D2 D1 D0 P0口 P0 80H P0.7 P0.6 P0.5 P0.4 P0.3 P0.2 P0. ...
- Yii数据库
http://www.yiiframework.com/doc/guide/1.1/zh_cn/database.ar http://zhengdl126.iteye.com/blog/1460779 ...
- cf500B New Year Permutation
B. New Year Permutation time limit per test 2 seconds memory limit per test 256 megabytes input stan ...
- Android把图片保存到SQLite中
1.bitmap保存到SQLite 中 数据格式:Blob db.execSQL("Create table " + TABLE_NAME + "( _id INTEGE ...
- linux 建库,编码,导入数据
二.导入数据库1.首先建空数据库mysql>create database abc; 2.导入数据库方法一:(1)选择数据库mysql>use abc;(2)设置数据库编码mysql> ...