JavaScript Page Browser 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: page.htm HTML (713 Bytes) 21.04.2021 22:54 <!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: pages.js JavaScript (4,74 kByte) 25.01.2022 23:45 // coding: utf-8 /*! Created by: Udo Schmal | https://www.gocher.me/ */ (function () { 'use strict'; function Pages(pageslist) { var store = pageslist.dataset.store === 'true'; if (store) { store = 'pages-' + window.location.pathname; } 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"); if (store) { sessionStorage.setItem(store, current); } 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); } if (store && sessionStorage.getItem(store)) { current = sessionStorage.getItem(store); } updateAfter(); } var pagesList = document.querySelectorAll("ul.pages"); for (var i=0; i<pagesList.length; i++) { new Pages(pagesList[i]); } })(); Stylesheet: pages.css StyleSheet (1,2 kByte) 21.04.2021 22:49 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; } Author: Udo Schmal, published: 12.01.2021, last modified: 06.09.2023