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.

20 iOS 8 Neue Funktionen und Tipps, die Sie kennen müssen

20 iOS 8 Neue Funktionen und Tipps, die Sie kennen müssen

Wenn Sie ein iOS-Benutzer sind und kürzlich auf das neueste iOS 8 aktualisiert haben, sind Sie möglicherweise verwirrt, was eigentlich neu ist . Du bist nicht allein. Wie die meisten früheren Updates von Apple auf seinen Betriebssystemen, sei es für das Desktop- oder das mobile Betriebssystem, hat das neueste iOS 8 in Bezug auf seine Benutzeroberfläche nicht wirklich eine Generalüberholung erfahren.Es gi

(Tech- und Design-Tipps)

30 besten Free Screen Capture Tools und Plugins

30 besten Free Screen Capture Tools und Plugins

Es ist nicht zu leugnen, dass Screenshots die beste Möglichkeit sind, die Aktivität Ihres Computers aufzuzeichnen oder einen Leitfaden zu erstellen, entweder für sich selbst oder für andere. Was jedoch die meisten Benutzer stört, ist das Tool, mit dem Sie schnell und qualitativ hochwertige Screenshots erstellen können .Nun,

(Tech- und Design-Tipps)