自己动手写的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 相关文章推荐
50款非常棒的 jQuery 插件分享
Mar 29 Javascript
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
jquery分页插件AmSetPager(自写)
Apr 15 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 Javascript
angularjs+bootstrap实现自定义分页的实例代码
Jun 19 Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
js针对图片加载失败的处理方法分析
Aug 24 Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 Javascript
微信小程序实现星星评分效果
Nov 01 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
JAVA/JSP学习系列之七
2006/10/09 PHP
php模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
编辑浪子版表单验证类
2007/05/12 Javascript
ext监听事件方法[初级篇]
2008/04/27 Javascript
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
vue动态设置img的src路径实例
2018/09/18 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
python中dict()的高级用法实现
2019/11/13 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
python实现三壶谜题的示例详解
2020/11/02 Python
六道php面试题附答案
2014/06/05 面试题
AJAX的优缺点都有什么
2015/08/18 面试题
计算机专业自荐信
2013/10/14 职场文书
洗煤厂厂长岗位职责
2014/01/03 职场文书
校长新学期致辞
2015/07/30 职场文书
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python
python图片灰度化处理的几种方法
2021/06/23 Python
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android