Anzeige
Tutorialbeschreibung

jQuery - Tooltips - Teil 03

jQuery - Tooltips - Teil 03

Tooltips dienen natürlich nicht nur optischen Zwecken. Tatsächlich können sie die Benutzerfreundlichkeit von Webseiten erhöhen. So lassen sich beispielsweise Formulare mit Tooltips ausstatten, um den Benutzern Hilfestellung beim Ausfüllen der Formularfelder zu bieten. Ebenso kann man Tooltips aber auch innerhalb von Tabellen und Listen einsetzen, um erklärende Informationen zu liefern. Und noch etwas wird in diesem Tutorial gezeigt: Nämlich wie sich aus Listen und Tabellen überflüssige Einträge durch Anklicken eines Papierkorbsymbols entfernen lassen.


In den bisherigen Beispielen wurden die Tooltips hauptsächlich dazu genutzt, Bilder mit Zusatzinformationen auszustatten. Das ist allerdings nur eine Möglichkeit. Ebenso können Sie mit den Tooltips auch Formularfelder ausstatten.

Bilder



Gerade bei "unklaren" Eingabefeldern können entsprechende Hinweise durchaus hilfreich sein. Um eine solche Anwendung umzusetzen, müssen Sie zunächst das Formular anlegen. Im einfachsten Fall – da nur mit einem Eingabefeld ausgestattet – könnte das folgendermaßen aussehen:

<form id="formular" action="#">
 <label for="vname">Vorname</label>
 <input id="vname" title="Geben Sie bitte Ihren Vornamen ein."/>

</form>

 
Hier wurden ein label-Element und ein Eingabefeld definiert. Nun soll den Benutzern ein Hinweistext angezeigt werden, wie sie das Feld ausfüllen sollen. Angezeigt werden soll dieser in dem Moment, in dem der Cursor in dieses Feld gesetzt wird.
<script src="jquery.tools.min.js"></script>
<script  type="text/javascript">
/* <![CDATA[  */
    $(document).ready(function() { 
  $("#myform :input").tooltip({
             position: "center right",
             effect: "fade",
 });
 });
/* ]]> */
</script>

Zugriffen wird auf das Eingabefeld über myform :input. Mit position: "center right" legt man fest, an welcher Stelle das Tooltip-Fenster angezeigt werden soll. Im aktuellen Beispiel – und das bietet sich bei Formularen gemeinhin an – fiel die Wahl auf rechts neben dem Eingabefeld.
[Beispiel anzeigen]

Bilder



 
Im vorherigen Beispiel wurde lediglich ein Eingabefeld mit einem Tooltip ausgestattet. Der gleiche Effekt ist natürlich auch im Zusammenhang mit mehreren Formularelementen erzielbar. Auch hierzu wieder ein Beispiel:
[Beispiel anzeigen]
<form id="formular" action="#">
   <label for="vname">Vorname</label>
   <input id="vname" title="Geben Sie bitte Ihren Vornamen ein."/>
   <br />
   <br />
   <label for="cms">Ihr Lieblings-CMS</label>
   <select id="cms" title="Bitte geben Sie Ihr CMS an.">
     <option>Joomla!</option>
     <option>TYPO3</option>
     <option>Plone-</option>
   </select>
   <br />
   <br />
   <!-- email -->
   <label for="newsletter"> Newsletter bestellen
   <input type="checkbox" id="newsletter" title="Bestätigen Sie das Kontrollkästchen." />
   </label>
</form>

Dieses Beispiel zeigt, dass das Formular aus beliebig vielen Elementen bestehen kann. Die Syntax ist jedenfalls die gleiche, die auch im ersten Ein-Feld-Beispiel verwendet wurde.


 

Elemente aus Listen löschen

Vielleicht haben Sie solch eine Anwendung bereits gesehen: Auf einer Webseite ist eine Liste zu sehen, die verschiedene Einträge enthält.
[Beispiel anzeigen]

Bilder



 
Der Übersichtlichkeit halber sollen nun die Besucher der Seite die Möglichkeit haben, einzelne Einträge aus dieser Liste zu entfernen. Dazu brauchen sie nur auf die entsprechenden Papierkorbsymbole zu klicken.

Bilder



Wie die Abbildung zeigt, wurden zwei der drei Einträge ausgeblendet. Eine solche Anwendung lässt sich mit den jQuery-Tools in Verbindung mit jQuery sehr einfach umsetzen. Dafür definiert man zunächst eine herkömmliche Liste.
<ul id="liste">
   <li>Joomla! <img src="delete.png" title="Eintrag löschen" /></li>
   <li>TYPO3 <img src="delete.png" title="Eintrag löschen" /></li>
   <li>Drupal <img src="delete.png" title="Eintrag löschen" /></li>
</ul>

 
Entscheidend sind an dieser Liste zwei Dinge: Die zugewiesene ID liste und die Löschgrafiken delete.png. Zusätzlich besitzen die Grafiken jeweils ein title-Attribut mit einem entsprechenden Hinweistext. Dieser Text wird angezeigt, sobald mit dem Mauszeiger über die Grafik gefahren wird.
<script  type="text/javascript">
 /* <![CDATA[  */
 $(function() {
             $("#liste img").tooltip({
                         position: 'center right',
                         offset: [0, 15],
                         delay: 0
             });
             $("#liste img").click(function() {
                         var eintrag = $(this);
                         eintrag.parents("li").fadeOut(function()  {
                                    eintrag.data("tooltip").hide();
                         });
             });
 });
   /* ]]> */
</script>

Der erste Teil dieser Syntax kommt Ihnen sicherlich bekannt vor. Denn darüber wird lediglich bestimmt, wie die Tooltips angezeigt werden sollen. Hier können Sie die in den vorherigen Tutorials bereits vorgestellten Konfigurationsparameter nutzen.

Interessanter ist da schon der zweite Teil, über den das Löschen bzw. Ausblenden der nicht mehr benötigten Elemente realisiert wird. Verwendet wird dafür einfache jQuery-Syntax. (Es handelt sich hier tatsächlich nur im jQuery, nicht etwa um die jQuery-Tools). Ausgelöst wird dieses Ausblenden durch das Anklicken der aktuellen Grafik. Über eintrag.parents("li") wird auf das jeweilige Listenelement zugegriffen. Das Ausblenden selbst erfolgt über den jQuery-Effekt fadeOut(). Damit nach dem Ausblenden des Listeneintrags auch das dazugehörende Tooltip-Fenster nicht mehr angezeigt wird, notiert man eintrag.data("tooltip").hide().


 

Überflüssige Tabellenzeilen löschen

Was mit Listen möglich ist, lässt sich so auch bei Tabellen realisieren. Angenommen, Ihre Besucher rufen Ihre Webseite auf und finden dort die folgende Tabelle vor:
[Beispiel anzeigen]

Bilder



 
Der Übersichtlichkeit halber möchten Sie es Ihren Besuchern nun ermöglichen, dass diese einzelne Einträge aus dieser Tabelle löschen können.

Bilder



 
So etwas lässt sich ebenfalls vergleichsweise einfach umsetzen. Dafür muss zunächst eine entsprechende Tabelle angelegt werden.
<table id="tabelle" cellspacing="4" border="1"> 
   <tr> 
     <th>Name</th> 
     <th>Kategorie</th>
     <th>Löschen</th> 
   </tr> 
 <tr>
     <td>Joomla!</td> 
     <td>CMS</td> 
     <td><img src="delete.png" title="Eintrag löschen" /></td> 
   </tr> 
   <tr> 
     <td>Photoshop</td> 
     <td>Grafikbearbeitung</td> 
     <td><img src="delete.png" title="Eintrag löschen" /></td> 
   </tr> 
   <tr>
     <td>TYPO3</td> 
     <td>CMS</td> 
     <td><img src="delete.png" title="Eintrag löschen" /></td> 
   </tr>
   <tr> 
     <td>Drupal</td>
     <td>CMS</td> 
     <td><img src="delete.png" title="Eintrag löschen" /></td> 
   </tr> 
   <tr> 
     <td>WordPress</td> 
     <td>CMS</td> 
     <td><img src="delete.png" title="Eintrag löschen" /></td> 
   </tr> 
   <tr> 
     <td>GIMP</td> 
     <td>Grafikbearbeitung</td> 
     <td><img src="delete.png" title="Eintrag löschen" /></td> 
   </tr> 
 </table>

Entscheidend sind innerhalb dieser Syntax die der Tabelle zugewiesene ID tabelle und die Grafik delete.png. Die Syntax ist fast mit der im vorherigen Listenbeispiel verwendeten identisch. Allerdings gibt es durchaus Unterschiede.
<script  type="text/javascript">
/* <![CDATA[  */
 $(function() {
             $("#tabelle img").tooltip({
                         position: 'center right',
                         offset: [0, 15],
                         delay: 0
             });
             $("#tabelle img").click(function() {
                         var zeile = $(this);
                         zeile.parents("tr").fadeOut(function()  {
                                    zeile.data("tooltip").hide();
                         });
             });
 });
/* ]]> */
</script>

Im ersten Teil wird die eigentliche Tooltip-Funktionalität festgelegt. Entscheidend ist dabei lediglich, dass das richtige Element – also die Grafik – angesprochen wird. Die eigentliche Ausblendaktion wird im zweiten Teil der Syntax definiert. Auch dabei wird das Ausblenden an click() gekoppelt. Die betreffende Zeile wird also dann ausgeblendet, wenn eine innerhalb der Tabelle definierte Grafik (#tabelle img) angeklickt wird. Um auf die jeweilige Tabellenzeile zuzugreifen, wird zeile.parents("tr") verwendet. Das Ausblenden selbst wird dann über fadeOut() realisiert. Wie im vorherigen Beispiel muss auch bei dieser Syntax abschließend dafür gesorgt werden, dass neben den Zeilen auch die dazugehörenden Tooltips ausgeblendet werden. Verwendet wird dafür die Anweisung zeile.data("tooltip").hide().


Fazit

In diesem Tutorial wurde noch einmal deutlich, wie vielseitig einsetzbar die jQuery-Tools hinsichtlich der Tooltips sind. Und noch etwas wurde gezeigt: Die jQuery-Tools sind keine "Insel". Vielmehr lassen sie sich auch mit ganz normaler jQuery-Syntax kombinieren, um so beispielsweise Elemente aus Listen und Tabellen auszublenden.


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von pascal.k
  • 05.06.2010 - 13:08

Cool. Wieder was gelernt. THX!

x
×
×