自己动手写的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 相关文章推荐
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
JavaScript实现找出字符串中第一个不重复的字符
Sep 03 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
JS实现DIV容器赋值的方法
Dec 14 Javascript
纯js实现手风琴效果
Apr 17 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 Javascript
JavaScript的字符串方法汇总
Jul 31 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 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获取数组长度的方法(有实例)
2013/10/27 PHP
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
js传值 判断
2006/10/26 Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
2010/08/03 Javascript
IE无法设置短域名下Cookie
2010/09/23 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
利用Python开发微信支付的注意事项
2016/08/19 Python
Python使用requests发送POST请求实例代码
2018/01/25 Python
python批量爬取下载抖音视频
2019/06/17 Python
Python数据分析pandas模块用法实例详解
2019/11/20 Python
Python autoescape标签用法解析
2020/01/17 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
出售房屋委托书范本
2014/09/24 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
师德师风个人总结
2015/02/06 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
高二英语教学反思
2016/03/03 职场文书
工程移交协议书
2016/03/24 职场文书
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js