SuperSlide.js

Superslide.js

Ein leichtes, konfigurierbares Gleitmenü für Ihre nächste PWA mit Versprechen. Nur 2k Gziped!

Diese Bibliothek zielt darauf ab, ein hochkonfigurierbares, bereit zu bedienendes Gleitmenü für Ihre nächste Webanwendung bereitzustellen und gleichzeitig native Animationsleistung zu liefern. Es wurde von den OSREC-Technologien erstellt, während BX, unsere PWA für Rechnungen, Zeitverfolgung und Projektmanagement entwickelt wurde.

Installation

 npm install superslide.js

Verwendung

Verweisen Sie auf die Bibliothek in einem Skript -Tag

 < script src =' superslide.js ' > </ script >

Fügen Sie das einfache HTML -Markup hinzu

 < body >
  < div id =' content ' > Content </ div >
  < div id =' menu ' > Menu </ div >
</ body >

Fügen Sie Stile hinzu (damit wir sehen können, was los ist!)

 < style >
  body     { padding: 0px; margin: 0px; }
  #menu    { background: #ccc; }
  #content { min-height: 100vh; min-width: 100vw; }
</ style >

Initialisieren Sie das Menü

 var myMenu = new OSREC . superslide
( {
    slider : document . getElementById ( 'menu' ) ,
    content : document . getElementById ( 'content' ) ,
    animation : 'slideLeft'
} ) ;

// Promise resolves once menu is open
var openPromise = myMenu . open ( ) ;

Probieren Sie die Demo hier aus

Animationen

Standardversion enthält 4 Animationsoptionen:

Slideleft	Slideright	SlideBottom	Slidetop

Die Pro -Version enthält viele weitere Menüanimationen (schauen Sie sich an.

Parameter

• animation ( string ): Alle Animationen in der Animationsbibliothek ( slideLeft , slideRight , slideTop , slideBottom ).

• duration ( integer ): Dauer in Sekunden für die Dia -Animation

• allowDrag ( boolean ): Lassen Sie das Menü über Touch -Ereignisse in die offene oder geschlossene Position gezogen werden.

• slideContent ( boolean ): Schieben Sie den Inhalt zusammen mit dem Menü

• allowContentInteraction ( boolean ): Ermöglichen

• closeOnBlur ( boolean ): Schließen Sie das Menü, wenn der Benutzer überall außerhalb des Menüs klickt oder tippt

• width ( string ): Die Breite des Menüs (für Menüs, die an einer vertikalen Kante sitzen). Beispiele: '60VW' oder '300px' oder '80%'

• height ( string ): Die Höhe des Menüs (für Menüs, die entlang einer horizontalen Kante sitzen). Beispiele: '50VH' oder '300px' oder '80%'

• dragThreshold ( integer ): Die Anzahl der Pixel von der Kante, von der ein Benutzer mit dem Ziehen beginnen kann; Beispiel: 70. Verwenden Sie mit der Option "deglyDrag".

• openThreshold ( integer ): Wenn sich das Menü in der Öffnung befindet, muss die Anzahl der Pixel gezogen werden, bevor es automatisch geöffnet wird. Beispiel: 30. Verwenden Sie mit der Option "dulddrag".

• closeThreshold ( integer ): Wenn sich das Menü in der geschlossenen Position befindet, muss die Anzahl der Pixel gezogen werden, bevor es automatisch geschlossen wird. Beispiel: 20. Verwenden Sie mit der Option "deglyDrag".

• beforeOpen ( callback ): Ausgestellt vor dem Menü beginnt sich zu öffnen

• onOpen ( callback ): Direkt nach dem Öffnen des Menüs ausgeführt

• beforeClose ( callback ): Ausgestellt vor Beginn des Menüs zu schließen

• onClose ( callback ): Ausgestellt, sobald das Menü geschlossen ist

Methoden

• OSREC.superslide.open() Öffnen Sie das Menü. Gibt ein Versprechen zurück, das nach dem Öffnen des Menüs entschlossen ist (dh die Animation abgeschlossen).

• OSREC.superslide.close() Schließen Sie das Menü. Gibt ein Versprechen zurück, das nach Abschluss des Menüs entschlossen ist (dh die Animation abgeschlossen).

• OSREC.superslide.toggle() Schaltet das Menü um. Gibt ein Versprechen zurück, das nach dem Umschalten des Menüs entschlossen ist (dh die Animation abgeschlossen).

• OSREC.superslide.isOpen() true Wenn das Menü geöffnet ist, falsch, wenn geschlossen. Der letzte Zustand, wenn Mitte der Drap. Gibt einen Booleschen zurück.

• OSREC.superslide.ready() prüfen, ob das Menü vollständig initialisiert ist. Gibt ein Versprechen zurück, das bei vollständiger Initialisierung auflöst.

• OSREC.superslide.destroy() das Menü zerstören. Dadurch wird das Menü geschlossen, wenn es vor der Zerstörung geöffnet ist. Gibt NULL zurück

Credits

Erstellt vom BX -Team von Osrec Technologies.

Die Bibliothek wurde im Rahmen unserer Business- und Projektmanagement -App namens BX entwickelt (Sie können sie hier überprüfen).