Wir stellen vor: Launchy!

Introducing: Launchy!

Müssen Sie jemals ein modales Fenster zu Ihrer App oder Website hinzufügen? Sie haben keine Zeit, es selbst zu programmieren, und sind sich nicht sicher, welches Skript eines Drittanbieters Sie hinzufügen sollen? Was ist das? Sie möchten auch sicherstellen, dass es vollständig über die Tastatur zugänglich und für Bildschirmleser geeignet ist?

Suchen Sie nicht weiter, Freund! Launchy ! ist ein vollständig zugängliches, superleicht zu implementierendes und zu verwendendes modales Fensterskript. Es ist kostenlos und Open Source , gut getestet und funktioniert einfach !

Wie bekomme ich Launchy?

Es gibt ein paar Möglichkeiten, eine Kopie von Launchy in die Finger zu bekommen! :

Raw-Datei enthalten

  1. Kopieren Sie die Quelle von launchy.js und fügen Sie sie in eine neue JavaScript-Datei in Ihrem Projekt ein.

  2. Fügen Sie das Skript in Ihre Vorlage ein:

     <script src="js/launchy.js"></script>

Über NPM

Wahrscheinlich wäre der bessere Ansatz, npm zu verwenden, um das Skript zu installieren. Auf diese Weise erhalten Sie automatisch die neueste Version, sobald diese verfügbar ist!

  1. Führen Sie den Befehl aus:

     npm i launchy-modal- window

    Dadurch wird das Skript in Ihrem node_modules Verzeichnis installiert.

  2. Fügen Sie das Skript in Ihre Vorlage ein:

     <script src="node_modules/launchy-modal-window/launchy.js"></script>

Jetzt, wo ich es habe, wie benutze ich es?

Mit Launchy! ist supereinfach!

  1. Fügen Sie Ihren HTML-Inhalt zu Ihrer Seite oder Vorlage hinzu, die im modalen Fenster angezeigt werden soll, oder suchen Sie nach vorhandenem Inhalt.

    Beispiel:

     <h2>Top 5 Most "Popular" Websites</h2> <ul> <li>Google.com</li> <li>Youtube.com</li> <li>Facebook.com</li> <li>Baidu.com</li> <li>Wikipedia.org</li> </ul>

  2. Wickeln Sie Ihren Inhalt jetzt einfach in einen HTML-Container mit einem data-launchy Attribut ein. Sie benötigen auch ein data-launchy-text Attribut, das in den Launcher-Steuerungstext übersetzt wird:

     <div data-launchy data-launchy-text="Popular websites!"> <h2>Top 5 Most "Popular" Websites</h2> <ul> <li>Google.com</li> <li>Youtube.com</li> <li>Facebook.com</li> <li>Baidu.com</li> <li>Wikipedia.org</li> </ul> </div>

Das ist es! Launchy! erkennt dieses div mit den Attributen data-launchy-* und generiert alles, was zum Erstellen des modalen Fensters für Sie erforderlich ist!

Eine Anmerkung zum Styling

Launchy! enthält standardmäßig keine Stile, verfügt aber über viele CSS-Klassen, in die Sie sich einklinken können!

Sehen Sie sich die Demo-Datei „ styles.scss “ an, um ein Beispiel für die Verwendung der verfügbaren Klassen zu erhalten. Alternativ können Sie in der CodePen-Demo einige benutzerdefinierte Stile ausprobieren!

Lassen Sie mich wissen, was Sie denken und wenn Sie dies ausprobieren, wie es gelaufen ist! Finden Sie einen Fehler oder haben Sie eine Idee? Fühlen Sie sich frei, ein neues Thema zu öffnen !

Fröhliches Hacken! 💻😄💖

Zurück zum Blog