Viele Webentwickler stürzen sich in das Meer von Open Source Code-Projekten. Fast täglich werden neue Plugins und Frameworks veröffentlicht. Wenn Sie bei der Arbeit beschäftigt sind, kann es schwierig sein, mit den neuesten Releases Schritt zu halten.
In diesem Showcase habe ich über 30 verschiedene jQuery-Plugins zusammengestellt, die alle Webentwickler zu erwähnen haben. Die Entwicklung einer Website-Schnittstelle kann schwierig sein und erfordert sicherlich sorgfältige Präzision. Wenn Sie ein Open Source-Projekt entwickeln, bedeutet dies, dass Sie das Rad nicht neu erfinden. Außerdem sind Sie nicht der einzige, der Fehler im Code entdeckt. Da jQuery eine der stabilsten verfügbaren JavaScript-Bibliotheken ist, arbeiten diese Plugins häufig Hand in Hand, um eine nahtlose Benutzererfahrung zu bieten.
Responsiver, berührungsfreundlicher Audio-Player
Dieser responsive Audioplayer ist das perfekte Beispiel für jQuery bei der Arbeit. Sie fügen einfach die Plugin-Codes ein und erstellen ein beliebiges HTML5-Audioelement. Dieser wird automatisch in einen berührungsfreundlichen Audioplayer mit einer beeindruckenden CSS3-Benutzeroberfläche umgewandelt.
Sidr
Ich bin sicher, dass viele Designer und Entwickler das seitlich verschiebbare Menü erkennen. Dies wurde bei iOS-Mobilanwendungen mit gleitenden Menüschaltflächen in der Symbolleiste populär. Nun kann dieser Effekt für Websites nur mit jQuery und dem Sidr-Plugin repliziert werden. Schauen Sie sich die Live-Demo an und sehen Sie, wie dies in Ihren eigenen Projekten funktionieren könnte.
Imageloader
Erinnerst du dich an all diese Lazyload-Image-Plugins? Es gibt so viele verschiedene Optionen und sogar einige kostenlose Open Source WordPress Plugins wurden veröffentlicht. Dieses spezielle Image Loader-Plugin folgt einem viel schöneren Beispiel, bei dem alle Bilder nach einem Fading-Effekt in einer sequentiellen Reihenfolge geladen werden. Die Live-Demo ist ein hervorragendes Beispiel dafür, wie Sie dies auf Ihre Website anwenden können.
Farbfelder
Obwohl Swatches in vielen Website-Layouts keinen praktischen Nutzen haben, ist es ein wunderbares jQuery-Plugin, um mit bestimmten Farben zu spielen. Dieses Plugin erstellt einen Div-Bereich mit einer Palette verwandter Farben basierend auf Ihrer Auswahl. Das Erstellen eines eigenen Farbschemas kann schwierig sein, und dies ist ein einzigartiges Open-Source-Tool für den Job.
Heiß auf Facebook
Hot bei Facebook ist eine eher obskure Idee. Das Plugin funktioniert jedoch in allen standardkonformen Browsern einwandfrei. Wer also gerne Facebook-Sharing nutzt, ist hier genau richtig! Hot auf Facebook nimmt eine URL und prüft die Gesamtzahl der FB-Freigaben. Dann wird es auf der Seite als Social Media Sharing Badge angezeigt.
Toolbar.js
Das Open Source Toolbar.js-Skript ist relativ einfach auszuführen, hat jedoch seine Einschränkungen. Dieses Plugin erstellt ein kleines Tooltip-Menü mit Symbolverknüpfungen, das auf jedem ausgewählten Element angezeigt wird. Es kann sehr leistungsfähig sein, gekoppelt mit einem Benutzerprofil oder einer anderen Symbolbefehlsoberfläche. Der Effekt ist jedoch eher unklar, seien Sie also nicht überrascht, wenn Sie Schwierigkeiten haben, dies in Ihr Layout zu integrieren.
jQuery PowerTip
Bei der Handhabung von Tooltip-Schwebeflügen können Sie jQuery PowerTip verwenden. Dies ist ein relativ neues Plugin, das als Open Source auf Github veröffentlicht wurde. In der Live-Demo finden Sie ein besseres Beispiel. Die einfachste Erklärung ist das Erstellen von Popup-Menüs für QuickInfos, wenn Sie über ein HTML-Element fahren.
jqTimeline
Das jQtimeline-Plugin bietet eine einzigartige Funktionalität, die ich noch nie gesehen habe. Sie können eine horizontale Timeline mit Datumsereignissen in der Liste erstellen. Auf diese Weise können Benutzer auf ein Ereignis klicken, um weitere Informationen anzuzeigen. Es hat sicherlich seinen praktischen Nutzen, erfordert aber ein wenig benutzerdefinierten Code, um richtig arbeiten zu können.
Swipebox
Das Swipebox-Plugin ist eine mobile, ansprechende jQuery-Bildergalerie. Dies ist insbesondere für mobile Webapps und Websites gedacht, die auf Smartphones und Tablets reagieren. Die Bildergalerie nimmt den gesamten Bildschirm ein und Sie können sogar zwischen den anderen Bildern in der Diashow streichen.
MixItUp
MixItUp hat viele verschiedene benutzerdefinierte Optionen, und ich würde sagen, dass dies eher einem zwischengeschalteten jQuery-Plugin ähnelt. Sie müssen einige Konzepte verstehen, wenn Sie das Standard-Setup anpassen und dies auf Ihrer Seite hinzufügen. Sie ermöglicht jedoch das schnelle Sortieren von Elementen innerhalb einer festgelegten Galerie, wie Portfolioelemente, Bilder, Fotos und vieles mehr.
jQuery Rechtschreibprüfung
Designer, die mit der Rechtschreibprüfung im Browser vertraut sind, sind vielleicht ein Fan oder hassen es völlig. Dieses jQuery-Plugin bietet eine andere Lösung, mit der Sie die Rückruffunktion bearbeiten können, um verwandte Vokabeln anzuzeigen. Es ist ein gewagtes Plugin, das völlig kostenlos verwendet werden kann, aber auch ein wenig Anpassung erfordert, um korrekt zu funktionieren.
Hochscrollen
ScrollUp gehört zu meinen Top 5 neuen Lieblings-Plugins, nur wegen seiner Benutzerfreundlichkeit und der vorgefertigten Stile. Fügen Sie einfach die JS-Dateien in Ihre Webseite ein und stellen Sie den Versatzabstand von oben ein. Nachdem ein Besucher über diese Grenze hinaus geblättert wurde, wird in der unteren Ecke ein kleines festes div angezeigt. Es ist eine ausgezeichnete Alternative, um Ihren eigenen Button von Grund auf zu codieren.
Nod-Frontend-Validierung
Nod ist ein Frontend-Validierungs-Plugin für HTML-Eingabeformulare. Mit jQuery können Sie die tatsächliche Basis für gute und schlechte Daten festlegen und diese Werte überprüfen, nachdem der Benutzer das Formular übermittelt hat. Es wird nicht durchlaufen, bis alle Kriterien erfüllt sind.
Select2
Ausgewählte Dropdown-Menüs wurden immer in ihren eigenen CSS-Stilen festgehalten. Es gibt einige Online-Beiträge, in denen Sie Ihr eigenes Auswahlmenü anpassen können, die jedoch häufig nicht von allen Browsern unterstützt werden. Dieses jQuery-Plugin Select2 ist eine Erweiterung des typischen HTML-Auswahlfelds. Fügen Sie einfach das Plugin in Ihre Überschrift ein und alle ausgewählten Menüs können mit etwas Code aktualisiert werden.
Tooltipster
Abgesehen von dem anderen großen jQuery-Tooltip-Plugin muss ich Tooltipster für die alternative Codebase empfehlen. Ich habe Tooltipster in einigen Projekten verwendet und es funktioniert genauso wie beschrieben.Viele der Optionen sind so einfach zu implementieren, dass Entwickler ihre eigenen QuickInfos mit nur wenigen CSS-Eigenschaften anpassen können.
Wirbel
Mit diesem seltsamen Karussell-Plugin können Sie eine dynamische rotierende Gruppe von Elementen erstellen. Das jQuery Vortex-Plugin ist relativ neu und es werden regelmäßig Aktualisierungen angewendet. Ich denke jedoch, dass es eine Erwähnung wert ist, da die Techniken immer noch nicht so Mainstream sind, wie Sie vielleicht erwarten.
ich überprüfe
iCheck ist eines der besten jQuery-Plugins, die ich je gefunden habe, um Ihre Eingabefelder zu aktualisieren. Kontrollkästchen und Optionsfelder erhalten ein völlig neues Aussehen, wenn Sie den richtigen Haut- und Farbstil auswählen. Ich gebe zu, dass iCheck anfangs mit so vielen verwirrenden Optionen etwas täuscht. Je mehr Sie üben, desto einfacher wird es, dieses Plugin in Ihre Website (s) zu integrieren.
Beliebiger Listen-Scroller
ALS oder Any List Scroller ist ein typisches jQuery-Plugin für Image-Diashows. Anstatt die Bilder in einer größeren Ansicht anzuzeigen, werden sie wie ein herkömmlicher Bildlaufcontainer für Homepageobjekte gedreht. Es gibt Optionen, um Pfeile auf beiden Seiten einzufügen und Besuchern das manuelle Umschalten zwischen internen Elementen zu ermöglichen.
Tumbo
Tumbo ist ein ziemlich rudimentäres Plugin für die schnelle Anzeige eines Feeds aus Ihrem Tumblr-Blog. Dies kann aktualisiert werden, um den Inhalt eines beliebigen Tumblr-Blogs anzuzeigen, indem Sie einfach die Subdomain-URL verwenden. Natürlich wird dies nicht jeder brauchen, aber es ist gut zu wissen, dass Entwickler APIs wie Tumblr verwenden, die in JavaScript-Plugins integriert sind.
Spektrogramm
Apropos APIs - Dieses Spectragram-Plugin ist eine schnelle Methode für den Zugriff auf Fotos vor Instagram. Sie fügen einfach die JS-Dateien in Ihren Header ein und geben dann einen Benutzer oder eine Suchabfrage an. Das Spectragram-Plugin ruft alle zugehörigen Ergebnisse ab und verlinkt auf die ursprüngliche Aufnahme.
jQuery Stripe
Das jQuery Stripe-Plugin bietet eine eher traditionelle Bildergalerie. Jedes Foto wird nur als kleines vertikales Stück angezeigt, auf das Sie klicken können, um das gesamte Bild anzuzeigen. Es gibt auch Pfeile auf der rechten und linken Seite, um zwischen den Ansichten zu wechseln. Ich glaube nicht, dass dies die beste Option ist, aber es kann eine ungewöhnliche Lösung für atypische Website-Layouts sein.
SocialCount
SocialCount behandelt ein weiteres seltsames Feature, das viele Anfragen erhält. Mit diesem Plugin können Sie die Zahlen für Twitter-, Facebook- und Google+ Freigaben schnell herausholen. Geben Sie einfach die Ziel-URL ein und Sie können Social-Media-Badges an beliebiger Stelle auf Ihrer Webseite anzeigen.
Custom Scrollbar Plugin
jQuery Custom Scrollbar ist ein faszinierendes Plugin, das viel Aufmerksamkeit verdient. Das ist schon eine ganze Weile online, aber die Auswirkungen sind immer noch erstaunlich. Mit diesen benutzerdefinierten Bildlaufleisten können Sie schnell ein div-Element mit einer Overscroll-Funktion erstellen. Es ist perfekt für den Umgang mit benutzerdefinierten Inhalten, die nicht das gesamte Layout beanspruchen sollten.
Smallipop
Smallipop ist ein weiteres schönes jQuery-Tooltips-Plugin. Sie sollten sich einige Beispiele ansehen, um zu sehen, wie dies implementiert wird. Jedes Tooltip-Plugin befolgt seine eigenen Regeln, und es kann sein, dass es nicht für jeden geeignet ist. Aber ich denke, Smallipop ist eine großartige Wahl für Entwickler, die in JavaScript-Bibliotheken anfangen.
jPanelMenu
jPanelMenu ist ein weiteres beliebtes jQuery-Plugin für die Verwendung einer Schieberegler. Sie können diese Codes schnell in Ihre Website aufnehmen, um die Effekte auf jeder Seite hinzuzufügen. Richten Sie einfach das Element "Öffnen / Schließen" aus und jedes Mal, wenn der Benutzer klickt, wird die verborgene Navigation angezeigt. Werfen Sie einen Blick auf die Live-Demo, um diesen Effekt in Aktion zu sehen.
Intro.js
Intro.js ist ein einführendes Plug-In für jQuery. Es gibt viele Optionen und benutzerdefinierte Einstellungen, die Sie auswählen können. Dies ermöglicht jedoch auch eine einzigartigere Website-Leistung. Ich denke, Intro.js ist das beste jQuery-Plugin für die Erstellung einer geführten Website-Tour. Das CSS ist leicht umformbar und Sie können mit allen möglichen Layouts demo demonstrieren.
Leuchtkasten
Die Liste der Shadowboxes und Lightboxes ist seit 2011 enorm gewachsen. Ich denke, das jQuery-Plugin Lightbox_me ist ein weiteres schönes Beispiel für diese Funktion. Sie können Bilder, Formulare, Videos und andere HTML-Dateien direkt in einer modalen Lightbox einrichten. Die JS-Codes sind leicht zu erlernen und das Plugin erfordert keine ganze Reihe von benutzerdefinierten Bearbeitungen.
jQuery-Karussell
Ich denke, das abitgone jQuery Carousel ist definitiv eine eigenartige Option. Dies zeigt die vorherigen / nächsten Verknüpfungen direkt in der Bilddatei an, in der alle anderen Bilder eingebettet sind. Es sieht sehr schön aus in kleineren Räumen und Sie können das Beispiel beliebig skalieren. Ich finde, es ist einen Blick wert, aber es erscheint nicht als Ihre Lieblingsoption.
Superbox
Kennen Sie die aktuellen Ergebnisse von Google Images? So funktioniert jQuery Superbox mit Ihren eigenen statischen Bildern. Besucher haben die Möglichkeit, Miniaturansichten zu durchsuchen, und wenn sie darauf klicken, wird ein neues div angezeigt, in dem das vollständige Bild angezeigt wird. Ich mag dieses Plugin wirklich sehr, weil die Benutzererfahrung Google sehr nahe kommt. Und da Google bereits mit Google vertraut ist, ermöglicht es einen nahtlosen Datenaustausch ohne viel Verwirrung.
KGallery
KGallery ist eine weitere wunderschöne jQuery-Bildergalerie mit Diashow-Funktionen. Die Standardsymbole sind nicht permanent und Sie können natürlich andere Bits der Benutzeroberfläche aktualisieren. Was mich wirklich interessiert, ist die Option, kleinere Miniaturansichten in das Galeriedesign aufzunehmen. Es ist ein recht einfaches Plugin für das Setup, und ich würde empfehlen, die Live-Demo zu testen, um zu sehen, wie Sie die Implementierung beurteilen.
jQuery Litelighter
In den letzten Jahren wurden zahlreiche großartige Syntax-Highlighter veröffentlicht. Aber jQuery Litelighter ist ein weiteres Plugin, das ich für die Einfachheit und Grazie sehr schätze. Sie können für fast jede gängige Sprache hervorgehobene Syntax generieren. Sie sollte mit den gängigsten Webbrowsern funktionieren.
bxSlider
bxSlider bietet einfach eine der besten Benutzererfahrungen für eine Bilddiaschau. Sie können dieses Recht auf Ihrer Homepage oder auf einer anderen Seite der Website implementieren. Benutzer, die mit den Funktionen der Bilddiaschau vertraut sind, erhalten ein solides Design. Auch die jQuery-Codes sind sehr minimalistisch und beeinträchtigen die Website nicht über lange Ladezeiten.
MeanMenu
Das MeanMenu-Plugin ist eine neuere Version und auf jeden Fall einen Blick wert. Ich finde es sehr gut, wie das Standardnavigationsdesign basierend auf der Gesamtzahl der internen Links automatisch die Größe ändert. Sie können auch Untermenü-Links hinzufügen, die Besuchern eine schnellere Ansicht Ihres Nav-Menüs ermöglichen. Das Design ist nicht für jeden eine gute Wahl, es ist jedoch ein solides Plugin und kann sich bei einigen Website-Projekten als nützlich erweisen.
