自己动手写的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重载函数的辅助方法2
Jul 04 Javascript
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
JS打开图片另存为对话框实现代码
Dec 26 Javascript
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
Vue不能观察到数组length的变化
Jun 08 Javascript
js字符串处理之绝妙的代码
Apr 05 Javascript
javascript的this关键字详解
May 20 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
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
追求程序速度,而不是编程的速度
2008/04/23 PHP
PHP Array交叉表实现代码
2010/08/05 PHP
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
php查找指定目录下指定大小文件的方法
2014/11/28 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
PHP $O00OO0=urldecode &amp; eval 解密,记一次商业源码的去后门
2020/09/13 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
一个简单的javascript类定义例子
2009/09/12 Javascript
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
js 实现在2d平面上画8的方法
2018/10/10 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
python中Flask框架简单入门实例
2015/03/21 Python
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
倩碧美国官网:Clinique美国
2016/07/20 全球购物
NFL Game Pass欧洲:在线观看NFL比赛直播和点播,以高清质量播放
2018/08/30 全球购物
委托书范本
2014/04/02 职场文书
演讲稿的写法
2014/05/19 职场文书
小学生教师节广播稿
2015/08/19 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL