Seiteninhalt

• Tagcloud mit jQuery (JS)
• Beipiel
• Integration in die Seite
• Optionen des qpTagcloud-Widget
• Tagcloud-Array
• Browserkompatibilität
• Weitere Informationen zu Tagclouds
• Anregungen und Verbesserungsvorschläge

Tagcloud mit jQuery (JS)

Tagclouds - derzeit ein Modewort, das von vielen mit Web 2.0 oder dynamischen Inhalten assoziiert wird. Vorgestellt wird hier ein jQuery-Widget, dass aus einem bestehenden "Tag-Array" eine Schlagwortwolke generiert.

• Tagcloud-Script (jquery.qp_tagcloud.js)

Beispiel

Integration in die Seite

Zunächst müssen die benötigten JavaScripts im head-Bereich des Dokuments als externe JS eingebunden werden.

(+) <script src="jquery-1.7.js" type="text/javascript"></script>
(+) <script src="jquery-ui-1.8.16.js" type="text/javascript"></script>
(+) <script src="jquery.qp_tagcloud.js" type="text/javascript"></script>

Inline-JavaScript

Um das Tag-Widget nutzen zu können, muss es nach dem Laden des Dokuments initialisiert werden. Hierfür stellt jQuery den Event ready zur Verfügung.

In einem Script-Bereich, der im Dokument nach den extern eingebundenen jQuery-JS stehen muss, wird folgendes notiert:

<script type="text/javascript">
$(function(){
  $('#cloudId').tagcloud({
    words: arrWords,    // Tagcloud-Array
    fontMin: 0.75,      // Minimale Schriftgrösse (hier: 0.75em)
    fontMax: 1.75,      // Maximale Schriftgrösse (hier: 1.75em)
    fontUnit: 'em',     // Einheit für die Schriftgrösse (hier: em)
    animFontDiff: 0.4,  // Angabe der Schriftgrössenänderung beim Hover (hier: 0.4em)
    animDuration: 400   // Dauer der Hover-Animation in Millisekunden (hier: 400 ms)
  })
});
</script>

Tagcloud-Element erstellen

Im HTML-Bereich wird ein Element (Cloud) erstellt, welches die Link-Elemente (Tags) aufnimmt.

<div id="cloudId"></div>
          

CSS

Der Vollständigkeit wegen wird hier auch die CSS-Regeln angezeigt, die zur Auszeichnung für das obige Beispiel verwendet wurden.

#cloudId{
  width: 400px;
  background: #369;
  line-height: 40px;
  padding: #20px;
  border: 1px solid #000;
  margin: auto;
}
#cloudId a{
  font-family: 'Lobster Two', Cursive;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

Für die Schrift eine freier FontStyle der Google web fonts verwendet.

Optionen des qpTagcloud-Widget

Dem Widget können beim Initialisieren einer Tagcloud diverse Optionen übergeben werden, die das Aussehen und Verhalten beeinflussen.

Die Eigenschaften, die angepasst werden können, sind im einzelnen:

• words
  (array) Array, dass die notwendigen Informationen zu den Tags bereitstellt (siehe unten)
• fontMin
  (float) Minimale Grösse der Schrift
• fontMax
  (float) Maximale Grösse der Schrift
• fontUnit
  (string) Einheit der Schrift (z.B. em, px, %)
• animFontDiff
  (float) Schriftgrössenänderung beim Hover
• animDuration
  (integer) Dauer der Hover-Animation in Millisekunden

Tagcloud-Array

Das Tagcloud-Array unterliegt einer vorgegebenen Struktur:

var arrWords = [
  {word: 'Tagbeschriftung 1', count: 1, href: 'http://www.link_1.de'},
  {word: 'Tagbeschriftung 2', count: 2, href: 'http://www.link_2.de'},
  //...
  {word: 'Tagbeschriftung n', count: n, href: 'http://www.link_n.de'}
];

Das Array ist aus einzelnen Objekten (Hashes) aufgebaut, die die nachstehenden Eigenschaften besitzen müssen:

• word
  (string) Text, der in der Cloud angezeigt werden soll
• count
  (integer) Anzahl, wie häufig der Tag vorkommt
• href
  (string) Verlinkung des Tags

Browserkompatibilität

Das Script wurde in folgenden Browsern erfolgreich getestet.

• EI 7, 8 und 9
• Firefox 3+
• Opera 9+
• Google Chrome 12+

Weitere Infos zu Tagclouds

• Wikipedia (Schlagwortwolke)
• Logarithmic Tag Clouds (dburke.info)
• stackoverflow.com

Anregungen und Verbesserungsvorschläge

Anregungen und Verbeserungsvorschläge können gerne hier gepostet werden. Selbstverständlich steht dafür auch das Kontaktformular zur Verfügung.

Foto: aboutpixel.de | chival