zoukankan      html  css  js  c++  java
  • 基于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)});
    pre,next点击事件

    下载地址

          

  • 相关阅读:
    Linux学习-网络管理
    Linux学习-文件权限
    Linux学习-用户管理常用命令
    python操作数据库(MySQL、redis、MD5加密函数)
    Jenkins待过的坑
    Robot framework+Jenkins
    jenkins + maven + SVN自动化集成部署
    接口测试学习笔记二
    接口测试学习笔记一
    【数据结构】为什么要使用一致性哈希算法?
  • 原文地址:https://www.cnblogs.com/boyice/p/4686004.html
Copyright © 2011-2022 走看看