分頁插件使用的dome
<!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);
相關文章
- 1. mybatis分頁插件使用
- 2. MyBatis使用分頁插件
- 3. 分頁器的使用-3 JqueryPagination 分頁插件的使用
- 4. Mybatis的分頁插件PageHelper4.1.6的使用
- 5. PageOffice 使用Dome
- 6. SpringBoot之分頁插件PageHelper的使用
- 7. 【MyBatis】MyBatis分頁插件PageHelper的使用
- 8. Bootstrap Paginator 分頁插件的使用
- 9. jQuery分頁插件jqPaginator的使用
- 10. 表格分頁插件的使用
- 更多相關文章...
- • Maven 插件 - Maven教程
- • Eclipse 安裝插件 - Eclipse 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 常用的分佈式事務解決方案
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
