js, um einen einfachen Front-End-Paging-Effekt zu erzielen
|
Einige Projekte haben ein relativ einfaches Geschäft, aber Front-End-Paging wird häufig verwendet. Die Größe des Plug-Ins ist schwer zu kontrollieren und die Verwendung ist mühsam, deshalb schreibe ich selbst ein einfaches. Umsetzungsideen Verwenden Sie jQuery.slice(), um die Intervallelemente der Teilmenge auszuwählen und dann die Anzeige und Ausblendung zu steuern. Effektdemonstration
Demo-Code
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Demo zur Front-End-Paging-Implementierung</title>
</Kopf>
<Text>
<div Klasse="übergeordnet">
<ul Klasse="box" Stil="min-height: 147px;">
</ul>
<div Klasse="Seitenbox">
<button class="page-btn prev">Vorherige Seite</button>
<span class="page-num">1/1</span>
<button class="page-btn next">Nächste Seite</button>
</div>
</div>
<div Klasse="übergeordnet">
<ul Klasse="box2" Stil="min-height: 63px;">
</ul>
<div Klasse="Seitenbox">
<button class="page-btn prev">Vorherige Seite</button>
<span class="page-num">1/1</span>
<button class="page-btn next">Nächste Seite</button>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<Skript>
/**
* Initialisierung der Seitennummerierung* @param {*}eleBox der Container, der paginiert werden soll* @param {*}size die Anzahl der Einträge pro Seite*/
Funktion InitPagination(eleBox, Größe) {
var box = $(eleBox),
Kinder = Box.Kinder(),
Gesamt = Kinderlänge,
Seitenbox = Box.Weiter(),
Seitennummer = Seitenfeld.find('.page-num'),
maxNum = !Math.ceil(Gesamt / Größe) ? 1 : Math.ceil(Gesamt / Größe);
Seitennummer.Text('1/' + maxNum);
Kinder.verstecken();
Kinder.Slice(0, Größe).zeigen();
pageBox.off().on('klicken', '.prev, .next', Funktion (e) {
var nowNum = parseInt(pageNum.text().split('/')[0]);
wenn ($(this).hasClass('prev')) {
jetztNum--;
wenn (jetztZahl < 1) {
jetztNum = 1
zurückkehren;
}
} anders {
jetztNum++;
wenn (jetztAnzahl > maxAnzahl) {
jetztAnzahl = maxAnzahl
zurückkehren;
}
}
Kinder.verstecken();
children.slice(Größe * (jetztZahl - 1), jetztZahl * Größe).show();
Seitennummer.Text(jetztNummer + '/' + maxNummer);
})
}
// Datenschreiben simulieren var box = $('.box'), box2 = $('.box2'), li = '';
für (sei i = 0; i < 16; i++) {
li += '<li>' + i + '</li>'
}
box.html(li);
box2.html(li);
// Instanziieren Sie den Paginator new InitPagination(box, 7)
neue InitPagination(box2, 3)
</Skript>
</body>
</html>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Zusammenfassung der Wissenspunkte zur MySQL-Master-Slave-Replikation
>>: So kaufen Sie einen Server und richten ihn zunächst ein
Artikel empfehlen
Konfigurationsmethode für die Mehrfachauswahlfunktion von React Mouse
Im Allgemeinen verfügen Listen über Auswahlfunkti...
Vollständiger Vue-Code zur Implementierung der Single-Sign-On-Steuerung
Hier ist zu Ihrer Information eine Vue-Single-Sig...
Beispielcode zum Anzeigen einer Bildlaufleiste nach dem Verkleinern der HTML-Seite
Hier erfahren Sie, wie Sie nach der Verkleinerung...
So halten Sie eine lange Verbindung aufrecht, wenn Sie den Nginx-Reverse-Proxy verwenden
· 【Szenenbeschreibung】 Nach HTTP1.1 unterstützt d...
Kurze Analyse der Einführung und grundlegenden Verwendung von Promise
Promise ist eine neue Lösung für die asynchrone P...
So verwenden Sie HTML+CSS zum Erstellen einer TG-Vision-Homepage
Dieses Mal verwenden wir HTML+CSS-Layout, um eine...
Beispiel für horizontale und vertikale Zentrierung eines Div-Unterelements mit CSS
Div-Grundlayout <div Klasse="Haupt"&...
Tutorial zum Anzeigen und Ändern von MySQL-Zeichensätzen
1. Überprüfen Sie den Zeichensatz 1. Überprüfen S...
Tomcat-Sicherheitsspezifikationen (Tomcat-Sicherheitsverstärkung und -spezifikationen)
Tomcat ist ein Open-Source-Webserver. Das auf Tom...
Beispiel zum Erstellen eines MySQL-Clusters mit Docker
Grundlegende Anweisungen für Docker: Update-Paket...
Sammlung von MySQL-Fuzzy-Abfrageanweisungen
SQL-Fuzzy-Abfrageanweisung Die allgemeine Fuzzy-A...
Drei Möglichkeiten zur Implementierung virtueller Hosts unter Linux7
1. Gleiche IP-Adresse, unterschiedliche Portnumme...
js, um den Popup-Effekt zu erzielen
In diesem Artikelbeispiel wird der spezifische Co...
Ein genauerer Blick auf SQL-Injection
1. Was ist SQL-Injection? SQL-Injection ist eine ...
Lösung für den Fehler von 6ull beim Laden des Linux-Treibermoduls
Inhaltsverzeichnis 0x01 Das Treibermodul konnte n...