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;
}

Kontakt

Udo Schmal
Udo Schmal

Udo Schmal
Softwareentwickler
Ellerndiek 26
24837 Schleswig
Schleswig-Holstein
Germany




+49 4621 9785538
+49 1575 0663676
+49 4621 9785539
SMS
WhatsApp

Google Maps Profile
Instagram Profile
vCard 2.1, vCard 3.0, vCard 4.0

Service Infos

CMS Info

Product Name:
UDOs Webserver
Version:
0.5.1.200
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Wed, 25. Sep 2024 20:55:53

Development Info

Compiler:
Free Pascal FPC 3.3.1
compiled for:
OS:Linux, CPU:x86_64

System Info

OS:
Ubuntu 22.04.5 LTS (Jammy Jellyfish)

Hardware Info

Model:
Hewlett-Packard HP Pavilion dm4 Notebook PC
CPU Name:
Intel(R) Core(TM) i5-2430M CPU @ 2.40GHz
CPU Type:
x86_64, 1 physical CPU(s), 2 Core(s), 4 logical CPU(s),  MHz