de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Fügen Sie einfache Bild-QuickInfo-Etiketten mit Taggd hinzu

Sie wissen, wie Facebook Gesichter in Fotos beschriften kann ? Nun, Taggd ist ein bisschen wie das CSS / JS-Äquivalent mit Punkten, um zu notieren, wo Tooltips auf einem Bild erscheinen sollen.

Die Bibliothek ist vollständig kostenlos und benötigt keine Abhängigkeiten wie jQuery. Es läuft auf reinem Vanille JavaScript, und es ist super einfach einzurichten.

Sie können ein wenig mehr von der Taggd-Homepage lernen, die eine Demo und einige grundlegende Schritte für den Anfang enthält.

Es gibt auch einen Link zur Online-Dokumentation mit Doclets, einer netten kleinen Web-App, die für die JS-Dokumentation erstellt wurde. Sie können nach Taggd-Versionen suchen oder die aktuelle Version im Master-Zweig durchsuchen .

Von dort erhalten Sie eine riesige Liste von Eigenschaften, die Sie verwenden können. Jedes Dokument wird nach Funktionen aufgeteilt, die auf das Bild addTag() (z. B. addTag() oder getTag() ), gefolgt von Funktionen, mit denen Sie bestimmte Tags (z. B. setPosition() ) setPosition() .

Auch hier läuft alles auf JavaScript, sodass Sie sich keine Gedanken über Syntaxprobleme machen müssen.

Um zu beginnen , schau dir das GitHub Repo an und folge den Setup-Anweisungen.

Sie fügen einfach die Taggd CSS und JS Dateien in Ihr ein Abschnitt und erstellen Sie dann eine neue Instanz der Taggd-Elemente. Diese können einzeln oder in einem Array definiert werden .

Dann an ein Bild anhängen, und presto! Sie sind bereit zu gehen.

Ich würde gerne zusätzliche Funktionen sehen, um die Tag-Labels anzupassen und ihre Form zu ändern. Es wäre toll, ein quadratisches Tag zu kreieren, um ein Objekt zu umgeben statt einen kleinen rosa Punkt. Aber für eine freie Bibliothek ohne Abhängigkeiten kann ich mich nicht sehr beschweren.

Bis jetzt ist diese Bibliothek nur für moderne Browser geeignet und unterstützt keine gradeful degradation. Sie können jedoch immer ein Problem auf der Reposeite öffnen oder versuchen, andere Probleme zu lösen, wenn Sie einfache Probleme sehen. Nichtsdestotrotz ist Taggd immer noch ein Plugin, und es ist praktisch für jedes Projekt zu verwenden.

Auf der Homepage des Autors finden Sie Beispielcode und DL-Links sowie einen Link zur Dokumentationsseite .

Und wenn Sie irgendwelche Fragen oder Anregungen haben, zögern Sie nicht, den Schöpfer Tim Severien auf seinem Twitter @TimSeverien zu melden.

19 Universelle Tastaturkürzel für die meisten Webbrowser

19 Universelle Tastaturkürzel für die meisten Webbrowser

Alle gängigen Internetbrowser verfügen über eigene Tastaturkürzel. Während die meisten von ihnen von einem Browser zum anderen unterscheiden, sind einige dieser Abkürzungen universell, da ein bestimmter Befehl dasselbe auf jedem der Internet-Browser tun wird.In diesem Post werde ich alle diese universellen Tastaturkürzel auflisten, die auf Google Chrome, Mozilla Firefox, Opera, Internet Explorer, Microsoft Edge und Safari angewendet werden können.Hier si

(Tech- und Design-Tipps)

DevTools Showdown: Edge F12 vs Firefox vs Chrome

DevTools Showdown: Edge F12 vs Firefox vs Chrome

Die Entwicklertools von Microsoft Edge, dem neuen Standardbrowser von Windows 10, erhielten ein modernes Design und einige neue Funktionen im Vergleich zum Vorgänger, den F12-Entwicklungstools von Internet Explorer 11.Die Frage, ob Microsoft-Edge-Dev-Tools mit ihren populären Mitbewerbern mithalten können - die Dev-Tools in anderen modernen Browsern wie Mozilla Firefox und Google Chrome - kommt natürlich in den Köpfen vieler Entwickler auf.In d

(Tech- und Design-Tipps)