Aceștia pot primi, de asemenea, șabloane de roluri tematice. Acestea pot fi setate în cadrul părintelui

.

Aflați mai multe despre separatoarele de liste.

Rețineți că nu vom folosi divizoare pentru această aplicație specială.

---

Pasul 5: CSS

jQuery Mobile are grijă de o mare parte din formatare, cu toate acestea, totuși, avem, desigur, nevoie de propria foaie de stil pentru tweaking. De exemplu, uitandu-ne la imaginile de mai sus, putem vedea ca icoanele tutorial trebuie sa fie impins putin. În plus, aș dori să folosesc Tuts + roșu pentru culoarea de fundal a rubricii și subsolului, mai degrabă decât culoarea neagră implicită.

Creați un nou dosar, CSS, și adăugați o foaie de stil nouă - o să sun pe a mea: mobile.css. În acest fișier vom stabili mai întâi poziționarea pictogramei:

 .ui-li-icon top: 9px; 

Apoi, vom crea o mână de clase, numite după site-urile lor de tutorial. Aceste clase vor conține orice formatare / culori specifice pentru site. De exemplu, Nettuts + are o culoare verde mai închisă, în timp ce MobileTuts + este galben.

 .tuts background: # c24e00;  .nettuts background: # 2d6b61;  .psdtuts background: # af1c00;  .vectortuts background: # 1e468e; . aetuts background: # 4a3c59;  .phototuts background: # 3798aa;  .cgtuts background: # 723b4a;  .audiotuts background: # 4b7e00;  .webdesigntutsplus background: # 0d533f;  .mobiletuts background: # dba600; 

Ar trebui să fie bine pentru moment. Ultimul pas pentru index.php este de a aplica .tuts clasa la antet și subsol elemente. În acest fel, antet și subsol va face culoarea corectă a fundalului.

 
? 



---

Pasul 6: YQL, PHP și Caching

Acum, este timpul să renunțăm la aspect și să lucrăm la funcționalitate. Fiecare dintre legăturile create a fost direcționată către site.php? NumeSite = "numesite". Să mergem mai departe și să creăm acel dosar acum.

Chiar dacă aceasta este o aplicație relativ mică, ar trebui să ne străduim să urmăm cele mai bune practici. În acest caz, înseamnă că ar trebui să păstrăm cât mai puțin PHP în documentul nostru. În schimb, vom folosi site.php ca controlor de felul. Acest fișier se va ocupa de logica inițială și apoi va fi încărcat în partea de jos a șablonului HTML.

Atribuirea numelui site-ului

Pentru a prelua feedul RSS dorit, trebuie mai întâi să capturăm numele site-ului la care a făcut clic inițial utilizatorul. Dacă te referi la un pas anterior, când ne-am conectat site.php, am trecut, de asemenea, numele site-ului prin querystring. Cu PHP, acest lucru poate fi cu ușurință recuperat, cu $ _GET [ 'numesite']. Cu toate acestea, ce se întâmplă dacă, din anumite motive, această valoare nu există? Poate site.php a fost accesat direct? Ar trebui să setăm un site implicit pentru a compensa aceste situații.

 $ siteName = gol ($ _GET ['siteName'])? "nettuts": $ _GET ['siteName'];

Dacă $ _GET [ 'numesite'] este gol, vom seta "nettuts" la variabila, $ sitename. În caz contrar, va fi egal cu numele site-ului respectiv.

Securitate

Chiar dacă acesta este un mic proiect, să încercăm, de asemenea, să stabilim o anumită securitate. Pentru a împiedica utilizatorul să atribuie automat o valoare potențial periculoasă Numele site-ului cheie, să ne asigurăm că valoarea este, de fapt, numele unuia dintre site-urile noastre de tutorial.

 // Pregătiți o gamă largă de site-uri tutorial $ siteList = array ('nettuts', 'flashtuts', 'webdesigntutsplus', 'psdtuts', 'vectortuts', 'phototuts', 'mobiletuts','cgtuts ',' audiotuts ' '); // Dacă șirul nu este un nume de site, trebuie doar să îl modificați în nettuts. dacă (! in_array ($ siteName, $ siteList)) $ siteName = 'nettuts'; 

in_array () funcția ne permite să determinăm dacă o valoare - în cazul nostru, valoarea lui $ sitename -- este egal cu unul dintre elementele din $ sitelist mulțime.

Caching

În cele din urmă, vom folosi excelentul YQL pentru a efectua interogările noastre. Gândiți-vă la YQL ca API pentru API-uri. Mai degrabă decât să trebuiască să înveți douăzeci de API-uri diferite, sintaxa YQL asemănătoare SQL vă permite să învățați doar una. Cu toate acestea, deși YQL efectuează un pic de caching pe cont propriu, permiteți-i, de asemenea Salvați feedurile RSS la un fișier text de pe serverul nostru. În acest fel, putem îmbunătăți performanța un pic echitabil.

Începem prin crearea unei noi variabile, $ cache, și făcându-l egal cu locația unde va fi stocat fișierul cache.

 $ cache = dirname (__FILE__). "/ Cache / $ sitename";

Codul de mai sus indică directorul curent al fișierului și apoi într-un dosar cache și, în final, numele site-ului selectat.

Am decis că acest fișier cache ar trebui să fie actualizat la fiecare trei ore. Ca atare, putem conduce rapid dacă declarație, și să determine ultima dată când fișierul a fost actualizat. Dacă fișierul nu există sau actualizarea a fost mai mult de trei ore în urmă, vom interoga YQL.

 $ cache = dirname (__FILE__). "/ Cache / $ sitename"; // Re-cache la fiecare trei ore dacă (filemtime ($ cache) < (time() - 10800) )  // grab the site's RSS feed, via YQL 

YQL este cu ușurință ușor de utilizat. În cazul nostru, vom folosi-o pentru un scop foarte simplu: apuca feed-ul RSS, în formularul JSON, al site-ului care a fost trecut prin querystring, via Numele site-ului. Puteți experimenta diferitele comenzi utilizând consola YQL.





Pentru a interoga un feed RSS, folosim comanda: SELECTARE * din feed WHERE url = "cale / spre / rss / feed".

• Nettuts + Feed: http://feeds.feedburner.com/nettuts
• Psdtuts + Feed: http://feeds.feedburner.com/psdtuts
• Vectortuts + Feed: http://feeds.feedburner.com/vectortuts
• etc.

Construirea Căii

Din motive de lizibilitate, vom construi interogarea noastră YQL în secțiuni.

 // interogare YQL (SELECT * din feed?) // Split pentru citire $ path = "http://query.yahooapis.com/v1/public/yql?q="; $ path. = urlencode ("SELECT * FROM feed unde: url =" http://feeds.feedburner.com/$siteName ""); calea $. = "& format = json";

Cheia este a doua parte de mai sus; când pagina încărcată, am luat numele site-ului din querystring. Acum, trebuie doar să o inserăm în SELECTAȚI interogare. Din fericire, toate site-urile de tutorial utilizează Feedburner! Asigurați-vă că sunteți urlencode interogarea pentru a înlocui orice caractere speciale.

Bine, calea este gata; hai să folosim file_get_contents () pentru a apuca hrana!

 $ feed = file_get_contents ($ path, true);

Presupunând că feed-ul $ este acum egal cu JSON returnat, putem stoca rezultatele într-un fișier text. Cu toate acestea, să ne asigurăm în primul rând că datele au fost returnate. Atâta timp cât ceva este returnat din interogare, $ Nevoia de alimentare> query-> count va fi egal cu o valoare mai mare decât zero. Dacă este, vom deschide fișierul memorat, vom scrie datele în fișier și apoi vom închide.

 // Dacă a fost returnat ceva, cache-ul este (is_object ($ feed) && $ feed-> query-> count) $ cachefile = fopen ($ cache, 'w'); fwrite ($ cachefile, $ feed); fclose ($ cachefile); 

Pare confuz, dar nu este. Functia fopen () acceptă doi parametri:

• Fișierul de deschis: Am stocat această cale în $ cache variabilă în partea de sus a paginii. Rețineți că, dacă acest fișier nu există, acesta va crea fișierul pentru dvs..
• Privilegii de acces: Aici putem specifica care privilegii sunt disponibile. w înseamnă "scrie".

Apoi, deschideți fișierul și scrieți conținutul acestuia $ hrana pentru animale (datele returnate RSS JSON) în fișier și închideți-l.

Utilizarea fișierului din cache

Mai sus, am verificat mai întâi dacă fișierul cache a fost mai vechi de trei ore.

 dacă (filemtime ($ cache) < (time() - 10800) )  // grab the site's RSS feed, via YQL 

Dar dacă nu a fost așa? În acest caz, conducem un altfel declarație, și să apucă conținutul fișierului text, mai degrabă decât folosind YQL.

 dacă (filemtime ($ cache) < (time() - 10800) )  // grab the site's RSS feed, via YQL?  else  // We already have local cache. Use that instead. $feed = file_get_contents($cache); 

În cele din urmă, nu putem face prea mult cu feedul RSS JSON până când îl decodificăm cu PHP.

 // Decode că shizzle $ feed = json_decode ($ feed);

Și asta ar trebui să o facă pentru noi controlor! Cu logica în afara, să includeți șablonul HTML.

 // Include vizualizarea include ('views / site.tmpl.php');

Iată finala noastră site.php. Faceți clic pe extinde pictograma pentru ao vizualiza.

 număr) $ cachefile = fopen ($ cache, 'wb'); fwrite ($ cachefile, $ feed); fclose ($ cachefile);  altceva // Avem deja memoria cache locală. Folosește-o în schimb. $ feed = file_get_contents ($ cache);  // Decode că shizzle $ feed = json_decode ($ feed); // Include vizualizarea include ('views / site.tmpl.php'); 

---

Pasul 7: Șablonul site-ului

La sfârșitul pasului anterior, am încărcat în șablonul nostru (sau vizualizare). Continuați și creați asta vizualizari dosar, și site.tmpl.php fişier. Simțiți-vă liber să îi numiți cum vreți. Apoi, vom introduce HTML-ul nostru.

Puncte de interes de mai sus

• Observați modul în care urmăm același aspect de bază: antetul, zona de conținut, subsolul.
• Deoarece acest șablon va fi folosit pentru fiecare site Tuts + tutorial, trebuie să setăm titlul dinamic. Din fericire, dacă vă aduceți aminte, numele site-ului a fost trecut prin querystring și stocat în $ sitename variabilă (cum ar fi "nettut"). Pentru a capitaliza prima literă și pentru a aplica semnătura + după numele, vom rula variabila prin ucwords () (casete superioare prima literă a fiecărui cuvânt din șir) și adăugați o "+":

• Vom afișa în curând numărul de comentarii pentru fiecare postare de lângă titlu. Putem, din nou, să folosim ThemeRoller pentru al modela, prin intermediul date-counttheme = "e" atribut.


Filtrarea prin feed

În acest moment, avem acces la $ hrana pentru animale obiect care conține feedul nostru RSS. Pentru a diseca acest obiect, puteți oricare dintre ele print_r ($ furaje), sau utilizați consola YQL pentru o vizualizare mai frumoasă. O vom folosi pe acesta din urmă în acest caz. Verifică.





Pentru a obține datele pentru fiecare postare, trebuie să filtrați: $ Nevoia de alimentare> query-> rezultate-> Element. PHP face acest lucru cu un cinch cu pentru fiecare().

În cadrul pentru fiecare() , putem accesa acum valorile dorite cu $ Item-> titlu, sau $ Item-> comentarii, care va afișa titlul, respectiv numărul de comentariu. Adăugați următoarele în cadrul

Etichete.

 
 interogare-> rezultate-> element ca element $) ?> 
 
 & OrigLink =guid-> conținut); ?> "> titlu; ?>  
 comentarii; ?>  
  

În codul de mai sus, construim un element de listă, care conține titlul postării, numărul de comentarii și un link către article.php care conține, de asemenea, numele site-ului și link-ul permanent (la articolul original de pe site-ul Tuts +) din șirul de interogare.

Când vedem pagina actualizată în browser, tada!



Observați cum este numărul de comentarii într-o bule galbenă și este plutit în dreapta? Asta pentru că am aplicat date-counttheme = "e" atribuiți listei neordonate de împachetare. Cât de convenabil.

Hmm? Cred că textul este prea mare pentru aceste titluri lungi. O vizită rapidă la Firebug arată că pot viza h2 etichete cu o clasă de .-li-ui poziție. Să revenim la foaia de stil (mobile.css) și să adăugăm o nouă regulă:

 .ui-li-titlu font-size: 12px; 

Asa e mai bine.



---

Pasul 8: Afișarea postării complete

Ultimul pas este de a construi article.php, care va afișa întreaga postare. Ca și în cazul site.php, article.php va servi ca pe noi controlor, și va interoga articolul selectat cu YQL și va încărca vizualizarea corespunzătoare.

 query-> rezultate-> Element; includ ( 'vizualizări / article.tmpl.php');

Dacă ați urmărit, codul de mai sus ar trebui să vă arate puțin mai familiar. Când am încărcat această pagină, de la site.php, am trecut prin două elemente, prin șirul de interogare:

• Numele site-ului: Conține numele site-ului tutorial selectat în prezent
• Orig Link: Un link către postarea inițială pe site-ul tutorial

Diferența cu interogarea YQL, de data aceasta, este că ne potrivim cu guid (orig link) cu postarea pe care a făcut clic pe utilizator (sau apăsat). În acest fel, exact o înregistrare va fi returnată. Consultați acest exemplu de interogare YQL pentru a obține o idee mai bună despre ce vreau să spun.



Articolul Template

În partea de jos a codului de mai sus, am încărcat fișierul șablon pentru pagina de articol: vizualizari / article.tmpl.php. Vom crea dosarul acum.

   
 
 
  
  
 
 titlu; ?> 
 
 Descriere; ?> 
 
  
  

Ah - așa de familiar. Am trecut deja peste acest șablon. Singura diferență este că, de data aceasta, deoarece există doar o singură afișare de la interogarea YQL pentru a fi afișată, nu trebuie să ne deranjăm cu pentru fiecare() afirmație.


Pagina cu articole nestimate

În acest moment, pe cont propriu, următorul pas ar fi să începeți să aplicați stilul dorit articolului. Nu văd nevoia de a trece peste acest tutorial, deoarece totul se reduce la gustul personal. Iată versiunea mea super minimă.


Aplicarea unei dimensiuni a fontului, a unei înălțimi a liniei, a unui umplutură și a formatării imaginii.

Footers blocați

Un ultim lucru: în secțiunea subsol a articolului, facem trimitere la postarea inițială pe Nettuts +. În starea sa actuală, cititorul va vedea numai atunci când ajunge în partea de jos a articolului. Să închidem subsolul în partea de jos a punctului curent de vizualizare în orice moment. Putem folosi Poziția de date atribut pentru a realiza acest lucru.

Asa e mai bine!

---

Au fost efectuate!

Și, cu o muncă relativ redusă, am construit cu succes un cititor RSS mobil pentru site-urile Tuts +. Se poate extinde cu siguranță pentru a oferi caracteristici suplimentare, verificarea erorilor și îmbunătățiri ale performanței, dar acest lucru va spera, sperăm, să începeți! Dacă doriți să vă dezavantajezi proiectul și să îl faci mai bine, cu toate mijloacele? do! Vă mulțumim pentru citire și asigurați-vă că vă referiți la documentația jQuery Mobile pentru mai multe detalii. Nu mă îndoiesc că veți găsi mai multe tutoriale mobile jQuery pe site-ul nostru surs, Mobiletuts+.

Adăugați cititorul pe ecranul dvs. de pornire iPhone


Vizualizați demonstrația sau faceți-o mai bună!
Cod