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
Detailliertes Tutorial zur Installation und Deinstallation von MySql
In diesem Artikel finden Sie das Tutorial zur Ins...
Ein netter HTML-Druckcode unterstützt das Umblättern
ylbtech_html_drucken HTML-Druckcode, unterstützt S...
MySQL-Passwort ist korrekt, aber keine lokale Anmeldung möglich -1045
MySQL-Passwort ist korrekt, aber keine lokale Anm...
Lösung für das Problem der zu hohen Durchdringung von Eingabe- und Textbereichsebenen im WeChat-Applet
Die nativen Komponenten des WeChat-Miniprogramms ...
Detaillierte Erklärung zur korrekten Verwendung der if-Funktion in MySQL
Für das, was ich heute schreiben werde, lief das ...
Beispielcode zur Implementierung des Verlaufs-Tag-Menüs mit vue+elementui+vuex+sessionStorage
Im Allgemeinen muss, nachdem sich auf der linken ...
Befehle zum Suchen der Domänen-IP-Adresse im Linux-Terminal (fünf Methoden)
In diesem Tutorial wird erklärt, wie Sie die IP-A...
So gehen Sie mit verstümmelten Zeichen in der MySQL-Datenbank um
In MySQL können in der Datenbank fehlerhafte Zeic...
Vue implementiert die Tabellenpaging-Funktion
In diesem Artikelbeispiel wird der spezifische Co...
Einfache Schritte zur Implementierung der Autorisierung eines öffentlichen H5 WeChat-Kontos
Vorwort Gestern gab es ein Projekt, das die Imple...
Erweiterte MySQL-Funktionen - detaillierte Erläuterung des Konzepts und des Mechanismus der Datentabellenpartitionierung
Inhaltsverzeichnis Partitionierungsmechanismus SE...
Vue implementiert Countdown-Funktion
In diesem Artikelbeispiel wird der spezifische Co...
Der MySQL-Root-Benutzer kann nicht autorisiert werden und löst das Problem der Navicat-Remote-Autorisierungsaufforderung 1044
Schauen Sie sich zuerst die Lösung an #----------...
So implementieren Sie die Ein-Klick-Bereitstellung von NFS unter Linux
Serverinformationen Verwaltungsserver: m01 172.16...
Wird CSS3 SCSS wirklich ersetzen?
Beim Styling unserer Webseiten haben wir die Wahl...