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
Serielle und parallele Operationen in JavaScript
Inhaltsverzeichnis 1. Einleitung 2. es5-Methode 3...
Beispiel für die Einrichtung eines Third-Level-Domain-Namens in nginx
Problembeschreibung Durch die Konfiguration von n...
JavaScript zur Implementierung der mobilen Signaturfunktion
In diesem Artikel wird der spezifische JavaScript...
Eine kurze Diskussion über den Spaß von :focus-within in CSS
Ich glaube, einige Leute haben dieses Bild gesehe...
Setzen Sie den Eingang auf schreibgeschützt über deaktiviert und schreibgeschützt
Es gibt zwei Möglichkeiten, schreibgeschützte Eing...
Div kann Inhalte eingeben, ohne die Eingabe als Eingabefeld zu verwenden, um den automatischen Eingabestil zu blockieren
Heute habe ich einen dynamischen Fensterstil für d...
So installieren Sie ELK in Docker und implementieren die Protokollanalyse im JSON-Format
Was ist ELK? ELK ist ein vollständiger Satz von L...
So konfigurieren Sie Anti-Hotlinking für den Nginx-Websitedienst (empfohlen)
1. Prinzip des Hotlinking 1.1 Vorbereitung der We...
Detaillierte Erläuterung des Lesevorgangs für Nginx-Anforderungsheaderdaten
Im vorherigen Artikel haben wir erklärt, wie ngin...
Nicht standardmäßiger Implementierungscode für die MySQL UPDATE-Anweisung
Heute werde ich Ihnen einen Unterschied zwischen ...
Definieren der Mindesthöhe der Inline-Elementspanne
Das Span-Tag wird häufig beim Erstellen von HTML-...
Detaillierte Erläuterung des Lese-Commits der MySQL-Transaktionsisolationsebene
MySQL-Transaktionsisolationsebene anzeigen mysql&...
Analyse und Lösung des Problems, dass die MySQL-Instanz nicht gestartet werden kann
Inhaltsverzeichnis Vorwort Szenarioanalyse Zusamm...
Grundlegende Verwendung und Beispiele von yum (empfohlen)
yum-Befehl Yum (vollständiger Name Yellow Dog Upd...
Eine ausführliche Diskussion zur Detailanalyse im Webdesign
Bei der Designarbeit höre ich oft, dass an der Übe...