JQuery-Plugins und -Bibliotheken für die Webentwicklung

Ein Plugin ist ein wiederverwendbares Code-Tool, das in einer Standard-JavaScript-Datei geschrieben ist. Diese Dateien bieten nützliche jQuery-Methoden, die in Verbindung mit den jQuery-Framework-Methoden verwendet werden können.

Sehen wir uns einige verfügbare Plugins und Beispiele für deren Verwendung an

Plugin Pagepilling oder Stacked Page
PagePiling.js ist ein jQuery-Plugin, um zwischen Abschnitten einer Website zu navigieren, indem Sie mit der Maus scrollen, als ob sie durch ein Menü gleiten würden, die Tastaturpfeile verwenden oder das Mausrad drehen, alle Abschnitte befinden sich auf derselben Website. Das Scrollen ist vertikal, daher wird die Seite gestapelt.

 Start
 Temar
 JQuery

Das Ziel dieses Tutorials ist es, Plugins zu präsentieren
aus der JavaScript-Bibliothek JQUERY

1 - Einführung in jQuery
2 - Grundlegende Programmierung mit jQuery
3 - Erweiterte Effekte mit jQuery

Eine JavaScript-Bibliothek, um weniger zu schreiben und mehr zu tun

Beispiel

Die Konfiguration erfolgt durch Aufrufen der Pagepiling-Funktion, bei der wir die ID des Menüs angeben, dann den Namen jedes Abschnitts angeben, die Hintergrundfarbe für jeden Abschnitt angeben und dann in der rechten Navigation den Namen angeben, der angezeigt wird.

 $ ('# pagina'). pagepiling ({menu: '#menu', Anchors: ['start', 'section', 'sectionb'], sectionColor: ['# 9aceed', '# 2ebe21', '# 2C3E50 '], navigation: {' position ':' right ',' tooltips': ['Home', 'Section A', 'Section B']}

Die Abschnittsklasse ist diejenige, die von der . verwendet wird JQuery-Plugin Um jeden Abschnitt zu erkennen, ist die Intro-Klasse diejenige, die wir angeben, um den Inhalt eines Abschnitts zu beginnen.

Sortierbares Plugin zum Sortieren von Listen
Dieses Plugin ist sehr nützlich, um Listen durch Ziehen mit der Maus neu anzuordnen und Elemente auszutauschen. Die WordPress CMS verwenden dieses Plugin, um Kategorien, Beiträge und Seiten neu anzuordnen.

Nehmen wir ein Beispiel an, wir haben eine Liste mit einer Startmannschaft von Spielern und einer Ersatzmannschaft, wir haben auch eine Liste von Ersatzspielern. Wir werden diese drei Listen erstellen und mit Hilfe des sortierbaren Plugins können wir die Listenspieler einfach austauschen, indem wir ihren Namen mit der Maus auf die Liste ziehen, die wir platzieren möchten, oder ihre Position innerhalb derselben Liste ändern.

 jQuery Sortable - Spielerliste 
jQuery Sortable - Spielerteambesitzer

 Schlagzeilen-Team Ersatzmannschaft Reservespieler 

 
 

José
Alberto
Charles
Artikel 4

 

Javier
Rahmen
Daniel
Genaro

 

Mario
Fernan
Hyazinthe
Manuel
Silvano

 

 

Beispiel

Wie erstelle ich mein eigenes jQuery-Plugin?
Ein jQuery-Plugin ist ein Skript oder eine neue Methode, mit der wir eine neue Funktionalität erstellen, indem wir die Möglichkeiten, die uns jQuery bietet, erweitern oder erleichtern. Um ein Plugin zu erstellen, müssen wir eine Funktion deklarieren und die Funktionalität programmieren in allgemeiner Form, damit es auf jeder Seite oder Website wiederverwendet werden kann.

Wir müssen analysieren und berücksichtigen, dass wir beim Einbinden unseres Plugins in jQuery keine Konflikte mit anderen Bibliotheken oder Funktionen oder sogar mit CSS-Dateien haben, die die Leistung unseres Plugins beeinträchtigen könnten. jQuery ermöglicht es uns, Plugins auf verschiedene Weise zu definieren. Die Elemente einer Website können erst dann sicher manipuliert werden, wenn das Dokument vollständig im Browser geladen ist. jQuery erkennt diesen Zustand, um zu bestimmen, wann auf HTML-Elemente zugegriffen werden kann.

Das Ereignis .ready() wird erst ausgeführt, nachdem das Web geladen wurde und bevor es im Browser angezeigt wird Elemente, die angezeigt werden.

Das Format dieser Funktion ist:

 // Diese Funktionen sind verfügbar, wenn das Web das Laden beendet hat $ (Dokument) .ready (Funktion () {Funktion meine Funktion () {// Code der Funktion}});

Wenn ich statt einer Funktion einen CSS-Selektor anwende. Diese Zeile wird automatisch ausgeführt, wenn die Seite fertig geladen ist, zum Beispiel nach dem Laden der Seite alle Links in grün und mit einer Größe von 14 Pixeln setzen.

 $ (Dokument) .ready (Funktion () {$ ('a').css ({'Farbe': grün, 'Schriftgröße': '14px'});}); 

Als Nächstes erstellen wir ein Plugin, das alle E-Mails entfernt, die in einer Liste von Kommentaren auf einer Website veröffentlicht werden.

 
 
 
Benutzerbewertungen 
 

 
 
Kommentar Lorem Ipsum 1 - Freitag 04.01.2016 12:35 Lorem Ipsum ist einfach Dummy-Text aus Druckern und Textdateien.
[email protected] 
 

 
 
Kommentar Lorem Ipsum 2 - Freitag 04.01.2016 12:35 Lorem Ipsum ist einfach Dummy-Text aus Druckern und Textdateien.
[email protected] 
 

 

 

Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben