Overhang.js - Ein jQuery-Plugin für Dropdown-Benachrichtigungsnachrichten

Wie nervig sind die Standard-JS-Benachrichtigungsfelder? Sie fühlen sich wie ein Relikt aus einer primitiven Ära der Webentwicklung.

Heutzutage können wir machen unauffällige Benachrichtigungsmeldungen die die gleiche Information teilen, aber Unterbrechen Sie nicht die Benutzererfahrung. Und genau das können Sie damit machen overhang.js.

Dieses kostenlose jQuery-Plugin kann benutzerdefinierte Benachrichtigungsleisten hinzufügen das fallen von oben auf dem Bildschirm. Sie sind über CSS positioniert und mit JavaScript animiert, Sie können also von einem festen Punkt oben herunterfallen unabhängig von der Seitenlänge.

Sie können Nachrichten erstellen nach einer bestimmten Zeit automatisch schließen, oder andere das Benutzereingabe erforderlich.

Nachrichten können Relais Erfolg, Fehler, Fehler oder einfache Benachrichtigungen mit Informationen zum Benutzer oder zur Seite. Nachrichten können auch haben ihre eigenen Ja / Nein-Tasten Benutzer Fragen wie eine JavaScript-Eingabeaufforderung stellen.

Es gibt sogar eine Option zum Erstellen von Eingabeaufforderungen Dropdown mit einem Eingabefeld. Dies wäre perfekt für ein E-Mail-Anmeldeformular.

Überhang.js unterstützt alle gängigen Browser, die von jQuery unterstützt werden und es ist auch so unterstützt von jQuery UI für die animierten Funktionen.

Neben den jQuery & jQuery-UI-Bibliotheken müssen Sie dies auch tun Fügen Sie eine benutzerdefinierte CSS-Datei ein mit dem Plugin. Du kannst immer Verbinden Sie dies mit dem Stylesheet Ihrer Website HTTP-Anfragen reduzieren.

Jeder Anruf an die Überhang() Methode kann Nehmen Sie eine beliebige Anzahl von Parametern. Diese sind namens “Optionen” Sie geben Ihnen die volle Kontrolle über jede Benachrichtigungsbox.

Sie können das ändern Animations Geschwindigkeit, Dauer, Lockerung, und Boxgröße / Farbe, zusammen mit anderen Designmerkmalen.

Hier ist ein Beispielausschnitt demonstrieren, wie es geht Erstellen Sie eine Bestätigungsbox:

 // Einige Bestätigung $ ("body"). Overhang (type: "confirm", yesMessage: "Yes please!", NoMessage: "Nein, danke."); 

Sie können sehen, das ist ziemlich einfach und es erfordert nicht viel jQuery-Code.

Zu eine Kopie herunterladen des Plugins können Sie das Repo auf GitHub besuchen, wo Sie auch die Quelldateien direkt durchsuchen können. Oder wenn du willst Weitere Live-Beispiele sehen Besuchen Sie die Overhang.js-Website.