de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Erstellen Sie einen integrierten Ladeeffekt in Schaltflächen mit LADDA

Es gibt verschiedene Arten von Animationen, die Sie auf Ihre Webseite anwenden können. Animation für Text, modale Box, Übergang und die Fortschrittsanzeige. Für Fortschrittsanzeigen, normalerweise in Form von Balken, zeigt der Fortschritt, den Sie in der Leiste sehen, an, wie viel Fortschritt gemacht (oder geladen) wurde. Wenn Sie jedoch daran interessiert sind, innerhalb einer Schaltfläche Fortschritte zu machen, probieren Sie Ladda aus.

Ladda ist ein jQuery-Plugin, das von Hakim El Hattab erstellt wurde, um Ihnen den Ladeeffekt innerhalb eines Buttons zu geben . Es ist ein UI-Konzept, das effektiv die Lücke zwischen Aktion und Feedback trennt. Die Benutzer erhalten eine Rückmeldung in Form einer Ladeanzeige, anstatt die Seite verlassen zu müssen. Es gibt auch eine Version von Ladda für WordPress.

Grundlegende Verwendung

Ladda kann als eigenständiges Plugin verwendet werden, das keine weiteren Abhängigkeiten benötigt. Um zu beginnen, müssen Sie zuerst sowohl die Dateien ladda.min.js und spin.min.js hinzufügen, die Sie von der GitHub-Seite in Ihrem Projekt erhalten.

Um die Schaltfläche zum Laden der Standard-Ladda-Themen zu verwenden, lade die CSS-Datei von ladda.min.css . Wenn Sie nur die Funktionsschaltflächen ohne das Thema möchten, laden Sie die Datei ladda-themeless.min.css .

HTML-Markup

Um Ladda zum ladda-button zu bringen, musst du die ladda-button Klasse in den Button aufnehmen. Hier ist ein Beispiel:

  

Ladda bietet Ihnen auch Optionen innerhalb des HTML mit Datenattributen für den Button-Stil. Wie Sie oben sehen können, verwendet die Schaltfläche Datenstil für den Animationsstil. Um einen anderen Stil anzuwenden, können Sie die vollständige Liste auf der Demoseite überprüfen.

Um die Farbe zu ändern, können Sie Datenfarbe verwenden. Geben Sie für die Schaltflächengröße die data-size für die Schaltfläche an.

Zusammenführung mit dem Server

Und jetzt, um die Lade-Animation zum Server zu schicken (was die Seite nach der Animation neu lädt), benötigen wir die bind() Methode. Dadurch werden Fortschrittsbuttons gebunden und Ladevorgänge simuliert:

Sie können Ihre Schaltflächen auch mithilfe der Javascript-API mit folgendem Ansatz steuern:

Fazit

Mit der Unterstützung von Bootstrap und der Reaktionsfähigkeit ist Ladda einen Versuch in Ihrem Projekt wert. Darüber hinaus wurde es getestet und es funktioniert gut in der neuesten Version von Chrome, Firefox, Safari sowie IE9 und höher. Zögern Sie nicht, uns Ihre Meinung in das Kommentarfeld zu schreiben.

Lebensechte Origami Artwork in freier Wildbahn [PICS]

Lebensechte Origami Artwork in freier Wildbahn [PICS]

Wir haben bereits eine Sammlung prächtiger Kunstwerke von Won Park präsentiert, einem brillianten Origami-Künstler, der sich darauf spezialisiert hat, aus Dollar-Scheinen lebensechte Kreationen zu machen. Dieses Mal haben wir einen Origami-Künstler gefunden, der den Nutzernamen von FoldedWilderness trägt, der gerne lebensechte Origami-Tiere macht und sie in ihrer natürlichen Umgebung fotografiert .In di

(Tech- und Design-Tipps)

So überprüfen Sie die Browserkompatibilität über Befehlszeilen

So überprüfen Sie die Browserkompatibilität über Befehlszeilen

Der Aufbau einer Website beinhaltet traditionell eine Vielzahl von Technologien, die in allen gängigen Browsern funktionieren können, einige davon teilweise oder gar nicht. Web-Entwickler würden heutzutage immer auf CanIUse verweisen, um zu überprüfen, ob ein bestimmtes Feature in einem Browser oder einer seiner vielen Versionen unterstützt wird.CanIU

(Tech- und Design-Tipps)