Advertisement
  1. Code
  2. Web Development
Code

Erstellen einer jQuery-basierten Tag-Cloud

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Eine Tag-Cloud ist eine großartige Möglichkeit, Besuchern Ihres Blogs die wichtigsten interessanten Themen anzuzeigen, die verfügbar sind. In einer Tag-Cloud sind auch zusätzliche Informationen enthalten. Abgesehen von den eigentlichen Links selbst, die den Menschen eine Vorstellung von den Themen geben, die auf Ihrer Website behandelt werden, können sie auch zeigen, wie beliebt die verschiedenen Themen sind. Eine weitere großartige Sache bei Tag-Clouds ist, dass sie verwendet werden können, um die Häufigkeit von allem zu beschreiben. Sie können auf Artikel, Blog-Beiträge, Bilder, Videos oder alles andere verlinken, was Sie auf Ihrer Website im Überfluss haben.


tag cloud

Tag-Clouds sind leicht schlecht zu machen; ob aus einer Designperspektive oder aus einer Codeperspektive. Dank jQuery ist es auch einfach, gute Ergebnisse zu erzielen. Wir werden für dieses Beispiel die heiße neue Version 1.3 von jQuery verwenden und mit PHP und MySql zusammenarbeiten, um einen JSON-Feed unserer Tags bereitzustellen. Das erstmalige Einfügen der Tags in eine Datenbank geht über den Rahmen dieses Lernprogramms hinaus. Es ist jedoch recht einfach, sie über AJAX abzurufen und an eine wartende Seite weiterzuleiten.

Anfangen

Beginnen wir mit der Seite, auf der die Tag-Cloud angezeigt wird. Erstellen Sie in einer neuen Datei in Ihrem Texteditor die folgende Seite:

Speichern Sie dies als tagcloud.html. Zu diesem Zeitpunkt haben wir fast nichts auf der Seite, nur einen einfachen Container für die Tag-Cloud und eine Überschrift der 2. Ebene innerhalb des Containers. Alle anderen benötigten Elemente können nach Bedarf erstellt werden. Wir verlinken auf ein Stylesheet im Kopf, um ein Styling zu erhalten, das wir später hinzufügen werden, und am Ende des Körpers verlinken wir auf jQuery. Wir stellen die Anforderung für die JSON-Antwort in einem benutzerdefinierten Skriptblock nach dem Verweis auf jQuery.

getJSON

Wir verwenden den Alias ​​$, um die Methode getJSON jQuery aufzurufen, bei der es sich um eine übergeordnete Abstraktion der Ajax-Methode handelt. Normalerweise werden jQuery-Methoden für Objekte aufgerufen, die auf Elemente verweisen. Da wir jedoch noch keine Elemente referenzieren, können wir stattdessen den jQuery-Alias ​​verwenden. Dies bedeutet auch, dass das jQuery-Objekt von der Methode nicht zurückgegeben wird. Stattdessen wird die xmlHTTPRequest zurückgegeben.
Die Methode getJSON akzeptiert in diesem Beispiel zwei Argumente (obwohl bei Bedarf weitere verwendet werden können). Die erste ist die URL, an die wir die Anfrage stellen. Da wir ein JSON-Objekt erhalten, ist es sinnvoll, getJSON zu verwenden. Wir könnten die Ajax-Methode verwenden, müssten dann aber weitere Eigenschaften der Anforderung konfigurieren (z. B. den Datentyp). Die Verwendung dieser Methode spart uns also etwas Zeit und Codierung. Am Ende der URL geben wir einen JSONP-Rückruf an - ? callback=? - Dadurch kann der Browser das JSON-Objekt direkt bearbeiten, auch wenn es aus einer anderen Domäne stammt, ohne dass zusätzliche serverseitige Verarbeitung erforderlich ist.

Die Rückruffunktion

Das zweite Argument ist die Rückruffunktion, die wir ausführen möchten, sobald das Objekt an die Seite zurückgegeben wird. Wir haben noch keinen Code in diese Funktion eingefügt, da wir nicht über das JSON-Objekt verfügen, mit dem wir arbeiten können. Wir können in Kürze auf diese Seite zurückkehren, sobald wir das PHP geschrieben haben. Ich habe vorhin gesagt, dass bei der Arbeit mit JSONP-Rückrufen keine serverseitige Verarbeitung erforderlich ist, und dennoch werden wir jetzt PHP schreiben. Dies liegt nur daran, dass niemand die gewünschten Daten bereitstellt. Wir müssen sie also selbst erstellen. Wenn jemand einen JSON-Feed mit beliebten Tags bereitstellen würde, könnten wir immer noch denselben jQuery-Code verwenden, um ihn anzufordern und zu verarbeiten.

Einige PHP

Sie müssen Zugriff auf einen Webserver haben, um die zu erstellende Datei ausführen zu können. Dies kann jedoch Ihr eigener lokaler Webserver sein, den Sie für die Entwicklung verwenden, oder der Server Ihrer Website oder Ihres Blogs wird auf gehostet. Fügen Sie auf einer neuen Seite in Ihrem Texteditor den folgenden Code hinzu:

Speichern Sie dies als tagcloud.php. In diesem Beispiel gehe ich davon aus, dass Sie MySql installiert und konfiguriert haben und eine Datenbank namens tagcloud eingerichtet haben. In dieser Datenbank gehe ich auch davon aus, dass es eine Tabelle namens Tags gibt. Diese Tabelle enthält Zeilen mit den Tags und die Häufigkeit des Auftretens dieser Tags. Ich möchte betonen, dass dies kein Code auf Produktionsebene ist, da die Sicherheit bei seinem Design keine Rolle gespielt hat. Wir brauchen irgendwo, um unsere AJAX-Antwort von diesem Beispiel zu erhalten, und dieser Code gibt uns das irgendwo.

Schauen wir uns kurz an, was wir getan haben.

Zuerst richten wir die Verbindungsinformationen ein, die wir benötigen, um eine Verbindung zur Datenbank herzustellen. Stellen Sie sicher, dass Sie your_password_here durch das tatsächliche Passwort ersetzen, das Sie für den Zugriff auf MySql festgelegt haben. Anschließend stellen wir eine Verbindung zur Datenbank her und legen die Abfrage fest, mit der auf die Daten aus der Tags-Tabelle zugegriffen wird.

Als Nächstes erstellen wir die Zeichenfolge, mit der das JSON-Objekt gestartet wird, bevor wir jede Zeile in der Tabelle durchlaufen und die Abfrage ausführen. Wir erstellen weiterhin die JSON-Zeichenfolge in der for-Schleife und fügen die Daten aus beiden Feldern der aktuellen Zeile als Eigenschaften und Werte hinzu.

Wir führen bei jeder Iteration der Schleife eine einfache Überprüfung durch, indem wir die for-Bedingung verwenden, um festzustellen, ob wir die letzte Zeile in der Tabelle lesen. Wenn wir nicht jedes Objekt durch ein Komma trennen, schließen wir das Objekt, wenn wir es sind. Das Format des JSON-Objekts sind einzelne Datensatzobjekte innerhalb eines einzelnen Container-Arrays innerhalb eines äußeren Objekts.

Anschließend geben wir die Antwort mithilfe einer GET-Anforderung an den Client zurück. Dies ist erforderlich, um den jsonp-Rückruf auf unserer Hauptseite nutzen zu können. Wir müssen den Namen des URL-Parameters angeben, der der URL von im JavaScript folgt. In diesem Beispiel handelt es sich lediglich um einen Rückruf. Wir können ihm jedoch nicht den Namen der Funktion mitteilen, an die wir ihn übergeben möchten, da die Funktion anonym ist. jQuery übernimmt dies für uns und stellt sicher, dass die Daten an die richtige Funktion übergeben werden.

Sobald wir fertig sind, schließen wir die Verbindung. Derzeit können wir noch nichts auf der Seite sehen. Wenn Sie den Lauf jedoch von einem Inhaltsverzeichnis Ihres Webservers aus ausführen und die Registerkarte NET von Firebug verwenden, können Sie die Daten sehen, an die zurückgegeben wird Die Seite:

tag cloud

Verarbeitung des json

Nachdem wir nun mit JSON arbeiten können, kehren wir zur HTML-Seite zurück und machen etwas damit. Unsere erste Aufgabe ist es, sie zu verarbeiten, um die Daten zu extrahieren. Entfernen Sie in tagcloud.html den Kommentar, den wir im Rückruf hinterlassen haben, und fügen Sie den folgenden Code hinzu:

Zuerst erstellen wir ein neues Listenelement, legen sein ID-Attribut fest und hängen es an unseren Container auf der Seite an. Da die Daten im JSON-Objekt nicht in einer bestimmten Reihenfolge vorliegen, entspricht eine ungeordnete Liste unseren Anforderungen. Anschließend verwenden wir die each() jQuery-Methode, um alle Elemente in dem in unserem JSON-Objekt verschachtelten Array zu durchlaufen. Für jede Iteration erstellen wir ein neues Listenelement und einen neuen Link.

Wir setzen den Text jedes Links auf den Wert der Tag-Eigenschaft des aktuellen Objekts aus unserem JSON-Objekt und legen den Titel und eine href fest. Die verwendete href hängt weitgehend davon ab, wie die Seiten mit den Tags generiert werden. Wir können eine Seite im Suchergebnisstil erstellen, auf der alle Seiten aufgelistet sind, die mit dem Tag übereinstimmen, auf das mit PHP oder .NET geklickt wurde (die Ergebnisseite ist) auch über den Rahmen dieses Tutorials hinaus). Der Link wird dann an das Listenelement angehängt, und beide werden an das <ul> angehängt.

Zu diesem Zeitpunkt sollte unsere Seite ungefähr so ​​aussehen:

tag cloud

Es ist sicherlich eine Liste von Links, aber eine Tag-Cloud ist es nicht. Mit ein wenig CSS können wir das Erscheinungsbild des Widgets problemlos optimieren. Machen wir das als nächstes. Fügen Sie in einer neuen Datei in Ihrem Texteditor den folgenden Code hinzu:

Speichern Sie dies als tagcloud.css. Die verwendeten Stile sind eine Mischung aus funktionalen und ästhetischen Regeln, z. B. das Verschieben der Listenelemente und das Festlegen ihrer Abmessungen, mit denen die Funktionsweise des Widgets gesteuert wird. Ich habe die Stile so gering wie möglich gehalten, da Sie zweifellos die meisten rein visuellen Stile ändern müssen, um sie an das Thema Ihrer vorhandenen Website anzupassen.

Ein wichtiger Punkt ist die von uns verwendete Schriftgröße. Für das äußere Containerelement wird eine Schriftgröße von 70% festgelegt. Dies stellt den kleinsten Text dar, der in der Tag-Cloud angezeigt wird. Wir werden die Schriftgröße einiger Tags mithilfe von em-Einheiten im letzten Teil des Skripts anpassen. Das Festlegen einer Grundschriftgröße ist daher für die Konsistenz wichtig.

Wenn Sie die Seite jetzt ausführen, sollte sie wie folgt aussehen:

tag cloud

Das Skript beenden

Eines der Kennzeichen der Tags in einer Tag-Cloud ist, dass die einzelnen Tags entsprechend ihrer Häufigkeit des Auftretens dimensioniert werden. Je beliebter ein Tag ist, desto größer wird es angezeigt. Wir können die freq-Eigenschaft in unserem JSON-Objekt problemlos verwenden, um die Größe jedes Links entsprechend seiner Beliebtheit zu ändern. Fügen Sie zwischen dem Erstellen des neuen Links und dem Anhängen an die ungeordnete Liste in unserem Skript den folgenden Code hinzu:

In Wahrheit könnte die CSS-Methode direkt nach dem Festlegen des title-Attributs des Links leicht an das jQuery-Objekt gekettet werden. Zur besseren Lesbarkeit werden sie hier jedoch getrennt. Innerhalb der CSS-Methode geben wir das fontSize-Stilattribut an und verwenden die ternäre Standardbedingung für JavaScript, um zu überprüfen, ob der aktuelle Wert der freq-Eigenschaft geteilt durch 10 kleiner als 1 ist. Wenn dies der Fall ist, fügen wir der Abbildung 1 hinzu und verketten dann die Zeichenfolge em am Ende. Dadurch wird sichergestellt, dass keines der Tags eine Schriftgröße von weniger als 1em hat, was unserer 70% -Stilregel entspricht, die für das Containerelement festgelegt wurde.

Wenn der Wert der durch 10 geteilten freq-Eigenschaft jedoch nicht kleiner als 1 ist, prüfen wir (unter Verwendung eines anderen ternären Wertes, der der Verschachtelung für Schleifen entspricht), ob er größer als 2 ist. Wenn dies der Fall ist, verwenden wir einfach 2em als Wert für die Eigenschaft font-size. Alle Elemente mit einer Schriftgröße von 2em sind doppelt so groß wie unsere ursprüngliche 70% -Basislinie, die wahrscheinlich so groß ist, wie jedes Tag in dieser Art von Widget erhalten sollte. Alle Werte größer als 1, aber kleiner als 2 werden in ihrer Bruchform verwendet, um eine Schriftgröße zwischen 1 und 2 ems festzulegen. Die letzte Seite sollte nun ungefähr so ​​aussehen wie der folgende Screenshot, wenn sie in einem Browser angezeigt wird:

tag cloud

Zusammenfassung

In diesem Tutorial haben wir gesehen, wie "einfach" es ist, eine einfache Tag-Cloud zu erstellen, die die Tags abruft, die als Teil einer AJAX-Anforderung direkt nach dem Laden der Seite angezeigt werden sollen. Es ist einfach, die Größe jedes Tags abhängig von seiner Häufigkeit mithilfe eines sinnvollen Bereichs von Textgrößen zu ändern. Obwohl das gesamte Erscheinungsbild des Widgets eher minimalistisch gestaltet wurde, sollte es einfach sein, auf dieser Grundlage aufzubauen, um etwas zu schaffen, das sowohl schön als auch funktional ist.

Advertisement
Advertisement
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.