Advertisement
  1. Code
  2. Web Development

Erstellen Sie einen besseren Werkzeugtip mit jQuery Awesomeness

by
Read Time:11 minsLanguages:

German (Deutsch) translation by Valentina (you can also view the original English article)

Browser zeigen automatisch einen Werkzeugtip an, wenn Sie ein title-Attribut angeben. Internet Explorer verwendet auch das alt-Attribut. In diesem Tutorial werde ich Ihnen jedoch zeigen, wie Sie schnell ein jQuery-Plugin schreiben, das den typischen Werkzeugtip des Browsers durch etwas Auffälligeres ersetzt.




Eines der großartigen Werkzeugs, die wir in unserer Goodie-Bag für die Webentwicklung haben, sind Werkzeugtips. Ein Werkzeugtip ist eine Box
die angezeigt wird, wenn Sie den Mauszeiger über ein Element wie einen Hyperlink bewegen. Es bietet zusätzliche
Informationen zu diesem Element. Beispielsweise kann ein Link mit wenig oder keinem Text (ein Symbol) verwirrend werden.
Geben Sie in einem Werkzeugtip einen oder zwei zusätzliche Sätze an, um Ihren Benutzern zu erklären, was passiert, wenn sie darauf klicken.


Bevor Sie anfängen

Dieses Tutorial würde wahrscheinlich in die Kategorie Intermediate passen. Die Anweisungen setzen voraus, dass Sie mindestens
Grundlegendes Verständnis von HTML/CSS, Slicing-Techniken und jQuery haben.

Wenn Sie eine Auffrischung zu jQuery benötigen, finden Sie hier einige empfohlene Websites:

Damit Sie eine klare Vorstellung von den in diesem Tutorial enthaltenen Dateien haben, sollte die Dateistruktur wie folgt aussehen,
wie Sie fertig sind.

The file structureThe file structureThe file structure

Hier ist ein Überblick über die einzelnen Dateien/Ordner:

  • Der Bilderordner enthält die folgenden Bilder:
  • - - tipTip.png - erstellt in Schritt 2
  • - - tipMid.png - erstellt in Schritt 2
  • - - tipBtm.png - erstellt in Schritt 2
  • index.html - - erstellt in Schritt 3
  • style.css - erstellt in Schritt 3
  • jquery-1.3.1.min.js - hier herunterladen
  • jquery.betterTooltip.js - - erstellt in Schritt 5

Schritt 1 - Holen Sie sich zuerst ein wenig Kreativität

Öffnen Sie Photoshop oder die Software Ihrer Wahl und erstellen Sie einen fantastisch aussehenden Werkzeugtip. Anstatt auf einem einfachen
weißen Hintergrund zu entwerfen, kann es hilfreich sein, Ihren Tooltip auf einem ähnlichen Hintergrund wie auf Ihrer Website zu erstellen.
Auf diese Weise fügt es sich nahtlos ein. Zum größten Teil gibt es keinen richtigen oder falschen Weg,
um diesen Schritt abzuschließen. Verwenden Sie einfach Ihre Fantasie und Kreativität.

Initial Tooltip DesignInitial Tooltip DesignInitial Tooltip Design

Schritt 2 - Schneiden und würfeln Sie Ihren Werkzeugtip

Für dieses spezielle Design müssen Sie den Werkzeugtip in 3 verschiedene Bilder aufteilen. Für dieses spezielle Design ist ein PNG erforderlich, um die Transparenz zu gewährleisten.
1) Das Oberteil. 2) Eine dünne 1-Pixel-Schicht, die sich vertikal in der Mitte wiederholt. 3) Das Unterteil. Der vierte Teil des folgenden Diagramms zeigt die drei
Stücke, nachdem sie ausgeschnitten wurden.

Legen Sie diese Bilddateien in einem Ordner mit dem Namen "images" ab.

Slice up the tooltipSlice up the tooltipSlice up the tooltip

Hinweis: Internet Explorer mag keine PNG-Transparenz. Auch IE 7 unterstützt es nur teilweise. Wenn Sie ein PNG mit JavaScript animieren,
wird jeder Bereich mit Transparenz während der Bewegung vorübergehend schwarz. Ich verwende dieses Design,
da ich genau weiß, dass es Probleme im IE gibt, die schwer zu umgehen sind.


Schritt 3 - Schreiben Sie das HTML/CSS-Markup

Mit den geschnittenen Bildern können wir zum HTML- und CSS-Markup übergehen. Dies wird der einfachste Teil des Ganzen sein
Tutorial.

Der HTML

Dieses HTML-Markup wird in Kürze in eine externe JavaScript-Datei verschoben. Geben Sie dies einfach in das ein,
was am bequemsten ist und auf das später verwiesen werden kann.

Es gibt drei div-Tags. Zwei in einem Elternteil verschachtelt. Das erste div, "tip", wird verwendet, um alles zusammenzuhalten
und zeigen Sie den oberen Teil des Werkzeugtip tipTop.png an.

"tipMid" enthält schließlich den Text, der in der QuickInfo angezeigt wird. TipMid.png wird vertikal wiederholt.

"tipBtm" dient ausschließlich zur Anzeige des unteren Teils des Werkzeugtips tipBtm.png.

Fügen Sie in index.html eine Reihe von Fülltexten und einigen Elementen hinzu, deren Titelattribute ausgefüllt sind. Sowie:

Im Kopf von index.html müssen Sie einen Link zum Stylesheet und den beiden JavaScript-Dateien erstellen.

Das CSS

Das für diesen Werkzeugtip verwendete CSS ist relativ einfach. Fügen Sie einfach Folgendes zu style.css hinzu

Lassen Sie mich das oben erklären.

Das Umhüllungselement .tip wird verwendet, um alles zusammenzuhalten. Es hat eine obere Polsterung von 37 Pixel.
Durch die Polsterung werden die untergeordneten Elemente nach unten gedrückt,
um das Bild dahinter anzuzeigen. Es hat auch eine absolute Position, so dass wir es über den
Seiteninhalt verschieben können.

Die beiden anderen Klassen haben einfach ein Hintergrundbild und im Fall von .topMid ein Auffüllen, um das zu erhalten
Inhalt, der im Inneren platziert wird, etwas Raum zum Atmen.


Schritt 4 - Warum ein Plugin?

jQuery ist an sich ziemlich cool. Aber die wahre Magie besteht darin, es mit einem Plugin zu erweitern. Wenn Sie Ihre setzen
Code in ein Plugin, machen Sie es wiederverwendbar. Auf diese Weise können Sie eine Codebibliothek aufbauen und niemals schreiben
der gleiche Code zweimal.

Hier ist das Werkzeugtip-Plugin in seiner Gesamtheit:


Schritt 5 - Schreiben Sie das Plugin

Nachdem Sie gesehen haben, wie der Code aussieht, ist es Zeit, ihn zu zerlegen.
Erstellen Sie zunächst eine .js-Datei und nennen Sie sie jquery.betterWerkzeugtip.js, damit sie mit jQuery kompatibel ist
Plugin-Standards.

Fügen Sie in diese .js-Datei den folgenden Code ein:

Dadurch wird eine öffentliche Funktion erstellt, die von head eines Dokuments oder aufgerufen werden kann
eine andere externe .js-Datei. Um Ihr Plugin aufzurufen, müssen Sie die folgende Zeile innerhalb von a aufrufen
$(dokument).ready-Seitenereignis.

In der obigen Zeile wird das Plugin an jedes Element mit dem Klassennamen "tTip" angehängt. Ebenso können Sie
es an jedes Element Ihrer Wahl anhängen.

Stellen Sie die Plugin-Einstellungen zur Verfügung

Um zu vermeiden, dass das Plugin für jedes Projekt geändert werden muss, ist es wichtig, einige der Variablen und Einstellungen verfügbar zu machen,
damit sie von außerhalb des Plugins selbst angepasst werden können. Das ultimative Ziel wäre,
das Plugin niemals zu berühren, sondern nur seine Einstellungen anzupassen. Fügen Sie dazu dem ersten Codeabschnitt
Folgendes hinzu:

Dadurch können die Einstellungen "Geschwindigkeit" und "Verzögerung" geändert werden, wenn das Plugin wie folgt aufgerufen wird:

Diese sind völlig optional. Wenn nicht angegeben, verwendet das Plugin die Standardwerte.

Injizieren Sie das Werkzeugtip-Markup

Erinnern Sie sich an das HTML, das du für den Werkzeugtip eingegeben hast? Es wird nun offiziell erscheinen.
In diesem Codestück wird die jQuery-Inhaltsmanipulation "vorangestellt" verwendet, um den Werkzeugtip
unmittelbar nach dem öffnenden body-Tag einzufügen. Auf diese Weise können wir sicherstellen, dass der Werkzeugtip
über allem positioniert ist.

Die Funktion $(this).each

Dies ist einer der wichtigsten und nützlichsten Aspekte eines jQuery-Plugins. Die Funktion $ (this) .each durchläuft
jedes Seitenelement, das dem Plugin beim Aufrufen zugeordnet ist. In diesem Fall ist es
alle Elemente mit der Klasse "tTip". Wenn jedes Element durchlaufen wird, werden die von Ihnen angegebenen
Eigenschaften und Methoden angewendet.

Das ist ziemlich einfach. Die obere Hälfte besteht aus einer Reihe von Eigenschaften für die Höhe, Breite, x & y-Position und
sogar der Titelattributwert der "tTip" -Elemente. Ich verwende die CSS-Methode jQuery offset(), um die obere und linke Position zu erfassen. Da ist auch ein
Schwebefunktion, die jeder "tTip" -Klasse zugewiesen ist, die Methoden mit der Maus auf und ab ruft. Diese Methoden werden
weiter unten im Tutorial beschrieben.

Ein wichtiger Teil der Funktion $(this) .each ist diese Codezeile, in der das title-Attribut entfernt wird:

Der Sinn dieses Werkzeugtips besteht darin, das Generikum
Werkzeugtip mit einer besseren auffälligen Version auszutauschen. Wenn Sie das title-Attribut nicht entfernen, wird der Browser
verwendet, um den generischen Werkzeugtip zu generieren, erhalten Sie Duell-Werkzeugtips. So was:

Avoid duel tooltipsAvoid duel tooltipsAvoid duel tooltips

Verzögern Sie die Einblendanimation des Werkzeugtips

Diese beiden Methoden, setTimer und stopTimer, werden verwendet, um eine Verzögerung zu erzeugen, ab der der Benutzer den Mauszeiger
ihren Cursor über das Element mit der Klasse "tTip" bewegt und wann der Werkzeugtip angezeigt wird. Dies
ist wichtig, um nervige Benutzer zu vermeiden. Ich bin sicher, wir alle teilen die Frustration, wenn wir versehentlich
über eine dieser Popup-Anzeigen schweben, die im Inhalt von Websites versteckt sind.

Die setTimer-Methode erstellt ein setInterval-Objekt, das nach Ablauf der zugewiesenen Zeit "showTip()" aufruft.
Damit setInterval nicht unendlich schleift, wird die Methode stopTimer aufgerufen, um das setInterval-Objekt zu stoppen.

Positionieren Sie den Werkzeugtip

Die zuvor erstellte Hover-Funktion in der $ (this) .each-Schleife ruft setTip() auf. Sein Zweck ist es,
den Werkzeugtip direkt über dem Element "tTip" zu positionieren. Dies erfolgt vor der Einblendanimation.

Werkzeugtip Einblendanimation

Zu guter Letzt die Funktion showTip(). Dies verwendet den animate() UI-Effekt von jQuery, um den Werkzeugtip einzufügen
während gleichzeitig nach unten schieben.


Verpacken. . .

Sobald Sie fertig und mit Ihren Ergebnissen zufrieden sind, können Sie Ihr Plugin von der einfachen HTML-Seite mit Fülltext in
die reale Welt verschieben und verwenden.

Dies ist ein sehr einfaches Beispiel dafür, was ein Werkzeugtip-Plugin kann. Der lustige Teil wird jetzt sein, es robuster zu machen.
Es gibt viele Möglichkeiten, dieses Plugin zu erweitern. Eine notwendige Verbesserung wäre,
die Position des Tooltips in Bezug auf die Grenzen des Browserfensters zu erkennen und den Tooltip entsprechend anzuzeigen,
damit er nicht abgeschnitten wird.

Vielen Dank, dass Sie dieses Tutorial gelesen haben. Ich hoffe, es gibt Aufschluss darüber, wie Sie mit jQuery die Schnittstelle Ihrer Website
verbessern können.

Lassen Sie die Kommentare beginnen! Ich möchte hören, was du denkst. Hilft diese Technik den Benutzern tatsächlich dabei, sich leichter fortzubewegen,
oder ist sie nur ein weiterer Ärger?

  • Abonnieren Sie den NETTUTS RSS Feed für weitere tägliche Webentwicklungs-Tuts und Artikel.


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.