基於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點擊事件

下載地址對象

相關文章
相關標籤/搜索