Erstellen Sie eine Tolle Statusanzeige

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Als Panic der Welt ihr Statuspanel vorstellte, war ich sowohl beeindruckt als auch inspiriert. Im heutigen Tutorial und Screencast zeige ich Ihnen, wie Sie eine ähnliche Statusanzeige erstellen!

Überblick

Unsere Statusanzeige wird Folgendes haben: Oben wird ein Diagramm mit Seitenaufrufen angezeigt. Es würde ein weiteres Tutorial erfordern, um diese Daten von Google Analytics zu erhalten. Daher verwenden wir für heute nur einige zufällige Daten. Dann werden wir unsere bevorstehenden Ereignisse aus Google Kalender abrufen. Wir haben eine Projektstatustabelle, in der Daten aus einer Datenbank abgerufen werden. Schließlich zeigen wir Tweets von unserer "Firma" und anderen Personen, die unsere Firma erwähnen. Lassen Sie uns gehen!

Bevor wir anfangen, sollte ich erwähnen, dass die Symbole, die ich in diesem Projekt verwende, aus dem kostenlosen Set des Smashing Magazine mit dem Titel On Stage stammen. Leider kann ich sie nicht in die Demo-Dateien aufnehmen, aber hier ist eine Liste der Dateinamen, in die ich sie für das Projekt umbenannt habe (der größte Teil des Projekts hängt von den Dateinamen ab). Ich habe die Größe der Symbole auf 64 x 64 Pixel geändert. Im Tutorial sollte klar sein, welche Symbole wo hingehören.

bazquirk.png
behind.png
complete.png
foobar.png
gadget.png
gizmo.png
jane.png (bearbeitete buddy.psd)
joe.png (bearbeitete buddy.psd)
john.png (bearbeitete buddy.psd)
ontime.png
sally.png (bearbeitete buddy.psd)
waiting.png
widget.png

Schritt 1 Starten Sie es mit dem Markup

Während unsere fertige Seite dynamischen Inhalt enthält, erstellen wir zuerst die Benutzeroberfläche, indem wir statischen Inhalt verwenden, um alles einzurichten, und arbeiten dann später am serverseitigen Code.

Hier ist unsere vorläufige Hülle:

 
	<!DOCTYPE html> 
	<html> 
	<head> 
	    <meta charset='utf-8' /> 
	    <title>Status Board</title> 
	    <link rel="stylesheet" href="default.css" /> 
	</head> 
	<body> 
	<div id="wrap"> 
	    <div id="data"></div> 
	    <div id="projects"></div>  
	    <div id="twitter"></div> 
	</div> 
	</body> 
	</html>

Gar nicht so schwer: drei Divs in einem Wrapping Div. Schauen wir uns jetzt die div#data an. Darin werden zwei Divs eingefügt:

1
2	<div id="visits"></div>
3	<div id="schedule">
4	<h1>Schedule</h1>
5	<ul>
6	<li><em>3/22</em>Meet with Chris <small>details go here</small></li>
7	<li><em>3/26</em>Holiday</li>
8	<li><em>4/15</em>Foobar Deadline</li>
9	<li><em>5/24</em>Office Party</li>
10	</ul>
11	</div>

Wir werden in Kürze div#visits mit JavaScript ausfüllen. Für den div#schedule haben wir eine Liste erstellt. Später werden wir diese Daten aus Google Kalender abrufen, aber dies gibt uns etwas, worauf wir die Benutzeroberfläche aufbauen können. Der wichtige Teil ist, dass wir das Ereignisdatum in em-Tags und die Ereignisdetails in small-Tags eingeschlossen haben.

Der nächste Hauptabschnitt sind div#projects. Dies zeigt uns die neuesten Informationen über die Projekte, an denen unser kleines imaginäres Unternehmen arbeitet. Genau wie der Zeitplan werden wir dies aus einer Datenquelle (in diesem Fall einer Datenbank) abrufen. Im Moment ist es nur eine statische Tabelle:

 
	<table> 
	    <tbody> 
	        <tr> 
	            <td><img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/062_status_board/images/gizmo.png" /></td><td>Gizmo</td> 
	            <td><img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/062_status_board/images/ontime.png" />On Time</td> 
	            <td>Joe Sally</td> 
	        </tr> 
	        <tr> 
	            <td><img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/062_status_board/images/widget.png" /></td><td>Widget</td> 
	            <td><img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/062_status_board/images/behind.png" />Behind</td> 
	            <td>John Joe Jane</td> 
	        </tr> 
	        <tr> 
	            <td><img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/062_status_board/images/gadget.png" /></td><td>Gadget</td> 
	            <td><img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/062_status_board/images/complete.png" />Complete</td> 
	            <td>Sally Jane</td> 
	        </tr> 
	        <tr> 
	            <td><img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/062_status_board/images/foobar.png" /></td><td>Foobar</td> 
	            <td><img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/062_status_board/images/waiting.png" />Waiting</td> 
	            <td>John Joe</td> 
	        </tr> 
	        <tr> 
	            <td><img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/062_status_board/images/bazquirk.png" /></td><td>Bazquirk</td> 
	            <td><img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/062_status_board/images/ontime.png" />On Time</td> 
	            <td>Sally Jane Joe</td> 
	        </tr> 
	    </tbody> 
	</table>

Das div#twitter zeigt uns zwei Gruppen von Tweets: die von unserer Firma erstellten und die von unserer Firma erwähnten. Wir werden Remy Sharps twitterlib verwenden, um dies zu tun. Hier ist das Markup, das wir brauchen:

1
2	<div id="our_tweets"></div>
3	<div id="their_tweets"></div>

Schließlich importieren wir die verwendeten Skripte:

jQuery
twitterlib
jQuery Flot Plugin
- ExplorerCanvas für IE (für Flot erforderlich)
jQuery Pause / Resume Animation Plugin

Natürlich würden Sie in der Produktion all dies in einer Datei zusammenfassen.

 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 
	<script type="text/javascript" src="js/twitterlib.min.js"></script> 
	<!--[if IE]><script type="text/javascript" src="js/excanvas.compiled.js"></script><![endif]--> 
	<script type="text/javascript" src="js/jquery.flot.min.js"></script> 
	<script type="text/javascript" src="js/jquery.pauseanimate.js"></script> 
	<script type="text/javascript" src="js/statBoard.js"></script>

Die letzte Datei hier, statBoard.js, wird unsere eigene Kreation sein.

Vollbild

Schritt 2 Verschönern Sie es mit dem CSS

Bevor wir mit dem CSS beginnen, sehen Sie hier, wie unser fertiges Produkt aussehen wird. Dies sollte das CSS etwas klarer machen.

Zuerst richten wir den Body und h1 ein sowie alle unsere Hauptinhalts-Divs so ein, dass sie ihre Kinder enthalten.

 
	body { 
	    background: #f3f3f3; 
	    font:bold 25px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif; 
	    color:#494949; 
	} 
 
	h1 { margin:0; padding:0; font-size:40px; } 
 
	#wrap > div { overflow:hidden; }

Als nächstes betrachten wir das erste Inhalts-Div, das eine ID von data hat.

 
	#data { 
	    margin-bottom:40px; 
	} 
	#visits { 
	    width:48%; 
	    margin-right:2%; 
	    float:left; 
	    font-size:12px; 
	} 
	#tooltip { 
	    position: absolute; 
	    display:none; 
	    padding: 2px 5px; 
	    background:#494949; 
	    color:#fefefe; 
	    border-radius:15px; 
	    -moz-border-radius:15px; 
	    -webkit-border-radius:15px; 
	}

Wir geben diesem Div einen unteren Rand von 40px, nur zum Atmen. Dann wenden wir uns dem ersten untergeordneten Element zu, div#visits: Bewegen Sie es nach links, stellen Sie die Breite und den rechten Rand ein und reduzieren Sie die Schriftgröße.

Woher kommt dieser Tooltip Div? Es wird eingefügt, wenn wir das Analysediagramm mit einem jQuery-Plugin erstellen. Hier legen wir die visuellen Stile fest, positionieren sie absolut und verstecken sie. Wenn wir mit der Maus über Punkte in unserem Diagramm fahren, wird es positioniert und dann eingeblendet.

Schauen wir uns als nächstes den div#schedule an:

 
	#schedule  { 
	    float:left; 
	    background:#494949; 
	    color:#f3f3f3; 
	    width:44%; 
	    padding:3%; 
	    overflow:hidden; 
	    border-radius:15px; 
	    -moz-border-radius:15px; 
	    -webkit-border-radius:15px; 
	} 
	#schedule ul { 
	    list-style-type:none; 
	    margin:0; 
	    padding:0; 
	} 
	#schedule li { 
	    margin-bottom:5px; 
	    width:1000px; 
	} 
	#schedule em { 
	    font-style:normal; 
	    background:#aa3636; 
	    margin-right:10px; 
	    display:inline-block; 
	    width:50px; 
	    padding:0 10px; 
	    border-radius:15px; 
	    -moz-border-radius:15px; 
	    -webkit-border-radius:15px; 
	} 
	#schedule small { 
	    font-size:12px; 
	    color:#bababa; 
	    font-style:italic; 
	}

Dies sollte nicht zu schwer herauszufinden sein; Wir möchten, dass der Zeitplan für div#schedule von div#visits liegt, also schweben wir ihn nach links und stellen sicher, dass die Breite + Polsterung 50% beträgt. Fügen Sie dann etwas Farbe hinzu und rasieren Sie die Ecken ab. Der overflow:hidden ist wichtig. Denken Sie daran, dass wir die Ereignisdetails abrufen. Wir möchten nicht, dass die Details in mehr als eine Zeile eingeschlossen werden, also lassen wir sie überlaufen und verbergen dann den Überlauf.

Das Styling für ul und li ist ziemlich einfach; Wir haben dem li eine Breite von 1000px gegeben, damit diese Details nicht umbrochen werden.

Als nächstes haben wir die ems im div#schedule. Hier werden unsere Daten hingehen. Wir entfernen die übliche Kursivschrift, indem wir den Schriftstil auf normal setzen. Durch Einstellen der Anzeige auf Inline-Block können wir eine Breite von 50px einstellen. Da wir das Datum im Format m/d anzeigen, sollte dies in jedem Fall gut aussehen. Und natürlich um die Ecke.

Schließlich verwenden wir für die Details das small Tag. Wir legen Schriftgröße, Schriftstil und Farbe fest.

Der nächste Hauptabschnitt unserer Statusanzeige sind div#projects.

 
	#projects table { 
	    width:100%; 
	    border-spacing:5px;  
	} 
	#projects td { 
	    padding:2px; 
	    background:#efefef; 
	    border-radius:3px; 
	    -moz-border-radius:3px; 
	    -webkit-border-radius:3px; 
	} 
	#projects td:not(:last-child) { 
	    text-align:center; 
	} 
	#projects img { 
	    vertical-align:middle; 
	}

Wir stellen sicher, dass unsere Tabelle die gesamte Breite der Seite einnimmt. Wir geben den Zellen auch einen Rand mit border-spacing. Wir geben jeder Zelle etwas Polsterung und runden die Ecken leicht ab. Verwenden wir dann einige CSS3-Selektoren, um den Text in jeder Zelle zu zentrieren. Erwarten Sie den letzten. Wenn der Browser :not() oder :last-child nicht unterstützt, wird diese Regel ignoriert und alle Zellen bleiben linksbündig: keine große Sache. Schließlich zentrieren wir die Bilder vertikal.

Wir haben nur noch die Twitter-Div übrig:

 
	#twitter > div {  
	    overflow:hidden; 
	    font-size:20px; 
	} 
 
	#twitter ul { 
	    list-style-type:none; 
	    width:5000px; 
	    position:relative; 
	} 
	#twitter li { 
	    float:left; 
	    margin-right:10px; 
	} 
	#twitter img { 
	    vertical-align:middle; 
	    margin-right:10px; 
	    border:0; 
	    height:20px; 
	    width:20px; 
	}

Derzeit enthält unser div#twitter nur zwei leere divs. Wir werden die Tweets bald mit JavaScript laden, aber Folgendes möchten wir tun: Jedes div in div#twitter ist ein Festzelt, das Tweets über den Bildschirm rollt. Daher setzen wir diese divs so, dass ihr Überlauf ausgeblendet wird, und setzen ihre Schriftart auf 5 Pixel weniger als der Rest der Seite. Für die Listen entfernen wir die Aufzählungszeichen, positionieren sie relativ (damit wir die richtige Positionierung für das Auswahlrechteck animieren können) und stellen die Breite auf 5000 Pixel ein. Ich werde die Breite erklären, sobald wir zum JavaScript kommen. Jedes Listenelement (jeder Tweet) wird nach links verschoben und mit einem rechten Rand versehen. Schließlich werden die Bilder (wir zeigen Twitter-Profilbilder an) entsprechend gestaltet.

Schritt 3 Interagieren Sie mit dem JavaScript

Auf zum JavaScript! Damit wir den globalen Namespace nicht überladen, erstellen wir eine einzelne Funktion, die die Methoden unserer Statusanzeige zurückgibt. Hier ist die Shell, mit der wir beginnen werden:

 
	var statBoard = function () { 
	    return { 
	        graphVisits    : function (selector) {}, 
	        twitterize     : function (selector, fn, subject) {}, 
	        iconizeWorkers : function (selector) {} 
	    } 
	}

Lassen Sie uns zuerst graphVisits erstellen. Möglicherweise möchten Sie Analysen aus Google Analytics oder einer Statistik-App Ihrer Wahl abrufen. Wir werden jedoch nur einige zufällige Daten für unser Beispiel generieren.

Zuerst richten wir unsere Variablen ein:

 
	var el = $(selector), 
	    data = [], prev = null, 
	    showTooltip = function (x, y, contents) { 
	        $('<div />', { 
	            id : 'tooltip', 
	            text : contents, 
	            css : { 
	                top: y + 5, 
	                left: x + 5 
	            } 
	        }).appendTo('body').fadeIn(200); 
	    };

Wir haben das Element, in das wir das Diagramm einfügen, das Datenarray, das wir an das Flot jQuery-Plugin übergeben, prev, das Sie in Verwendung sehen werden, und eine showTooltip-Funktion. Dadurch wird der zuvor gestaltete div#tooltip erstellt, an den Körper angehängt und eingeblendet.

 
	el.height($('#schedule').outerHeight()); 
 
	for (i = 0; i < 32; i++) { 
	    data.push([new Date(2010, 2, i).getTime(), Math.floor(Math.random() * 6000)]); 
	}

Als Nächstes legen wir die Höhe des Elements fest, das das Diagramm enthalten soll. Das Flot Plugin benötigt dies. Wir setzen es auf die gleiche Höhe des div#schedule; die outerHeight-Methode von jQuery gibt die Höhe des Objekts einschließlich seiner Auffüllung und seines Rahmens zurück. Dann füllen wir unsere Array-data auf; das Flot-Plugin akzeptiert ein Array von Arrays, wobei jedes innere Array eine x- und eine y-Koordinate hat. Für unsere x-Koordinaten verwenden wir ein JavaScript-Datum. Die Werte, die wir an den Datumskonstruktor übergeben, sind das Jahr, der Monat und der Tag (es gibt mehr, um die Uhrzeit festzulegen). Wir setzen das Jahr auf 2010 und den Monat auf März (es basiert auf Null, also Jan = 0). Dadurch können wir unten Daten haben. Wir setzen die y-Koordinate auf eine Zufallszahl.

(Hinweis: Im Screencast habe ich fälschlicherweise gesagt, dass der Jahresparameter auf der Unix-Epoche basiert, sodass 1980 das Setzen von 10 resultieren würde. Dies ist falsch; was ich oben richtig erklärt habe.)

1
2	$.plot(el, [{ data: data, color:'#494949', lines : { show: true }, points : { show : true} }],
3	{ xaxis : { mode : 'time', timeformat : '%b %d' }, grid : { hoverable : true, clickable : true } });

Jetzt erstellen wir das Diagramm. Wir rufen die Plotmethode auf und übergeben das Element, das den Graphen als ersten Parameter enthält. Der zweite Parameter ist ein Array mit nur einem Objekt: Die Daten sind unser Datenarray, die Farbe ist die Farbe unserer Diagrammlinie. Dann setzen wir die Linien- und Punktobjekte so, dass sie angezeigt werden: true; Linien "verbinden die Punkte" in unserem Diagramm und Punkte machen jeden Datenpunkt markanter. Wir könnten mehrere Objekte wie dieses in das Array mit den zweiten Parametern einfügen, um mehrere Datensätze grafisch darzustellen.

Der letzte Parameter ist ein anderes Objekt. Es werden einige Eigenschaften für das Diagramm festgelegt. Wir werden die x-Achse so einstellen, dass sie sich im Zeitmodus befindet. Das Zeitformat gibt an, wie das Datum formatiert werden soll. Gemäß der Flot-Dokumentation gibt "%b %d" den Monat und den Tag an. Dann setzen wir die Rasterfreigabe schwebbar und klickbar.

 
	el.bind('plothover', function (event, pos, item) { 
	    if (item) { 
	        if (prev != item.datapoint) { 
	            prev = item.datapoint; 
	            $('#tooltip').remove(); 
	            showTooltip(item.pageX, item.pageY, item.datapoint[1]); 
	        } 
	    } 
	    else { 
	        $('#tooltip').remove(); 
	        prev = null; 
	    } 
	});

Der nächste Schritt besteht darin, die Tooltip-Funktionalität zu erstellen. Das plothover-Ereignis wird ausgelöst, wenn Sie mit der Maus über das Diagramm fahren, und es werden drei Parameter an die Ereignishandler übergeben: das Ereignis, die Position und der Datenpunkt, über dem Sie den Mauszeiger bewegen. Zuerst prüfen wir, ob wir uns auf einem Artikel befinden. Wenn ja, werden wir prüfen, ob prev nicht der Position des Punktes entspricht. Wenn dies nicht der Fall ist, waren wir beim letzten plothover nicht an diesem Punkt (wir könnten uns bei einem Gegenstand bewegen, denken Sie daran). Daher zeichnen wir auf, an welchem Punkt wir uns befinden, stellen sicher, dass der Tooltip nicht an einer anderen Stelle angezeigt wird, und zeigen den Tooltip an der neuen Position an. Wenn prev dem aktuellen Datenpunkt entspricht, müssen wir nichts tun, da der Tooltip bereits angezeigt wird. Wenn wir uns nicht auf einen Punkt konzentrieren, stellen wir sicher, dass der Tooltip nicht angezeigt wird, und setzen prev auf null zurück.

Das ist das Ende unserer graphVisits-Funktion. Fahren wir mit unserer twitterize-Funktion fort:

1
2	twitterize : function (selector, fn, subject) {
3	var container = $(selector);

Twitterize verwendet drei Parameter: den Selektor des Elements, in das die Tweets geladen werden sollen, den Namen der Funktion, die wir in der twitterlib-Bibliothek aufrufen möchten, und den Betreff unseres Twitter-Aufrufs; Dies kann ein Benutzername sein, wenn wir die Timeline-Funktion verwenden, oder eine Suchzeichenfolge, wenn wir die Suchfunktion verwenden.

Sobald wir in der Funktion sind, erhalten wir den Tweet-Container.

 
	twitterlib[fn](subject, { limit : 10 }, function (tweets) { 
	    var list = $('<ul />'), i, 
	        len = tweets.length, 
	        totalWidth = 0;

Als nächstes nennen wir twitterlib. Wir verwenden den übergebenen Funktionsnamen und setzen den Betreff als ersten Parameter. Anschließend verwenden wir das Optionsobjekt, um die Bibliothek anzuweisen, nur die zehn neuesten Tweets zu erhalten, die unserer Anfrage entsprechen. Schließlich fügen wir eine Rückruffunktion hinzu, die die Tweets übernimmt, die wir von twitterlib erhalten. Zuerst setzen wir unsere Variablen. Sie werden sie alle in Gebrauch sehen.

 
	for (i = 0; i < len; i++ ) { 
		$('<li><a><img/></a></li>') 
				.find('a') 
				.attr('href', 'http://www.twitter.com/' + tweets[i].user.screen_name + '/status/' + tweets[i].id) 
				.end() 
				.find('img') 
				.attr('src', tweets[i].user.profile_image_url) 
				.end() 
			.append(this.ify.clean(tweets[i].text)) 
			.appendTo(list); 
	} 
	container.append(list);

Jetzt durchlaufen wir jeden Tweet in der Gruppe. Wir erstellen ein HTML-Fragment eines Listenelements und ein darin verankertes Bild. Wir finden den Anker, setzen den href und verwenden end(), um zum li zurückzukehren. Dann finden wir das Bild, stellen die Quelle ein und kehren zum Listenelement zurück. Schließlich fügen wir den Text des Tweets an das Listenelement an, das nach dem Anker eingefügt wird. Wir führen diesen Text über twitterlib.ify.clean aus. Dadurch werden die Links, Erwähnungen und Hashtags verknüpft. Dann hängen wir das Listenelement an die ungeordnete Liste an, die wir erstellt haben.

Wenn wir alle unsere Tweets durchgearbeitet haben, hängen wir die Liste an den Container an.

Rückblende: Erinnerst du dich, wie wir die Breite von #twitter ul auf 5000px eingestellt haben? Wir haben dies getan, damit jeder Tweet in einer einzelnen Zeile steht und nicht umbrochen wird. Dies liegt daran, dass wir jetzt die Breite jedes Listenelements ermitteln.

 
	$('li', list).each(function (i, el) { 
	    totalWidth += $(el).outerWidth(true); 
	}); 
 
	list.width(totalWidth);

Wir durchlaufen jedes Listenelement (wir können die Liste als Kontextparameter verwenden) und verwenden die outerWidth-Funktion, um die Breite zu ermitteln. Genau wie outerHeight enthält outerWidth den Rand und die Polsterung sowie (da wir dies als true eingestuft haben) die Ränder. Wir fügen all diese Breiten zu unserer Variablen totalWidth hinzu. Jetzt ist totalWidth die richtige Breite für unsere Liste, also setzen wir das.

 
	function scrollTweets() { 
	    var rand = totalWidth * Math.floor(Math.random() * 10 + 15); 
	    list.startAnimation({ 
	        right: totalWidth 
	    }, rand, 'linear', function () { 
	        list.css('right', - container.width()); 
	        scrollTweets(); 
	    }); 
	} 
 
	scrollTweets();

Nächste Aufgabe: Lassen Sie diese Liste scrollen. Wir berechnen die Bildlaufgeschwindigkeit, indem wir die Gesamtbreite mit einer zufälligen ganzen Zahl zwischen zehn und fünfzehn multiplizieren. Dann machen wir die Animation. Normalerweise verwenden wir die animate-Funktion, aber wir verwenden das Plugin pauseanimate, also verwenden wir die Funktion startAnimation. Wir möchten den richtigen Wert für totalWidth animieren. Der Dauer-Parameter erhält die Zufallszahl. Wir werden die Lockerung auf 'linear' setzen; Standardmäßig ist es "Swing", das am Anfang ein- und am Ende ausfällt. Zuletzt eine Rückruffunktion: Wir setzen die richtige Position unserer Liste so, dass die Containerbreite negativ wird. Dadurch wird es rechts auf dem Bildschirm angezeigt. Dann rufen wir unsere scrollTweets-Funktion auf, damit der Zyklus neu gestartet wird.

Außerhalb unserer ScrollTweets-Funktion werden wir sie aufrufen, um die Dinge in Gang zu bringen.

Der letzte Teil von twitterize sind die Schwebeereignisse:

 
	    list.hover(function () { 
	        list.pauseAnimation(); 
	    }, function () { 
	        list.resumeAnimation(); 
	    }); 
	}); // end of twitterlib call

Wenn wir den Mauszeiger über unsere Tweets-Liste bewegen, verwenden wir das pauseanimate-Plugin, um die Animation vorübergehend anzuhalten. Wir werden die Funktion resumeAnimation in der Mouseout-Funktion verwenden. Das ist das Ende von twitterize!

Unsere letzte Funktion wird die Namen der Arbeiter gegen ihre Bilder austauschen.

 
	iconizeWorkers : function (selector) { 
	    $(selector).each(function (i, el) { 
	        var el = $(el),  
	            workers = el.text().split(' '), 
	            imgs = ''; 
 
	        $.each(workers, function (i, val) { 
	            imgs += '<img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/062_status_board/images/' + val.toLowerCase() + '.png" alt="'+ val + '" />'; 
	        }); 
 
	        el.html(imgs); 
	    }); 
	}

Es ist nicht zu kompliziert; Wir werden die Elemente erhalten, die mit der Auswahl übereinstimmen, die übergeben wurde, und über jedes von ihnen iterieren. Wir erhalten ihren Inhalt, teilen ihn in die Räume auf und speichern ihn in einem Array namens workers. Dann hängen wir für jeden Worker ein Bild an die imgs-Zeichenfolge an, die die Namen verwendet, um die Bilder abzurufen. Anschließend ersetzen wir die Namen mithilfe der HTML-Methode von jQuery durch die Zeichenfolge imgs.

Natürlich müssen wir unsere Methoden aus unserem HTML heraus aufrufen:

 
	<script type="text/javascript"> 
	var board = statBoard(); 
 
	board.graphVisits('#visits'); 
	board.iconizeWorkers('#projects tr td:last-child'); 
	board.twitterize('#our_tweets', 'timeline', 'nettuts'); 
	board.twitterize('#their_tweets', 'search', 'nettuts'); 
 
	</script>

Schritt 4 Schalten Sie es mit PHP ein

Die letzte Strecke: die Daten mit PHP einspielen. Lassen Sie uns zuerst die Projektdaten aus einer Datenbank abrufen. Dies setzt voraus, dass wir eine Datenbank erstellt haben. Sie sind wahrscheinlich ziemlich vertraut mit dem Prozess: Ich habe PhpMyAdmin gestartet und eine Datenbank mit dem Namen "Projekte" erstellt. Dann habe ich eine Tabelle mit dem Namen 'project_status' erstellt. Dies hat vier Felder: ID (der automatisch inkrementierende Primärschlüssel), Name, Status und Arbeiter. Hier sind die Daten, die ich eingegeben habe:

Die Funktion, die diese Daten erhält, ist nicht schwer. Erstellen Sie eine Datei namens statboard.php und lassen Sie uns loslegen!

 
	function getProjects() { 
	    $sql = new mysqli('localhost', 'root', '', 'projects')  or die('could not connect'); 
	    $result = $sql->query("SELECT * FROM project_status"); 
	    $html = ""; 
 
	    while ($row = $result->fetch_object()) { 
	        $name   = ucwords($row->name); 
	        $status = ucwords($row->status); 
	        $img    = str_replace(" ", "", $row->status); 
 
 
	        $html .= "<tr><td><img src='http://tutsplus.s3.amazonaws.com/tutspremium/web-development/062_status_board/images/$row->name.png' alt='$name' /></td>"; 
	        $html .= "<td>$name</td><td><img src='http://tutsplus.s3.amazonaws.com/tutspremium/web-development/062_status_board/images/$img.png' alt='$status' /> $status</td>"; 
	        $html .= "<td>$row->workers</td>"; 
	    } 
	    return $html; 
	}

Zuerst erstellen wir eine Instanz der mysqli-Klasse und verbinden sie mit unseren Datenbanken. Fragen Sie als Nächstes die Datenbank nach allen Zeilen ab. Wir werden einen String namens $html erstellen, den wir am Ende zurückgeben werden. Dann verwenden wir eine while-Schleife, um jede Zeile zu durchlaufen, die wir erhalten haben. In unserer Schleife setzen wir drei Variablen. Wir erhalten den Namen und den Status und verwenden die PHP-Funktion ucwords, um die ersten Buchstaben jedes Wortes zu kapatlieren. Dann bekommen wir den Status. Wir möchten diesen Status als Namen für die Statussymbole verwenden, daher verwenden wir str_replace, um Leerzeichen in der Statusbezeichnung zu entfernen. Schließlich verketten wir die Tabellenzeile miteinander. Diese drei Zeilen erzeugen denselben HTML-Code, den wir beim Prototyping verwendet haben.

Sobald wir jede Zeile durchlaufen haben, geben wir die HTML-Zeichenfolge zurück. Um dies auf unserer Seite zu verwenden, müssen wir zuerst statBoard.php herunterladen:

 
	<?php  
	    require('statBoard.php'); 
	?> 
	<!DOCTYPE html>

Dann entfernen wir die zuvor fest codierte Tabelle und fügen sie an ihrer Stelle hinzu:

1
2	<table>
3	<?php echo getProjects(); ?>
4	</table>

Unsere letzte Aufgabe ist es, den Zeitplan aus Google Kalender abzurufen. Zunächst müssen Sie Ihren Kalender auf öffentlich setzen. Dann müssen Sie den XML-Feed für den Kalender abrufen.

Wir werden dies in zwei Funktionen tun; Beginnen wir mit dem ersten:

 
	function parseCalendarFeed($feed_url, $count = 4) { 
	    $content = file_get_contents($feed_url); 
	    $x = new SimpleXmlElement($content); 
	    $entries = $x->entry; 
	    $arr = array();

Treffen Sie die Funktion parseCalendarFeed. Es werden zwei Parameter benötigt: die Feed-URL und die Anzahl der Elemente, die wir erhalten möchten. Wir beginnen damit, den Inhalt von der URL abzurufen und erstellen damit ein SimppleXmlElement. Wenn Sie dieses Objekt untersuchen, sehen Sie, dass sich die Ereignisse auf dem Kalender innerhalb des entry-Elements befinden. Wir werden das für die spätere Verwendung aufbewahren. Schließlich erstellen wir das Array, das wir am Ende zurückgeben.

1
2	for ($i = 0; $i < count($entries); $i++) {
3	$item = explode("<br />", $entries[$i]->content);
4	array_unshift($item, (string)$entries[$i]->title);

Als nächstes werden wir jedes Element in $entries durchlaufen. Wir wollen das Inhaltselement und das Titelelement erhalten. Es gibt jedoch ein Problem mit dem Inhaltselement. Es ist wie folgt formatiert:

 
	When : [date here] 
	<br /> 
	<br /> 
	Event Status: confirmed 
	<br /> 
	Event Description: [description here]

Wir werden also die PHP-Explosionsmethode verwenden, um sie in ein Array mit dem Namen $item zu unterteilen, wobei jede Zeile Mitglied des Arrays ist. Dann erhalten wir den Titel des Eintrags und verwenden array_unshift, um ihn vor $item einzufügen.

Wenn das erledigt ist, haben wir ein Array, das so aussieht:

 
	array ( 
	    [0] => [event title] 
	    [1] => When: [the date] 
	    [2] => 
	    [3] => Event Status: [the status] 
	    [4] => Event Description: [the description] 
	)

1
2	foreach($item as $k => $v) {
3	if ($k === 2 \|\| $k === 3) {
4	unset($item[$k]);
5	} else {
6	$temp = explode(":", $v);
7	$item[$k] = (isset($temp[1])) ? trim($temp[1]) : $temp[0];
8	}
9	}

Jetzt durchlaufen wir jedes Mitglied des $item-Arrays. Wir brauchen keine Mitglieder mit Index 2 oder 3, also werden wir diese deaktivieren. Für den Rest der Elemente teilen wir sie durch Komma auf. Wir müssen jedoch einen ternären Ausdruck verwenden, um den Wert neu zu setzen, da das erste Element (der Titel) kein Komma hat. Wenn das temporäre Array ein zweites Element enthält, setzen wir den Wert im Array $item auf den zweiten Teil, der die gewünschten Informationen enthält. Wenn es kein zweites Stück gibt (was für den Titel der Fall sein wird), verwenden wir das erste. Jetzt sieht unser Array so aus:

 
	array ( 
	    [0] => [event title] 
	    [1] => [the date] 
	    [4] => [the description] 
	)

Perfekt . . . außer dass die Indizes falsch sind.

 
	        $item = array_values($item); 
	        $item[1] = explode(" ", substr($item[1], 4, 6)); 
	        $months = array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'); 
	        $item[1][0] = array_search($item[1][0], $months) + 1; 
	        $item[1] = implode($item[1], '/'); 
 
	        array_unshift($arr, $item); 
	    } // end for 
	    $arr = array_slice($arr, 0, $count); 
	    return $arr; 
	} // end parseCalendarFeed

Um die Indizes zu pflegen, verwenden wir die Funktion array_values, mit der wir sie zurücksetzen. Jetzt müssen Sie nur noch das Datum formatieren. Wir möchten, dass das Datum im Format 'm/d' vorliegt. Das Datum hat einen Index von 1 in unserem Elementarray, daher setzen wir die Explosion dieses Mitglieds. aber wir explodieren nicht das ganze Mitglied. Wir erhalten eine Teilzeichenfolge davon, beginnend bei Zeichenindex 4 und für 6 Zeichen. Dies gibt uns den Monatsnamen und die Tagesnummer.

Wir müssen den Monatsnamen mit einem anderen Array vergleichen, also erstellen wir das Array $month. Dann setzen wir $item[1][0] (den Monatsnamen) auf den Index des Monatsnamens in $months plus eins. Wir verwenden die Funktion array_search, um den richtigen Index zu erhalten, und fügen einen hinzu, da das Array auf Null basiert. Schließlich implodieren wir das Array, das die Mitglieder verbindet, und übergeben '/' als Trennzeichen. Jetzt ist unser Datum korrekt formatiert. Das letzte, was zu tun ist, ist es in $arr zu setzen; wir verwenden arrayunshift, um es an den Anfang des Arrays zu setzen. Sobald wir mit allen Einträgen fertig sind, werden sie in umgekehrter Reihenfolge angezeigt, was wir wollen.

Schließlich werden wir das Array so aufteilen, dass es nur die Anzahl der gewünschten Elemente enthält. Dann können wir es zurückgeben!

Wir verwenden die Funktion parseCalendarFeed in unserer Funktion getSchedule:

 
	function getSchedule() { 
	    $feed = "http://www.google.com/calendar/feeds/7dsn8r5l974nlqo6uji6t386s4%40group.calendar.google.com/public/basic"; 
	    $events = parseCalendarFeed($feed); 
	    $html = ""; 
	    foreach($events as $event) { 
	        $html .= "<li><em>$event[1]</em> $event[0]"; 
	        if(isset($event[2])) { 
	            $html .= " <small>$event[2]</small></li>"; 
	        } else { 
	            $html .= "</li>"; 
	        } 
	    } 
	    return $html; 
	}

Innerhalb dieser Funktion speichern wir die Feed-URL und übergeben sie an parseCalendarFeed. Wir starten unsere $html-Zeichenfolge und durchlaufen dann jedes Ereignis. Dadurch wird dieselbe HTML-Struktur generiert, die wir beim Prototyping verwendet haben. wir müssen prüfen, ob Details vorhanden sind ($event[2]); Wenn sie da sind, fügen wir sie hinzu. Wenn nicht, schließen wir das Listenelement. Sobald wir alle durchlaufen haben, geben wir den String $html zurück.

Verwenden Sie dies anstelle der Listenelemente, die wir fest codiert haben, um den Kalender auf der Seite aufzurufen:

1
2	&ly;?php echo getSchedule(); ?>

Schritt 5: Bewundern Sie es mit Stolz!

Und das ist es; das ist unser gesamtes, funktionierendes, datenabrufendes Twitter-Scrolling-Statusboard! Hoffe Sie hatten Spaß und lassen Sie mich wissen was Sie denken.