最近須要用到一個靜態分頁(之前是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)});
下載地址對象