Beispiel: ohne großes Framework
-
Seite 1
-
Seite 2
-
Seite 3
-
Seite 4
-
Seite 5
-
Seite 6
-
Seite 7
-
Seite 8
-
Seite 9
-
Seite 10
HTML:
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="utf-8" />
<title>page browser</title>
</head>
<body>
<ul class="pages">
<li>
<p>Seite 1</p>
</li>
<li>
<p>Seite 2</p>
</li>
<li>
<p>Seite 3</p>
</li>
<li>
<p>Seite 4</p>
</li>
<li>
<p>Seite 5</p>
</li>
<li>
<p>Seite 6</p>
</li>
<li>
<p>Seite 7</p>
</li>
<li>
<p>Seite 8</p>
</li>
<li>
<p>Seite 9</p>
</li>
<li>
<p>Seite 10</p>
</li>
</ul>
<script src="pages.js"></script>
</body>
</html>JavaScript:
// coding: utf-8
/** Created by: Udo Schmal | https://www.gocher.me/ */
(function () {
'use strict';
function Pages(pageslist) {
var self = pageslist;
var current = 0;
var pages = pageslist.children;
var maxlength = 5;
var previous, next, placeholderPrevious, placeholderNext;
var pagination = [];
// load stylesheet
if (!document.getElementById('pages.css')) {
var style = document.createElement("link");
style.type = 'text/css';
style.href = '/code/pagination/pages.css';
style.id = 'pages.css';
style.rel = 'stylesheet';
document.head.appendChild(style);
}
// create page browser
var navi = document.createElement("ul");
navi.className = "paginator";
pageslist.parentNode.insertBefore(navi, pageslist.nextSibling);
function updateBefore() {
pagination[current].classList.remove("active");
pages[current].classList.remove("active");
}
function updateAfter() {
if (pages.length > 5) {
if (current == 0) {
previous.classList.add('hidden');
} else {
previous.classList.remove('hidden');
}
if (current < 4) {
placeholderPrevious.classList.add('none');
} else {
placeholderPrevious.classList.remove('none');
}
if (current < 2) {
for (var i=1; i < pages.length-1; i++) {
if (i > 4) {
pagination[i].classList.add('none');
} else {
pagination[i].classList.remove('none');
}
}
} else if (current > pages.length-3) {
for (var i=1; i < pages.length-1; i++) {
if (i < pages.length-5) {
pagination[i].classList.add('none');
} else {
pagination[i].classList.remove('none');
}
}
} else {
for (var i=1; i < pages.length-1; i++) {
if ((i < current-2) || (i > current+2)) {
pagination[i].classList.add('none');
} else {
pagination[i].classList.remove('none');
}
}
}
if (current > pages.length-5) {
placeholderNext.classList.add('none');
} else {
placeholderNext.classList.remove('none');
}
if (current == pages.length-1) {
next.classList.add('hidden');
} else {
next.classList.remove('hidden');
}
}
pagination[current].classList.add("active");
pages[current].classList.add("active");
//self.scrollIntoView();
}
function btn(event) {
updateBefore();
if (this.classList.contains('previous')) {
current = current > 0 ? current - 1 : 1;
} else {
current = current < pages.length-1 ? current + 1 : pages.length-1;
}
updateAfter();
event.stopPropagation();
}
function toggle(event) {
updateBefore();
current = this.pageid;
updateAfter();
event.stopPropagation();
}
if (pages.length > 5) {
previous = document.createElement("li");
previous.className = 'previous';
previous.addEventListener('mousedown', btn);
navi.appendChild(previous);
}
var item;
for (var i=0; i<pages.length; i++) {
if (pages[i].classList.contains("active")) {
current = i;
};
item = document.createElement("li");
item.appendChild(document.createTextNode(i+1));
item.pageid = i;
navi.appendChild(item);
item.addEventListener('mousedown', toggle);
pagination.push(item);
if (pages.length > 5) {
if (i==0) {
placeholderPrevious = document.createElement("li");
placeholderPrevious.className = 'placeholder';
navi.appendChild(placeholderPrevious);
}
if (i==pages.length-2) {
placeholderNext = document.createElement("li");
placeholderNext.className = 'placeholder';
navi.appendChild(placeholderNext);
}
}
}
if (pages.length > 5) {
next = document.createElement("li");
next.className = 'next';
next.addEventListener('mousedown', btn);
navi.appendChild(next);
}
updateAfter();
}
var pagesList = document.querySelectorAll("ul.pages");
for (var i=0; i<pagesList.length; i++) {
new Pages(pagesList[i]);
}
})();
Stylesheet:
ul.pages, ul.paginator {
font-family: Arial,sans-serif;
list-style: none;
}
ul.pages {
margin: 0;
position: relative;
width: 100%;
}
ul.paginator {
margin: 0 auto;
display: table;
}
ul.paginator > li {
position: relative;
float: left;
display: block;
color: #666;
font-weight: bold;
border: 1px solid #ccc;
border-radius: 4px;
padding: 2px 5px;
margin: 3px;
top: 2px;
background-color: #eee;
}
ul.paginator > li:not(.active):hover {
cursor: pointer;
}
ul.paginator > li.active {
background-color: #fff;
}
ul.paginator > li.previous::before {
content: '«';
}
ul.paginator > li.next::before {
content: '»';
}
ul.paginator > li.placeholder {
border: none;
background-color: transparent;
}
ul.paginator > li.placeholder::before {
content: '?';
}
ul.paginator > li.hidden {
visibility: hidden;
}
ul.paginator > li.none {
display: none;
}
ul.pages {
padding: 0 0 10px 0;
clear: both;
}
ul.pages > li {
padding: 10px;
border: 1px solid #ccc;
border-radius: 0 5px 5px 5px;
background-color: #fff;
display: none;
}
ul.pages > li::after {
content: ".";
clear: both;
display: block;
visibility: hidden;
height: 0;
}
ul.pages > li.active {
display: block;
}
