自己动手写的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 相关文章推荐
javascript 单选框,多选框美化代码
Aug 01 Javascript
jQuery实现鼠标划过展示大图的方法
Mar 09 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
axios 处理 302 状态码的解决方法
Apr 10 Javascript
js+canvas实现验证码功能
Sep 21 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
vue项目中使用vue-layer弹框插件的方法
Mar 11 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 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 7新特性之类型申明详解
2017/06/06 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
深入理解es6块级作用域的使用
2019/03/28 Javascript
js canvas实现5张图片合成一张图片
2019/07/15 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
Python实现的双色球生成功能示例
2017/12/18 Python
python构建深度神经网络(续)
2018/03/10 Python
python实现抖音视频批量下载
2018/06/20 Python
python读取几个G的csv文件方法
2019/01/07 Python
20行python代码实现人脸识别
2019/05/05 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
校园报刊亭的创业计划书
2014/01/02 职场文书
咖啡书吧创业计划书
2014/01/13 职场文书
《逃家小兔》教学反思
2014/02/23 职场文书
办公自动化毕业生求职信
2014/03/09 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
办公楼租房协议书范本
2014/11/25 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL