JavaScript Page Browser

Beispiel: ohne großes Framework
HTML:
page.htm HTML (433 bytes) 12.01.2021 22:28
<!DOCTYPE html >
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>page browser</title>
    <link rel="stylesheet" type="text/css" href="pages.css" />
  </head>
  <body>
    <ul class="pages">
      <li>
        <p>Seite 1</p>
      </li>
      <li>
        <p>Seite 2</p>
      </li>
      <li>
        <p>Seite 3</p>
      </li>
    </ul>
    <script src="pages.js"></script>
  </body>
</html>
JavaScript:
pages.js JavaScript (1,21 kByte) 12.01.2021 22:15
// coding: utf-8
/** Created by: Udo Schmal | https://www.gocher.me/ */
(function () {
  'use strict';
  function Pages(pageslist) {
    var current = 0;
    var pages = pageslist.children;
    var navi = document.createElement("ul");
    navi.className = "pagenavi";
    pageslist.parentNode.insertBefore(navi, pages.nextSibling);
    function toggle(event) {
      navi[current].classList.remove("active");
      pages[current].classList.remove("active");
      current = this.pageid;
      navi[current].classList.add("active");
      pages[current].classList.add("active");
      event.stopPropagation();
    }
    for (var i=0; i<pages.length; i++) {
      if (pages[i].classList.contains("active")) {
        current = i;
      };
      var nav = document.createElement("li");
      nav.appendChild(document.createTextNode(i+1));
      nav.pageid = i;
      navi.appendChild(nav);
      nav.addEventListener('mousedown', toggle);
    }
    navi = navi.children;
    navi[current].classList.add("active");
    pages[current].classList.add("active");
  }
  var pagesList = document.querySelectorAll("ul.pages");
  for (var i=0; i<pagesList.length; i++) {
    new Pages(pagesList[i]);
  }
})();
Stylesheet:
pages.css StyleSheet (848 bytes) 12.01.2021 22:28
ul.pagenavi, ul.pages {
  font-family: Arial,sans-serif;
  position: relative;
  margin: 0;
  width: 100%;
  list-style: none;}
ul.pagenavi {
  padding-left: 0;
}
ul.pagenavi > 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.pagenavi > li:not(.active):hover {
  cursor: pointer;
}
ul.pagenavi > li.active {
  background-color: #fff;
}
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: , published: , last modified:

Kontakt

Udo Schmal

Udo Schmal
Softwareentwickler
Olvengraben 41
47608 Geldern
Nordrhein-Westfalen
Germany





+49 2831 9776557
+49 1575 0663676
+49 2831 1328709
SMS
WhatsApp

Instagram Profile
vCard 3.0

Service Infos

CMS Info Product Name:
UDOs Webserver
Version:
0.4.2.105
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Mon, 25. Jan 2021 22:37:55
Development Info Compiler:
Free Pascal FPC 3.3.1
compiled for:
OS:Linux, CPU:x86_64
System Info OS:
Ubuntu 20.04.1 LTS (Focal Fossa)
Hardware Info Model:
Hewlett-Packard HP Pavilion dv7 Notebook PC
CPU Name:
Intel(R) Core(TM) i5-2450M CPU @ 2.50GHz
CPU Type:
x86_64, 1 physical CPU(s), 2 Core(s), 4 logical CPU(s), 2891.213 MHz