GEXF Vizz: Lokalität gegen Arbeitsplatzbedarf

24 Jun

In diesem sehr kurzen Blogartikel möchte ich mich kurz mit dem Designkonflikt von Lokalität gegen Arbeitsplatzbedarf beschäftigen und wie man diesen leicht mit ,Twitter Bootstrap‘ bzw. mit plugins für ,Twitter Bootstrap‘ entschärfen kann.  Nun möchte ich erst einmal an dem Folgenden Screenshot mein Problem ein bisschen näher beschreiben:

Bild

Ich habe hier eine Tabelle die relativ eng ist, trotzdem wollte  ich eine Beschreibung der Metrik haben um die Oberfläche ein wenig präziser zu gestalten und dem Besucher die Möglichkeit zu geben die Metriken leicht nachschlagen zu können. Nun war aber einfach nicht genug Platz da, um diese Beschreibung direkt daneben zu platzieren (Stichwort: Lokalität). Daraufhin habe ich mir die Möglichkeiten von Twitter Bootstrap noch einmal näher angesehen und bin auf sehr einfach zu implementierende tooltips und popovers gestoßen (ganz wie es in GMMW vorgeschlagen wird, wenn man sich in diesem Designkonflikt befindet :)).

Als erstes binden wir die zwei Bibliotheken (für tooltip und popover) ein. Achtung: Die popover Bibliothek benötigt die andere, auch wenn man keine tooltips sondern nur die popovers benutzen will, da sie diese nur erweitert. Danach können wir direkt mit dem Folgenden kleinen JavaScript Schnipsel unseren ,popover‘ darstellen:

$(function ()
{ $("#ccHover").popover({title: 'Closeness Centrality', content: "LOREM IPSUM."});
});

Ok ok, das kleine Stück JavaScript Code braucht noch JQuery, aber ich denke mal, dass ihr das eh eingebunden habt ;-)

Wie man sieht war das Ganze eine Sache von 2 min und man hat nun die Möglichkeit beliebige tooltips auf seiner Oberfläche zu nutzen, um diese insgesamt zu erweitern und doch übersichtlich zu bleiben.
Bild

2 Antworten to “GEXF Vizz: Lokalität gegen Arbeitsplatzbedarf”

  1. wollepb 24. Juni 2012 um 16:29 #

    Danke für den Hinweis. Jetzt wollte ich mir das Ganze live ansehen, aber anscheinend ist’s noch nicht deployed. Happy coding weiterhin…

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: