<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="format-detection" content="telephone=no,email=no,adress=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>simplePaging-簡潔易用的分頁插件</title> <style> * { margin: 0; padding: 0; } body { font: 14px/1.42857143 'Microsoft YaHei', '微軟雅黑', '宋體'; color: #333; background-color: #fff; min-width: 1220px; max-width: 1920px; margin: 0 auto; } .instructions { float: right; margin: 20px; width: 700px; } .instructions table { width: 100%; } .instructions table th, .instructions table td { width: 15%; text-align: center; border: 1px solid #ccc; } .instructions table th:last-child, .instructions table td:last-child { width: 55%; padding-left: 5px; text-align: left; } .part { margin: 20px; } .part p { padding-left: 2px; } .red{ color: red; } .page{ height: 30px; line-height: 30px; } </style> <link rel="stylesheet" href="css/simplePaging.css"> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script src="js/simplePaging.js"></script> </head> <body> <!--文檔說明 開始--> <!-- <div class="instructions"> <strong>文檔說明:</strong> <table cellpadding="0" cellspacing="0" border="0"> <tr> <th>參數名</th> <th>參數類型</th> <th>可選參數</th> <th>說明</th> </tr> <tr> <td>allPage</td> <td>number</td> <td>自定義數字</td> <td>默認值:12。<span class="red">總頁數</span>:頁碼器總共多少頁。</td> </tr> <tr> <td>showPage</td> <td>number</td> <td>自定義數字</td> <td>默認值:5。<span class="red">顯示頁數</span>:頁碼器顯示幾頁。</td> </tr> <tr> <td>startPage</td> <td>number</td> <td>自定義數字</td> <td>默認值:1。<span class="red">首頁頁碼數字。</span></td> </tr> <tr> <td>initPage</td> <td>number</td> <td>自定義數字</td> <td>默認值:1。<span class="red">加載完畢自動跳轉到第n頁</span>:此值小於<span class="red">startPage</span>則跳轉首頁,反之跳轉尾頁。</td> </tr> <tr> <td>initPageClick</td> <td>boolean</td> <td>true或false</td> <td>默認值:true(回調)。<span class="red">每次頁面加載完畢後,是否觸發initPage頁的綁定事件</span>,false不回調。</td> </tr> <tr> <td>first</td> <td>string</td> <td>自定義字符串</td> <td>默認值:"首頁"。<span class="red">首頁顯示字符</span>。</td> </tr> <tr> <td>last</td> <td>string</td> <td>自定義字符串</td> <td>默認值:"尾頁"。<span class="red">尾頁顯示字符</span>。</td> </tr> <tr> <td>prev</td> <td>string</td> <td>自定義字符串</td> <td>默認值:"«"。<span class="red">上一頁顯示字符</span>。</td> </tr> <tr> <td>next</td> <td>string</td> <td>自定義字符串</td> <td>默認值:"»"。<span class="red">下一頁顯示字符</span>。</td> </tr> <tr> <td>showTurnTo</td> <td>boolean</td> <td>true或false</td> <td>默認值:false(不顯示)。<span class="red">是否顯示「跳轉」項</span>,true時顯示。爲true時,頁碼輸入框輸入完畢,按下<span class="red">回車鍵便可當即執行跳轉</span>。輸入頁碼小於<span class="red">startPage</span>跳轉首頁,反之跳至尾頁。</td> </tr> <tr> <td>animateType</td> <td>string</td> <td> "animation"<br/> "jumpy"<br/> "fast"<br/> "normal"<br/> "slow"<br/> "verySlow" </td> <td> 默認值:"animation"。<span class="red">動畫過渡模式</span>。<br/> 當即,對應animationTime=0<br/> 100ms,對應animationTime=100<br/> 200ms,對應animationTime=200<br/> 400ms,對應animationTime=400<br/> 800ms,對應animationTime=800<br/> </td> </tr> <tr> <td>animationTime</td> <td>number</td> <td>自定義數字</td> <td>默認值:300。<span class="red">僅爲animateType爲animation時生效</span>,設置<span class="red">動畫過渡時間(ms)</span>。</td> </tr> <tr> <td>callBack</td> <td>function</td> <td>自定義方法</td> <td>默認值:打印頁碼。用於<span class="red">回調函數擴展方法</span>。</td> </tr> </table> </div> <!–文檔說明 結束–> <!–demo 開始–> <!–默認–> <div class="part part1"> <p>默認:</p> <div class="simplePaging"></div> <script> $(".simplePaging").simplePaging(); </script> </div> <!–總頁數88,顯示頁數8–> <div class="part part2"> <p>總頁數88,顯示頁數8:</p> <div class="simplePaging2"></div> <script> $(".simplePaging2").simplePaging({ allPage: 88,//總頁數 showPage: 8//顯示頁數 }); </script> </div> <!–第一頁數字6,初始化跳轉到8–> <div class="part part3"> <p>第一頁數字6,初始化跳轉到8:</p> <div class="simplePaging3"></div> <script> $(".simplePaging3").simplePaging({ allPage: 88,//總頁數 showPage: 9,//顯示頁數 startPage: 6,//第一頁頁碼數字 initPage: 8//加載完畢自動跳轉到第n頁 }); </script> </div> <!–animationTime設置爲50,回調顯示頁碼–> <div class="part part4"> <p>animationTime設置爲50,回調顯示頁碼:</p> <div class="simplePaging4"></div> <div class="page simplePaging4PageNum"></div> <script> $(".simplePaging4").simplePaging({ allPage: 88,//總頁數 showPage: 9,//顯示頁數 startPage: 1,//第一頁頁碼數字 initPage: 5,//加載完畢自動跳轉到第n頁 animateType: "animation",//過渡模式:動畫「animation」、跳動「jumpy」、快速移動「fast」、正常速度移動「normal」、緩慢的速度移動「slow」、異常緩慢的速度移動「verySlow」 animationTime: 50,//animateType爲animation時,動畫過渡時間(ms) callBack: function (num) { $(".simplePaging4PageNum").text(num) } }); </script> </div> <!–animateType爲"jumpy"–> <div class="part part5"> <p>animateType爲"jumpy":</p> <div class="simplePaging5"></div> <div class="page simplePaging5PageNum"></div> <script> $(".simplePaging5").simplePaging({ allPage: 88,//總頁數 showPage: 9,//顯示頁數 animateType: "jumpy",//過渡模式:動畫「animation」、跳動「jumpy」、快速移動「fast」、正常速度移動「normal」、緩慢的速度移動「slow」、異常緩慢的速度移動「verySlow」 callBack: function (num) { $(".simplePaging5PageNum").text(num) } }); </script> </div> <!–animateType爲"verySlow"–> <div class="part part6"> <p>animateType爲"verySlow":</p> <div class="simplePaging6"></div> <div class="page simplePaging6PageNum"></div> <script> $(".simplePaging6").simplePaging({ allPage: 88,//總頁數 showPage: 9,//顯示頁數 startPage: 6,//第一頁頁碼數字 initPage: 18,//加載完畢自動跳轉到第n頁 first: "首頁",//首頁顯示字符 last: "尾頁",//尾頁顯示字符 prev: "«",//上一頁顯示字符 next: "»",//下一頁顯示字符 animateType: "verySlow",//過渡模式:動畫「animation」、跳動「jumpy」、快速移動「fast」、正常速度移動「normal」、緩慢的速度移動「slow」、異常緩慢的速度移動「verySlow」 callBack: function (num) { $(".simplePaging6PageNum").append(num+" ") } }); </script> </div> --> <!--顯示跳轉按鈕--> <div class="part part7"> <p>顯示跳轉按鈕:</p> <div class="simplePaging7"></div> <div class="page simplePaging7PageNum"></div> <script> $(".simplePaging7").simplePaging({ allPage: 10,//總頁數 showPage: 5,//顯示頁數 startPage: 1,//第一頁頁碼數字 initPage: 1,//加載完畢自動跳轉到第n頁 showTurnTo: true,//是否顯示跳轉按鈕,false不顯示,true顯示 animateType: "normal",//過渡模式:動畫「animation」、跳動「jumpy」、快速移動「fast」、正常速度移動「normal」、緩慢的速度移動「slow」、異常緩慢的速度移動「verySlow」 animationTime: 300,//animateType爲animation時,動畫過渡時間(ms) callBack: function (num) { $.ajax({ type:'GET', //發送請求的地址以及傳輸的數據 url:'https://www.apiopen.top/satinCommentApi?id=27610708&page='+num+'', //服務器返回的數據類型 dataType:'json', success:function(data){ var a=data.data.normal.list; console.log(a) $(".simplePaging7PageNum").empty(); for(var i=0;i< a.length;i++){ $(".simplePaging7PageNum").append(a[i].content+'<br/>') } }, error:function(jqXHR){ alert(0) } }); } }); </script> </div> <!--顯示跳轉按鈕(頁面加載完畢不回調callBack)--> <!--<div class="part part8"> <p>顯示跳轉按鈕(每次頁面第一次加載完畢不回調callBack):</p> <div class="simplePaging8"></div> <div class="page simplePaging8PageNum"></div> <script> $(".simplePaging8").simplePaging({ allPage: 88,//總頁數 showPage: 9,//顯示頁數 startPage: 1,//第一頁頁碼數字 initPage: 1,//加載完畢自動跳轉到第n頁 initPageClick:false,//每次頁面加載完畢後,是否觸發initPage頁的綁定事件 showTurnTo: true,//是否顯示跳轉按鈕,false不顯示,true顯示 animateType: "normal",//過渡模式:動畫「animation」、跳動「jumpy」、快速移動「fast」、正常速度移動「normal」、緩慢的速度移動「slow」、異常緩慢的速度移動「verySlow」 animationTime: 300,//animateType爲animation時,動畫過渡時間(ms) callBack: function (num) { $(".simplePaging8PageNum").append(num+" ") } }); </script> </div>--> <!--demo 結束--> </body> </html>
cssjavascript
.spPage ul li, .spActiveBg, .spPrev, .spFirst, .spLast, .spNext, .spTurnTo input, .spTurnTo .btn { display: inline-block; width: 28px; height: 28px; line-height: 28px; border: 1px solid #ddd; font-size: 12px; text-align: center; vertical-align: top; *display: block; *float: left; } .spPage ul li, .spActiveBg, .spPrev, .spFirst, .spLast, .spNext, .spTurnTo .btn { -moz-user-select: none; -khtml-user-select: none; user-select: none; cursor: pointer; } .spPage ul li:active, .spActiveBg:active, .spPrev:active, .spFirst:active, .spLast:active, .spNext:active, .spTurnTo .btn:active { color: #f90; } .spPrev, .spNext { font-size: 16px; } .spPage { display: inline-block; font-size: 0; height: 30px; vertical-align: top; *display: block; *float: left; } .spTurnTo { position: relative; display: inline-block; font-size: 0; width: 65px; height: 30px; vertical-align: top; margin-left: 10px; *display: block; *float: left; } .spTurnTo input { *margin-left: -10px; } .spTurnTo input:focus { outline: 0; } .spTurnTo .btn {; margin-left: 5px; } .spTurnToAllPageTip { display: none; position: absolute; width: 100%; height: 100%; line-height: 30px; top: -100%; font-size: 12px; text-align: center; left: 0; background-color: #ccc; z-index: 3; color: #000; } .spTurnTo input:focus ~ .spTurnToAllPageTip { display: block; } .spTurnTo:hover .spTurnToAllPageTip { *display: block; } .spPage .spCover { position: relative; width: 150px; height: 30px; overflow: hidden; } .spActiveBg { position: absolute; top: 0; left: 0; border: 1px solid transparent; background-color: #367fa9; z-index: 2; } .spPage ul { position: absolute; top: 0; left: 0; width: 390px; font-size: 0; overflow: hidden; } .spPage ul li { list-style-type: none; overflow: hidden; } .spPage ul li p { position: relative; z-index: 3; } .spPage ul li.active { color: #fff; }
jscss
/* * 原創-反饋請郵件至:361899429@qq.com * 建立於20180426 最後修改20180510 */ (function ($) { $.fn.extend({ simplePaging: function (opts) { //設置默認參數 var opt = { allPage: 12,//總頁數 showPage: 5,//顯示頁數 startPage: 1,//第一頁頁碼數字 initPage: 1,//加載完畢自動跳轉到第n頁(初始化激活頁) initPageClick:true,//每次頁面加載完畢後,是否觸發initPage頁的綁定事件 first: "首頁",//首頁顯示字符 last: "尾頁",//尾頁顯示字符 prev: "«",//上一頁顯示字符 next: "»",//下一頁顯示字符 showTurnTo: false,//是否顯示跳轉按鈕,true顯示,false不顯示 animateType: "animation",//過渡模式:動畫「animation」、跳動「jumpy」、快速移動「fast」、正常速度移動「normal」、緩慢的速度移動「slow」、異常緩慢的速度移動「verySlow」 animationTime: 300,//animateType爲animation時,動畫過渡時間(ms) callBack: function (num) { console.log(num) } }; //合併參數 var option = $.extend(opt, opts); /*初始化激頁碼不能大於或小於開始頁碼*/ if (option.initPage < option.startPage) { option.initPage = option.startPage } else if (option.initPage > option.startPage + option.allPage - 1) { option.initPage = option.startPage + option.allPage - 1 } /*過渡模式跳動時間設置*/ if (option.animateType !== "animation") { switch (option.animateType) { case "jumpy": option.animationTime = 0; break; case "fast": option.animationTime = 100; break; case "normal": option.animationTime = 200; break; case "slow": option.animationTime = 400; break; case "verySlow": option.animationTime = 800; break; } } /*顯示頁至少有1頁,而且不能大於總頁數*/ option.showPage <= 0 ? option.showPage = 1 : option.showPage; option.showPage > option.allPage ? option.showPage = option.allPage : option.showPage; /***************/ var dialog = {}; var simplePaging = $(this); var spPrev = $("<div class='spPrev'>"); var spFirst = $("<div class='spFirst'>"); var spPage = $("<div class='spPage'>"); var spCover = $("<div class='spCover'>"); var spActiveBg = $("<div class='spActiveBg'>"); var spLast = $("<div class='spLast'>"); var spNext = $("<div class='spNext'>"); var spTurnTo = $("<div class='spTurnTo'>"); var ul = $("<ul>"); var delay = false;//延時,不用修改,此項用於前一個點擊未徹底執行時,阻止其它事件觸發 var init = true;//是否初始化加載頁面 var centerShowPage; if (option.showPage % 2 === 0) { centerShowPage = Math.floor((option.showPage - 1) / 2) } else { centerShowPage = Math.floor(option.showPage / 2) } /*程序開始*/ dialog.init = function () { //插件頁碼 ul.append(spActiveBg); for (var i = 0, j = option.startPage; i < option.allPage; i++, j++) { var li = $("<li>"); li.html("<p>" + j + "</p>").on("click", function () { if (!delay) { changePage($(this).text()) } }); ul.append(li) } //上一頁 spPrev.text(option.prev).on("click", function () { if (!delay) { var num = ul.find("li.active").text() - 1; changePage(num) } }); //首頁 spFirst.text(option.first).on("click", function () { if (!delay) { var num = ul.find("li:first").text(); changePage(num) } }); //尾頁 spLast.text(option.last).on("click", function () { if (!delay) { var num = ul.find("li:last").text(); changePage(num) } }); //下一頁 spNext.text(option.next).on("click", function () { if (!delay) { var num = ul.find("li.active").text() - 0 + 1; changePage(num) } }); spCover.append(ul); spPage.append(spCover); simplePaging.append(spPrev, spFirst, spPage, spLast, spNext); spCover.width(ul.find("li").outerWidth(true) * option.showPage);//頁碼中間寬度 ul.width(ul.find("li").outerWidth(true) * option.allPage).find("li").eq(option.initPage - option.startPage).trigger("click");//頁碼總寬度 //顯示跳轉 if (option.showTurnTo) { var input = $("<input type='text'>"); var btn = $("<div class='btn'>"); var spTurnToAllPageTip = $("<div class='spTurnToAllPageTip'>"); input.val(option.startPage).change(function () { var num = $(this).val(); num > (option.allPage + option.startPage - 1) ? num = (option.allPage + option.startPage - 1) : num; num <= option.startPage ? num = option.startPage : num; $(this).val(num); }); btn.text("跳轉").on("click", function () { if (!delay) { var num = input.val(); changePage(num) } }); $(document).keyup(function (event) { var e = event || window.event; var k = e.keyCode || e.which; if (k == 13 && input.is(":focus")) { btn.trigger("click"); input.blur(); } }); spTurnToAllPageTip.text("共" + (option.allPage + option.startPage - 1) + "頁"); spTurnTo.append(input, btn, spTurnToAllPageTip); simplePaging.append(spTurnTo).width(ul.find("li").outerWidth(true) * (option.showPage + 6) + 15); } else { simplePaging.width(ul.find("li").outerWidth(true) * (option.showPage + 4)); } }; /*改變頁碼函數*/ function changePage(num) { if (num < option.startPage || num > option.allPage + option.startPage - 1) { return false; } else if (ul.find("li.active").text() == num&&!init) { return false; } else if (isNaN(num)) { return false; } delay = !delay; num = Number(num); var leng = num - option.startPage; var liWidth = ul.find("li").outerWidth(true); ul.find("li.active").removeClass("active"); spActiveBg.animate({"left": liWidth * (num - option.startPage)}, option.animationTime); if (leng <= centerShowPage) { ul.animate({"left": 0}, option.animationTime, function () { autoActive() }); } else if (leng >= option.allPage - centerShowPage - 1) { ul.animate({"left": -liWidth * (option.allPage - option.showPage)}, option.animationTime, function () { autoActive() }); } else { ul.animate({"left": -liWidth * (leng - centerShowPage)}, option.animationTime, function () { autoActive() }); } function autoActive() { delay = !delay; ul.find("li").eq(num - option.startPage).addClass("active"); if(init){ init = false; if(option.initPageClick){ option.callBack(num); } }else { option.callBack(num); } } } dialog.init(); } }); })(jQuery);