自己动手写的jquery分页控件(非常简单实用)


Posted in Javascript onOctober 28, 2015

最近接了一个项目,其中有需求要用到jquery分页控件,上网也找到了需要分页控件,各种写法各种用法,都是很复杂,最终决定自己动手写一个jquery分页控件,全当是练练手了。写的不好,还请见谅,本分页控件在chrome测试过,其他的兼容性不知道怎么没时间测试呢。欢迎有同样需求的小伙伴采用,在使用过程发现有问题欢迎提出批评建议。

 自己动手写的jquery分页控件(非常简单实用)

css:

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

.li-hover {
border:px solid #f;
background: #ffff;
}

._before {
width:px;
height:px;
border:px solid #eee;
float:left;
cursor:pointer;
text-align:center;
line-height:px;
color:blue;
margin: px;
}
._after {
width:px;
height:px;
border:px solid #eee;
float:left;
cursor:pointer;
text-align:center;
line-height:px;
color:blue;
margin: px;
}

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

js:

; (function ($, window, document, undefined) {
var isShow = function (ele,options) {
this.$element = ele,
this.defaults = {
maxpage: ,
count: ,
total: ,
float: 'right',
margin:'px',
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 = ; i <= count ; i++) {
strHtml += "<li data-index='"+(i==?'frist':i==count?'last':'middle')+"' class='"+(i==?'_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 / ;
var curr = _this.$element.find("li");
if (count <= _index) {
$(curr).show();
} else {
var ftemp = ,ltemp=;
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分页控件(非常简单实用),希望对大家有所帮助。

Javascript 相关文章推荐
js倒计时小程序
Nov 05 Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 Javascript
JavaScript中函数(Function)的apply与call理解
Jul 08 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
JS实现前端动态分页码代码实例
Jun 02 Javascript
Vuex的各个模块封装的实现
Jun 05 Javascript
Jquery日历插件制作简单日历
Oct 28 #Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 #Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 #Javascript
JavaScript多并发问题如何处理
Oct 28 #Javascript
JS实现双击屏幕滚动效果代码
Oct 28 #Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 #Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 #Javascript
You might like
PHP源码之explode使用说明
2011/08/05 PHP
基于php 随机数的深入理解
2013/06/05 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
php图像处理类实例
2015/07/28 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
PHP Swoole异步MySQL客户端实现方法示例
2019/10/24 PHP
js单例模式详解实例
2013/11/21 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
javascript的数组和常用函数详解
2014/05/09 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
Python实现基本线性数据结构
2016/08/22 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
英国计算机商店:Technextday
2019/12/28 全球购物
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
父亲去世追悼词
2015/06/23 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
nginx部署多前端项目的几种方法
2021/05/25 Servers