PopupPro – Anpassbare Popup-Bibliothek?

Repository: PopupPro ?

Beschreibung:

PopupPro ist eine moderne, hochgradig anpassbare JavaScript-Bibliothek, die entwickelt wurde, um Benutzerinteraktionen mit vielseitigen und stilvollen Popups zu verbessern. Mit seinem umfangreichen Funktionsumfang, einschlie?lich flexibler Konfigurationen, flüssiger Animationen und reichhaltiger Gestaltungsoptionen, geht es über herk?mmliche Popup-Bibliotheken hinaus. Egal, ob Sie eine einfache Benachrichtigung oder ein komplexes Modal mit verschiedenen Schaltfl?chen ben?tigen, PopupPro bietet eine intuitive M?glichkeit, ansprechende und optisch ansprechende Popups für Ihre Webanwendungen zu erstellen. ?

Merkmale ?

1. Anpassbare Optionen:

   • Titel und Nachricht: Legen Sie ganz einfach den Titel und die Nachricht des Popups fest. ?
   • Hintergrundfarbe und Textfarbe: Vollst?ndig anpassbare Farben für einen ma?geschneiderten Look. ?
   • Gr??e und Stil: Breite, H?he und Randradius anpassbar, passend zu Ihrem Design. ?
   • Schaltfl?che ?Schlie?en“: Option zum Ein- oder Ausschlie?en der Schaltfl?che ?Schlie?en“. ?

2. Animationsunterstützung:

   • Eingebaute Animationen: W?hlen Sie aus vordefinierten Animationen wie Bounce oder erstellen Sie benutzerdefinierte Animationen. ?
   • Animationsdauer: Passen Sie das Animations-Timing für ein reibungsloses Erlebnis an. ?

3. Tastenkonfiguration:

   • Mehrere Schaltfl?chen: Unterstützung für mehrere Schaltfl?chen mit anpassbarem Text. ?
   • Schaltfl?chengestaltung: Gestalten Sie Schaltfl?chen mit verschiedenen Farben, Rahmen und Hover-Effekten. ?
   • Schaltfl?chenaktionen: Definieren Sie Aktionen und Weiterleitungs-URLs für jede Schaltfl?che. ?

4. Responsiv und zug?nglich:

   • Responsives Design: Entwickelt, um auf verschiedenen Bildschirmgr??en und Ger?ten gut zu funktionieren. ??
   • Barrierefreiheit: Fokusverwaltung und Overlay-Klick-Handhabung für verbesserte Barrierefreiheit. ?

5. Fehlerbehandlung:

   • Fehlerberichte: Integrierte Fehlerbehandlung mit Konsolenprotokollierung und Warnungen. ??

Wie sticht PopupPro heraus?

1. Umfangreiche Anpassung: Im Gegensatz zu vielen Popup-Bibliotheken erm?glicht PopupPro eine detaillierte Kontrolle über praktisch jeden Aspekt des Popups, einschlie?lich Animationstypen, Schaltfl?chenstilen und Gesamtdesign. Dieser Grad der Anpassung stellt sicher, dass Ihre Popups so angepasst werden k?nnen, dass sie sich nahtlos in jedes Design einfügen.

2. Animationsflexibilit?t: W?hrend viele Popup-Module grundlegende Ein-/Ausblendanimationen bieten, unterstützt PopupPro eine Vielzahl von Animationen, einschlie?lich benutzerdefinierter Animationen, um ansprechende und dynamische Benutzererlebnisse zu schaffen. Sie k?nnen aus integrierten Animationen wie Bounce w?hlen oder Ihre eigenen definieren.

3. Vielseitige Tastenkonfiguration: PopupPro unterstützt mehrere Tasten mit unterschiedlichen Konfigurationen. Jede Schaltfl?che kann über einen eigenen Text, Stil, eine eigene Aktion und eine optionale Weiterleitungs-URL verfügen, sodass komplexe Benutzerinteraktionen in einem einzigen Popup verarbeitet werden k?nnen.

4. Fokus auf Barrierefreiheit: PopupPro legt Wert auf Barrierefreiheit mit Funktionen wie Fokusverwaltung und Overlay-Klick-Handling und stellt so sicher, dass Ihre Popups für jeden nutzbar sind, auch für Benutzer mit Behinderungen.

5. Fehlerbehandlung und Debugging: Die Bibliothek umfasst eine umfassende Fehlerbehandlung mit Konsolenprotokollierung und Warnmeldungen, wodurch der Debugging-Prozess vereinfacht und die Zuverl?ssigkeit verbessert wird.

6. Klares und modernes Design: Das Standarddesign von PopupPro ist modern und klar und sorgt sofort für ein professionelles Erscheinungsbild. Es bietet au?erdem umfangreiche Styling-Optionen, die Ihren spezifischen Designanforderungen entsprechen.

7. Responsives Design: PopupPro ist so konzipiert, dass es sich an verschiedene Bildschirmgr??en anpasst und sicherstellt, dass Ihre Popups sowohl auf mobilen als auch auf Desktop-Ger?ten gro?artig aussehen.

über den Entwickler ???

Entwickler: Mayank Chawdhari ?

Mayank Chawdhari ist ein engagierter und innovativer Webentwickler mit Schwerpunkt auf der Erstellung eleganter und benutzerfreundlicher Webanwendungen. Mayank verfügt über Fachkenntnisse in JavaScript, CSS und PHP und bringt eine Leidenschaft für sauberen Code und au?ergew?hnliche Benutzererlebnisse mit. Mayank ist bekannt für die Bereitstellung hochwertiger L?sungen und die kontinuierliche Erforschung neuer Technologien und setzt sich dafür ein, den Bereich der Webentwicklung voranzutreiben und die Benutzerinteraktionen zu verbessern. ??

Nutzung?

1. Binden Sie die Bibliothek ein:

Laden Sie PopupPro.js aus diesem Repository herunter oder fügen Sie es direkt in Ihr Projekt ein. Fügen Sie Ihrer HTML-Datei das folgende Skript-Tag hinzu:

<script src="path/to/PopupPro.js"></script>

2. Einfaches Popup-Beispiel:

Fügen Sie eine Schaltfl?che zu Ihrem HTML hinzu und konfigurieren Sie das Popup mit JavaScript:

<button onclick="PopupPro.show({
    title: 'Login Authentication',
    message: 'Wrong password or username, Please try again',
    backgroundColor: '#333',
    textColor: '#fff',
    width: '400px',
    borderRadius: '20px',
    buttons: [
        {
            text: 'Retry',
            style: 'default',
            onClick: function() { console.log('Retry button clicked'); }
        },
        {
            text: 'Cancel',
            style: 'default',
            onClick: function() { console.log('Cancel button clicked'); }
        }
    ]
})">Show Popup</button>

3. Konfigurationsoptionen:

• Titel: Titel des Popups. ??
• Nachricht: Im Popup angezeigter Nachrichtentext. ??
• backgroundColor: Hintergrundfarbe des Popup-Containers. ?
• textColor: Farbe des Textes. ??
• Breite: Breite des Popup-Containers. ?
• H?he: H?he des Popup-Containers (optional). ?
• borderRadius: Randradius für abgerundete Ecken. ?
• closeButton: Boolescher Wert zum Ein- oder Ausblenden der Schlie?en-Schaltfl?che. ?
• animationDuration: Dauer der Popup-Animation. ?
• Animation: Animationstyp (z. B. Bounce). ?
• Schaltfl?chen: Array von Schaltfl?chenkonfigurationen, einschlie?lich Text, Stil, Klickaktion und optionaler Weiterleitungs-URL. ?

4. Umgang mit Tastenaktionen:

Jede Schaltfl?che kann mit einem Text, einem Stil, einer OnClick-Funktion und einer optionalen Weiterleitungs-URL konfiguriert werden. Sofern nicht anders angegeben, wird das Popup automatisch geschlossen, nachdem auf die Schaltfl?che geklickt wurde. ?

5. Erweiterte Verwendung:

Um die Standardeinstellungen anzupassen, verwenden Sie die setOptions-Methode:

<script src="path/to/PopupPro.js"></script>

6. Fehlerbehandlung:

Wenn ein Fehler auftritt, wird dieser in der Konsole protokolliert und in einem Warndialog zur schnellen Fehlerbehebung angezeigt. ??

Mitwirken?

Beitr?ge sind willkommen! Bitte ?ffnen Sie Issues, reichen Sie Vorschl?ge ein oder erstellen Sie Pull Requests. Detaillierte Richtlinien finden Sie in der Datei CONTRIBUTING.md im Repository. ?

Lizenz?

Dieses Projekt ist unter der MIT-Lizenz lizenziert. Weitere Einzelheiten finden Sie in der LICENSE-Datei. ?

Für weitere Unterstützung oder Fragen ?ffnen Sie bitte ein Problem im GitHub-Repository. ?

Das obige ist der detaillierte Inhalt vonPopupPro JS-Modul. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!