Share
Când Panic și-a prezentat panoul de stare pentru lume, am fost atât impresionat, cât și inspirat. În tutorialul și ecranul de astăzi, vă voi arăta cum să construiți o placă de stat similară!
Iată ce va avea consiliul nostru de stare: în partea de sus va apărea un grafic de vizualizări; ar fi nevoie de un alt tutorial pentru a obține acele date din Google Analytics, deci pentru ziua de azi vom folosi doar date aleatorii. Apoi, vom lansa evenimentele viitoare din Google Calendar. Vom avea o tabelă de stare a proiectului, trăgând date dintr-o bază de date. În cele din urmă, vom afișa tweet-uri de la "compania" noastră și de la alți oameni care menționează compania noastră. Sa mergem!
Înainte de a începe, ar trebui să menționez că icoanele pe care le folosesc în acest proiect provin din setul gratuit Smashing Magazine intitulat On Stage; din păcate, nu le pot include în fișierele demo, dar aici este o listă cu numele fișierelor pe care le-am redenumit pentru proiect (majoritatea proiectului depind de numele fișierelor); Am redimensionat pictogramele la 64x64px; ar trebui să fie evident când treceți prin tutorialul în care apar pictogramele.
În timp ce pagina noastră finalizată va avea conținut dinamic, vom construi mai întâi interfața, utilizând conținutul static pentru a obține totul setat și apoi vom lucra mai târziu la codul de pe server.
Iată coaja preliminară:
Biroul de stare
Nu deloc greu: trei diviziuni într-o divizare înfășurată. Să ne uităm la div # date chiar acum. Înăuntru vom pune două divizii:
Programa
- 3/22Întâlnește-te cu Chris detaliile merg aici
- 3/26Vacanţă
- 4/15Foobar Deadline
- 5/24Biroul de partid
Vom completa div # vizite cu JavaScript într-un timp. În ceea ce privește div # program, am pus o listă. Mai târziu, vom extrage aceste date din Google Calendar, dar acest lucru ne va da ceva pentru a construi interfața. Partea importantă este că am înfășurat data evenimentului em tag-uri și detaliile evenimentului în mic Etichete.
Următoarea secțiune principală este div # Proiecte. Acest lucru ne va arăta cele mai recente informații despre proiectele pe care lucrează compania noastră puțin imaginară. La fel ca programul, vom trage acest lucru dintr-o sursă de date (o bază de date, în acest caz); pentru moment, este doar o masă statică:
 | Gizmo | La timp | Joe Sally |
| Widget | In spate | John Joe Jane |
| Gadget | Complet | Sally Jane |
| foobar | Aşteptare | John Joe |
| Bazquirk | La timp | Sally Jane Joe |
div # twitter ne va arăta două grupuri de tweet-uri: cele făcute de compania noastră și cele care menționează compania noastră. Vom folosi twitterlib-ul lui Remy Sharp pentru a face asta. Iată marcajul de care avem nevoie:
În cele din urmă, vom importa scenariile pe care le folosim:
Desigur, în producție, ați pus toate acestea într-un dosar.
Ultimul fișier aici, statBoard.js va fi creația noastră.
Înainte de a începe CSS, iată cum va arăta produsul finit; acest lucru ar trebui să facă CSS un pic mai clar.
În primul rând, vom înființa corpul și h1, precum și vom stabili toate conținutul principal de conținut pentru a-și păstra copiii.
corp fundal: # f3f3f3; font: bold 25px / 1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif; culoare: # 494949; h1 margine: 0; padding: 0; font-size: 40px; #wrap> div overflow: ascuns;
În continuare, să luăm în considerare faptul că primul conținut div, care are un id de date.
#data margin-bottom: 40px; #visits width: 48%; marja de-dreapta: 2%; plutește la stânga; font-size: 12px; #tooltip poziție: absolută; display: none; padding: 2px 5px; fundal: # 494949; Culoare: #fefefe; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;
Vom da acelei div o margine inferioară de 40px, doar pentru respirație. Apoi ne vom întoarce la primul ei copil, div # vizite: flotați-l spre stânga, setați lățimea și marginea dreaptă și reduceți dimensiunea fontului.
De unde vine acest instrument de div? Acesta va fi inserat când vom crea graficul de analiză folosind un plugin jQuery. Aici, setăm stilurile vizuale, poziționăm-o absolut și ascundem. Când vom trece peste punctele din harta noastră, acesta va fi poziționat și apoi va dispărea.
Să ne uităm la div # program Următor →:
#schedule float: left; fundal: # 494949; Culoare: # f3f3f3; lățime: 44%; padding: 3%; overflow: ascuns; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; #schedule ul tip-stil-tip: none; margin: 0; padding: 0; #schedule li marginea-jos: 5px; lățime: 1000px; #schedule em font-style: normal; fundal: # aa3636; marja de-dreapta: 10px; display: inline-block; lățime: 50px; umplutură: 0 10px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; #schedule mici font-size: 12px; Culoare: #bababa; -Stil de font: italic;
Acest lucru nu ar trebui să fie prea greu pentru a descoperi; noi vrem div # program pentru a fi la dreapta lui div # vizite, astfel încât să plutim la stânga și să vă asigurați că lățimea + padding va fi egală cu 50%. Apoi adăugați niște culoare și radeți din colțuri. overflow: ascuns este important. Amintiți-vă că vom trage detaliile evenimentului; nu vrem ca detaliile să se înfășoare pe mai multe linii, așa că le vom lăsa să se reverse și apoi să ascundă preaplinul.
Stilul pentru ul și Li sunt destul de simple; am dat-o Li o lățime de 1000 de pixeli, astfel încât aceste detalii să nu se înfășoară.
Înainte vom avea eme înăuntru div # program. Aici vor merge datele noastre. Eliminăm italicitatea obișnuită prin setarea stilului de font la normal. Prin setarea afișajului la blocarea inline, putem seta o lățime pe 50px; deoarece afișăm data în formatul m / d, acest lucru ar trebui să arate bine în toate cazurile. Și bineînțeles, în jurul colțurilor.
În cele din urmă, pentru detalii, folosim mic etichetă; vom seta dimensiunea fontului, stilul fontului și culoarea.
Următoarea secțiune principală a consiliului nostru de stare este div # Proiecte.
#projects table width: 100%; border-spațiere: 5px; #projects td padding: 2px; fundal: #efefef; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; #proiecte td: nu (: ultimul-copil) text-align: center; #projects img vertical-aliniere: mijloc;
Ne vom asigura că tabelul nostru ocupă întreaga lățime a paginii; vom da, de asemenea, celulele cu o anumită marjă border-spațiere. O să dăm fiecărei celule câteva umpluturi și ușor în jurul colțurilor. Apoi, hai să folosim câțiva selectori CSS3 pentru a centra textul din fiecare celulă așteaptă ultimul; dacă browserul nu acceptă: nu () sau: last-child, această regulă va fi ignorată și toate celulele vor rămâne aliniate la stânga: nu este o afacere mare. În cele din urmă, vom focaliza vertical imaginile.
Avem doar twitter div stânga:
#twitter> div overflow: ascuns; font-size: 20px; #twitter ul list-style-type: none; lățime: 5000px; Poziția: relativă; #twitter li float: stânga; marja de-dreapta: 10px; #twitter img vertical-aliniere: mijloc; marja de-dreapta: 10px; de frontieră: 0; înălțime: 20px; lățime: 20px;
În prezent, noastre div # twitter are doar două divuri goale înăuntru. Vom încărca tweet-urile cu JavaScript în curând, dar iată ce vrem să se întâmple: fiecare div în div # twitter va fi o marquee, scrolling tweets pe ecran. Prin urmare, le vom seta divs pentru a ascunde depășirea lor și, de asemenea, setați fontul lor la 5px mai puțin decât restul paginii. Pentru liste, eliminăm gloanțele, poziționăm-o relativ (astfel încât să putem anima poziționarea corectă pentru a face marchea) și setați lățimea la 5000px; Voi explica lățimea odată ce ajungem la JavaScript. Fiecare element de listă (fiecare tweet) va fi flotat la stânga și dat o margine de dreapta. În cele din urmă, imaginile (vom afișa imagini de profil twitter) sunt decorate corespunzător.
Pe JavaScript! Așadar, nu împiedicăm spațiul de nume global, vom crea o singură funcție care să returneze metodele din tabloul nostru de stare. Iată coaja pe care o vom începe:
var statBoard = funcția () return graphVisits: funcția (selectorul) , twitterize: funcția (selector, fn, subiect) , iconizeWorkers:
Să construim graphVisits primul; probabil că doriți să trageți din analiză din Google Analytics sau din aplicația dvs. de alegere a statisticilor. Cu toate acestea, vom genera câteva date aleatorii pentru exemplul nostru.
În primul rând, vom stabili variabilele noastre:
var el = $ (selector), date = [], prev = null, showTooltip = functie (x, y,', id:' tooltip ', text: conținut, css: top: y + 5, left: x + 5). ;
În mod corespunzător, avem elementul în care vom introduce graficul, matricea de date pe care le vom transmite pluginului Flot jQuery, prev, pe care o veți vedea în uz și o funcție showTooltip. Acest lucru creează acest lucru div # tooltip pe care l-am desenat mai devreme, îl alătură corpului și îl dispare.
el.height ($ ( '# programul') outerHeight ().); pentru (i = 0; i < 32; i++) data.push([new Date(2010, 2, i).getTime(), Math.floor(Math.random() * 6000)]);
Apoi, setăm înălțimea elementului care va conține graficul; pluginul flotă necesită acest lucru. Am stabilit-o la aceeași înălțime de div # program; Metoda externalHeight a lui jQuery returnează înălțimea obiectului, inclusiv umplutura și marginea acestuia. Apoi, ne vom umple matricea date; flotorul acceptă o serie de tablouri, fiecare matrice internă având o coordonate x și y. Pentru coordonatele noastre x, vom folosi o dată JavaScript; valorile pe care le trecem în constructorul de date sunt anul, luna și ziua (există mai multe, pentru a seta ora). Vom stabili anul în 2010 și luna până în martie (este bazat pe zero, deci Jan = 0). Acest lucru ne va permite să avem date în partea de jos. Vom seta coordonatul y la un număr aleatoriu.
(Notă: în interviu, mi-am spus în mod eronat că parametrul anului era bazat pe epoca Unix, astfel că punerea lui 10 ar avea drept rezultat în 1980, acest lucru este incorect, ceea ce am explicat mai sus.)
$ .plot (el, date: date, culoare: '# 494949', linii: show: true, points: show: true] xaxis: % b% d ', grilă: hoverable: true, clickable: true);
Acum creăm graficul; vom apela metoda plot și vom trece elementul care va ține graficul ca primul parametru. Al doilea parametru este o matrice, cu un singur obiect: datele vor fi matricea noastră de date, culoarea va fi culoarea liniei grafice; apoi, setăm liniile și punctele pentru a afișa obiecte: true; liniile vor "conecta punctele" pe graficul nostru, iar punctele vor face fiecare datapot mai proeminent. Am putea pune obiecte miltiple ca aceasta într-o matrice de parametri al doilea pentru a scrie mai multe seturi de date.
Ultimul parametru este un alt obiect; acesta stabilește câteva proprietăți pe grafic. Vom seta axa x să fie în modul de timp; formatul de timp este modul în care dorim ca data să fie formatată. Conform documentației Flot, "% b% d" va folosi luna și ziua. Apoi, am setat grila de activare hoverable și clickable.
Accentsconagua
el.bind ('plothover', funcție (eveniment, pos, element) if (item) if (prev! = item.datapoint) showTooltip (element.pageX, item.pageY, item.datapoint [1]); altceva $ ('# tooltip') remove (); prev = null;); Următorul pas este să construiți funcția de tip instrument. plothover evenimentul este declanșat de fiecare dată când treceți peste grafic și treceți trei parametri la agenții de procesare a evenimentului: evenimentul, poziția și datapointul pe care îl plasați. În primul rând, vom verifica dacă ne aflăm la un element. Dacă suntem, vom verifica dacă prev nu este egală cu poziția punctului. Dacă asta nu înseamnă că nu am fost în acest punct la ultimul plothover (am putea să ne mutăm pe un singur element, să ne amintim). Prin urmare, vom înregistra punctul în care ne aflăm, asigurați-vă că indicația de ajutor nu se afișează în altă parte și afișați sfatul instrumentului în noua poziție. Dacă prev nu este egal cu datapoint curent, nu avem nevoie să facem nimic, deoarece simbolul deget este deja afișat. În cele din urmă, dacă nu suntem într-un punct, ne vom asigura că instrumentul nu este afișat și setat prev înapoi la nul.
Acesta este sfârșitul nostru graphVisits funcţie; Să mergem la noi twitterize funcţie:
twitterize: funcție (selector, fn, subiect) var container = $ (selector);
Twitterize are trei parametri: selectorul elementului pentru a încărca tweets-ul, numele funcției pe care dorim să o apelam în biblioteca twitterlib și subiectul apelului nostru de tip twitter; aceasta ar putea fi un nume de utilizator dacă folosim funcția cronologie sau ar putea fi un șir de căutare dacă folosim funcția de căutare.
Odată ce ne aflăm în funcție, vom primi containerul tweet.
twitterlib [fn] (subiectul, limita: 10, funcția (tweets) var list = $ ('Apoi, numim twitterlib. Utilizăm numele funcției trecut și setăm subiectul ca primul parametru. Apoi, folosim obiectul de opțiuni pentru a spune bibliotecii să ne primească cele mai recente tweets pentru a corespunde solicitării noastre. În cele din urmă, adăugăm o funcție de apel invers, care ia tweeturile pe care le primim de la twitterlib. Mai întâi, mai întâi, ne fixăm variabilele. Veți vedea totul în uz.
pentru (i = 0; i < len; i++ ) $('Acum batem peste fiecare tweet din grup. Vom face un fragment HTML dintr-un element de listă și o imagine înfășurată în interiorul ancorei. Vom găsi ancora, setați href, si foloseste Sfârșit() pentru a reveni la Li. Apoi găsim imaginea, setăm sursa și revenim la elementul din listă. În final, adăugăm textul mesajului tweet la articolul din listă, care îl va pune după ancoră. Rulam acest text prin twitterlib.ify.clean; aceasta va lega link-urile, mențiunile și hashtag-urile. Apoi vom adăuga elementul listă în lista neordonată pe care am creat-o.
Când am lucrat prin toate tweets, vom adăuga lista la container.
Flashback: amintiți-vă cum am setat lățimea #twitter ul la 5000px? Am făcut acest lucru pentru ca fiecare tweet să fie pe o singură linie și să nu se înfășoare. Acest lucru se datorează faptului că acum vom obține lățimea fiecărui element din listă.
$ ('li', listă). fiecare (funcția (i, el) totalWidth + = $ (el) .outerWidth (true);); list.width (totalWidth); Vom trece prin fiecare element din listă (putem folosi lista ca parametru de context) și vom folosi outerWidth pentru a obține lățimea. Ca și cum outerHeight, outerWidth include granița și umplutura și (de când am trecut Adevărat) marjele. Adaugam toate acele latimi la noi totalWidth variabil. Acum totalWidth este lățimea potrivită pentru lista noastră, așa că vom seta asta.
funcția scrollTweets () var rand = totalWidth * Math.floor (Math.random () * 10 + 15); list.startAnimație (right: totalWidth, rand, 'linear', funcția () list.css ('right', - container.width ()); scrollTweets ();); scrollTweets (); Ordinea următoare a afacerii: obțineți lista de derulare. Vom calcula viteza de derulare prin înmulțirea lățimii totale cu un număr întreg aleator între zece și cincisprezece. Apoi, facem animația. În mod normal, am fi folosit anima dar folosim pluginul pauseanimate, deci folosim funcția startAnimation. Vrem să animăm valoarea corectă la totalWidth. Parametrul duratei primește numărul aleatoriu. Vom stabili relaxarea la "liniară"; în mod implicit, este "leagăn", care se va ușura la început și la sfârșit. În cele din urmă, o funcție de apel invers: vom seta poziția corectă a listei noastre pentru a nega lățimea containerului. Aceasta o va împinge în partea dreaptă a ecranului. Apoi, vom apela funcția de scrollTweets astfel încât ciclul să repornească.
În afara noastră ScrollTweets funcția, o vom numi pentru a începe lucrurile.
Ultima parte din twitterize sunt evenimentele de hovering:
list.hover (function () list.pauseAnimation ();, functie () list.resumeAnimation ();); ); // sfârșitul apelului twitterlib
Când vom trece peste lista noastră de tweets, vom folosi pluginul pauseanimate pentru a întrerupe temporar animația. Vom folosi funcția resumeAnimation în funcția mouseout. Acesta este sfârșitul anului twitterize!
Ultima noastră funcție va schimba numele lucrătorilor pentru imaginile lor.
($) (), imgs = "; $ .each () () (el) lucrătorii, funcția (i, val) imgs + = '„; ); el.html (BMI); );
Nu este prea complicat; vom obține elementele care se potrivesc cu selectorul care a trecut și vom itera peste fiecare dintre ele. Obținem conținutul lor, îl împărțim în spații și îl stocăm într-un tabel numit muncitorii. Apoi, pentru fiecare lucrător, adăugăm o imagine la șirul imgs, care utilizează numele pentru a obține imaginile. Apoi, vom înlocui numele cu șirul imgs, folosind metoda hQml a jQuery.
Desigur, trebuie să ne numim metodele din HTML:
Intinderea finală: obținerea datelor în PHP. Mai întâi să primim datele proiectului dintr-o bază de date. Asta presupune că am făcut o bază de date. Probabil că sunteți destul de familiarizat cu procesul: am concediat PhpMyAdmin și am creat o bază de date numită "proiecte". Apoi, am creat un tabel numit 'project_status'. Aceasta are patru câmpuri: id (auto-incrementarea cheii primare), nume, stare și lucrători. Iată datele pe care le-am pus:
Funcția care primește aceste date nu este greu. Creați un fișier numit statboard.php și să intrăm în ea!
funcția getProjects () $ sql = mysqli noi ('localhost', 'root', ',' projects ') sau die (' ), $ html = "", în timp ce ($ row = $ result-> fetch_object ()) $ name = ucwords ($ row-> name) ("", "", $ row-> status); $ html. = "
numele $ 
starea $$ Row-> lucrătorilor "; return $ html; Mai întâi vom crea o instanță a clasei mysqli și o vom conecta la bazele noastre de date. Apoi, interogați baza de date pentru toate rândurile. Vom crea un șir numit $ html, pe care o vom întoarce la sfârșit. Apoi vom folosi o buclă de timp pentru a trece peste fiecare rând pe care l-am primit. În bucla noastră, am stabilit trei variabile. Obținem numele și statutul și folosim funcția PHP ucwords pentru a capataliza primele litere ale fiecărui cuvânt. Apoi, obținem statutul. Vrem să folosim această stare ca pe numele icoanelor de stare, așa că vom folosi str_replace pentru a elimina spațiile din eticheta de stare. În cele din urmă, concatenăm rândul tabelului împreună. Aceste trei linii vor produce același HTML pe care l-am folosit atunci când am făcut prototipuri.
Odată ce am trecut prin fiecare rând, vom returna șirul HTML. Pentru a folosi acest lucru pe pagina noastră, va trebui mai întâi să ajungem statBoard.php:
Apoi, vom elimina tabelul pe care l-am codificat mai devreme și îl adăugăm în locul lui:
Ultimul nostru loc de muncă este să trageți programul din Calendar Google; în primul rând, va trebui să vă setați calendarul la public; atunci va trebui să obțineți feedul XML pentru calendar.
O vom face în două funcții; Să începem primul:
funcția parseCalendarFeed ($ feed_url, $ count = 4) $ content = file_get_contents ($ feed_url); $ x = noul SimpleXmlElement ($ content); $ entries = $ x->; $ arr = array ();
Faceți cunoștință cu parseCalendarFeed funcţie; este nevoie de doi parametri: adresa URL a fluxului și numărul de elemente pe care dorim să le obținem. Începem prin a obține conținutul de la adresa URL și a crea un SimppleXmlElement cu el. Dacă inspectați acel obiect, veți vedea că evenimentele din caledar se află în interiorul intrare element; vom stoca acest lucru pentru o utilizare ulterioară. În cele din urmă, vom crea matricea pe care o vom întoarce la sfârșit.
pentru ($ i = 0; $ i < count($entries); $i++) $item = explode("
", intrări $ [$ i] -> content); array_unshift ($ item, (șir) $ entries [$ i] -> title); Apoi, vom bifa peste fiecare element în intrări $; dorim să obținem elementul de conținut și elementul de titlu. Există însă o problemă cu elementul de conținut; este formatat astfel:
Când: [data aici]
Starea evenimentului: confirmat
Descrierea evenimentului: [descriere aici]
Deci, vom folosi metoda php explode pentru a o rupe într-o matrice, numită elementul $, cu fiecare linie ca membru al matricei. Apoi, vom obține titlul intrării și vom folosi array_unshift pentru ao adăuga în partea din față a lui elementul $.
Când sa terminat, vom avea o matrice care arată astfel:
array ([0] => [event title] [1] => Când: [data] [2] => [3] => ])
foreach ($ element ca $ k => $ v) dacă ($ k === 2 || $ k === 3) unset ($ element [$ k]); altceva $ temp = explode (":", $ v); $ element [$ k] = (isset ($ temp [1]))? decupare ($ temp [1]): $ temp [0]; Acum batem peste fiecare membru al elementul $ matrice; nu avem nevoie de membri cu indexul 2 sau 3, deci le vom dezactiva. Pentru restul elementelor, le vom împărți la virgulă. Trebuie să folosim o expresie ternară pentru a reseta valoarea, deoarece primul element (titlul) nu are virgulă. Dacă există un al doilea element în matricea temporară, vom seta valoarea în elementul $ array la partea a doua, care deține informațiile pe care le dorim. Dacă nu are oa doua piesă (care va fi cazul titlului), vom folosi prima. Acum, matricea noastră arată astfel:
array ([0] => [titlu eveniment] [1] => [data] [4] => [descrierea])
Perfect ... cu excepția faptului că indicii sunt incorecte.
$ item = array_values ($ articol); $ item [1] = explode ("", substr ($ element [1], 4, 6)); $ luna = array ('Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Iun', 'Iul', ' decembrie '); $ item [1] [0] = array_search ($ element [1] [0], $ luni) + 1; $ element [1] = implode ($ element [1], '/'); array_unshift ($ arr, $ element); // final pentru $ arr = array_slice ($ arr, 0, $ count); întoarcere $ arr; // end parseCalendarFeed Pentru a avea grijă de indicii, folosim funcția array_values pe care o resetăm. Singurul lucru rămas este formatarea datei. Am dori ca data să fie în formatul "m / d". Data are un indice de 1 în matricea noastră de elemente, așa că vom seta acel membru să explodeze; dar nu vom exploda întregul membru. Avem un substring al acestuia, începând de la indicele de caractere 4 și mergând cu 6 caractere. Acest lucru ne va da numele lunii și numărul zilei.
Va trebui să comparăm numele lunii cu o altă matrice, așa că vom crea $ luni matrice. Apoi, am stabilit $ Articol [1] [0] (numele lunii) la indexul numelui lunii din $ luni plus unu. Folosim funcția array_search pentru a obține indexul potrivit și pentru a adăuga unul, deoarece matricea este bazată pe zero. În cele din urmă, vom implode matricea, care se alătură membrilor, trecând în '/' ca separator. Acum data noastră este corect formatată. Ultimul lucru pe care trebuie să-l faceți este să-l puneți $ arr; folosim arrayunshift să o punem la începutul matricei. După ce terminăm lucrul cu toate intrările, ele vor fi în ordine inversă, ceea ce ne dorim.
În cele din urmă, vom aluneca matricea astfel încât numai containerele să aibă numărul de elemente pe care le dorim. Atunci o putem returna!
Noi folosim parseCalendarFeed în funcția noastră getSchedule funcţie:
funcția getSchedule () $ feed = "http://www.google.com/calendar/feeds/7dsn8r5l974nlqo6uji6t386s4%40group.calendar.google.com/public/basic"; $ evenimente = parseCalendarFeed ($ feed); $ html = ""; foreach ($ evenimente ca $ eveniment) $ html. = "
$ Eveniment [1] $ event [0] "; dacă (isset ($ event [2])) $ html. =" $ Eveniment [2] "; altceva $ html. ="" returnați $ html; În interiorul acestei funcții, stocăm URL-ul feed-ului și îl transmitem parseCalendarFeed; vom începe $ html șir și apoi buclă prin fiecare eveniment. Aceasta va genera aceeași structură HTML pe care am folosit-o atunci când am creat prototipuri; trebuie să verificăm existența detaliilor ($ Eveniment [2]); dacă sunt acolo, îi adăugăm; dacă nu, închidem articolul din listă. Odată ce am trecut prin fiecare, întoarcem șirul $ html.
Pentru a apela calendarul în pagină, utilizați acest lucru în locul elementelor din listă pe care le-am codificat greșit:
&ly;?php echo primiSchedule (); ?>
Pasul 5: Admirați-l cu Pride!
Si asta e; aceasta este întreaga noastra, de lucru, de data-trăgând, twitter-scrolling statutul de bord! Sper că v-ați distrat și spuneți-mi ce credeți.
starea $
