基于jquery的静态页面翻页
最近需要用到一个静态分页(以前是php直接放过来的没有研究过),也没很多技术含量,就是方便以后用下~
没有封装成插件,里面代码很直白,样式,js改起来很方便。
作用对象: 当后台提供数据需要前台展示分页(适合分页数量比较小的项目)的时候
代码说明(源码有详细说明):
var dataL = data.length;//记录data总长度 var perPage = 3//每一页存在三条数据 var nowIndex = 1;//记录点击的 翻页的index 为了左右按钮用 function LR(maxVal,reducesOrPlus){ if(nowIndex == maxVal){ return false; }else{ nowIndex = nowIndex+reducesOrPlus; }//判断是否达到临界,到左右按钮那了 $('span').eq(nowIndex).addClass('on').siblings().removeClass(); $('ul','.list').eq(nowIndex-1).show().siblings('ul').hide(); }//LR 左右按钮点击事件
中心思想:根据 数据 总数量,来确定需要几个包装容器对齐包装,有几个包装容器(代码中为ul),自然要几个对应的翻页元素(代码中为span),建立好包装容器之后,可以往里面循环添加想添加的 数据个数
js小tip:① !!expression 会返回一个boolean值,省的去var oBooleanObject = new Boolean(exp);
② 多余代码能重复用就用一个函数里面去通过改变不同的参数去调用(本例中的向前一页和向后一页的点击事件)
$('.prev').click(function(){LR(1,-1)}); $('.next').click(function(){LR($('span').last().index()-1,+1)});