基于jquery的静态页面翻页

  最近须要用到一个静态分页(之前是php直接放过来的没有研究过),也没不少技术含量,就是方便之后用下~php

  没有封装成插件,里面代码很直白,样式,js改起来很方便。express

  做用对象: 当后台提供数据须要前台展现分页(适合分页数量比较小的项目)的时候
ide

  代码说明(源码有详细说明):函数

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),创建好包装容器以后,能够往里面循环添加想添加的 数据个数 spa

  js小tip:① !!expression 会返回一个boolean值,省的去var oBooleanObject = new Boolean(exp); 插件

       ② 多余代码能重复用就用一个函数里面去经过改变不一样的参数去调用(本例中的向前一页和向后一页的点击事件) code

$('.prev').click(function(){LR(1,-1)});
$('.next').click(function(){LR($('span').last().index()-1,+1)});
pre,next点击事件

下载地址对象

相关文章
相关标签/搜索