自己动手写的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图片上下tab切换效果
Mar 18 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 Javascript
详解自动生成博客目录案例
Dec 09 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
Vue 过渡实现轮播图效果
Mar 27 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
详解Node.js模板引擎Jade入门
Jan 19 Javascript
React 使用browserHistory项目访问404问题解决
Jun 01 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
浅析vue中的nextTick
Dec 28 Vue.js
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下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
php foreach循环中使用引用的问题
2013/11/06 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
原生JS改变透明度实现轮播效果
2017/03/24 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
Python使用matplotlib绘制动画的方法
2015/05/20 Python
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
用matplotlib画等高线图详解
2017/12/14 Python
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
经济学博士求职自荐信范文
2013/11/23 职场文书
交通安全教育制度
2014/02/02 职场文书
爱护公共设施的标语
2014/06/24 职场文书
竞选班干部演讲稿600字
2014/08/20 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
正确使用MySQL update语句
2021/05/26 MySQL
JS代码编译器Monaco使用方法
2021/06/11 Javascript