Share
En tradisjonell bloggroll er en enkel liste over andre nettsteder, ofte i sidefeltet, som er relatert, eid av eller på annen måte vennlig til hjemmesiden. Blogroll er en god ide og et poeng med bloggenes ånd, men hvordan er en uformell leser å vite om noen av disse nettstedene er virkelig interessante? La oss forbedre konseptet med en blogroll ved ikke bare å oppgi nettsteder, men dra dynamisk nylige overskrifter fra dem, og bruk litt morsomt jQuery-animasjon.
For vårt eksempel bruker vi TUTS-familien av nettsteder. Ideen her er å bygge en "widget" (for mangel på et bedre uttrykk). Langs toppen av vår widget vil være en linje med logoer fra hver av de forskjellige nettstedene i vår bloggroll. TUTS-familien har nydelige enkle blokker, som gjør det enkelt, men konseptet kan tilpasses til hvilken som helst logo. Hver av logoer vil fungere som "faner" eller knapper som, når de klikker, viser nylige overskrifter fra det respektive nettstedet. Her er en rask oversikt over teknologiene vi skal bruke
På grunn av bruk av PHP, vil du ikke kunne laste ned kildekoden, åpne den på din lokale maskin og vise demoen. Du må enten kjøre PHP på din lokale maskin, eller laste den opp til din egen server for å spille med den.
Design først, kode senere. Jeg finner resultatene er alltid bedre på denne måten. Litt å spille rundt i Photoshop, og vi har et enkelt, men moderne design å jobbe med:
Merk bruk av guider. Å være så rent og nøyaktig med designarbeidet ditt er like verdifullt som å være rent og nøyaktig med koden din! Merk at PSD-filene vil bli inkludert i denne demoen.
Jeg ønsker ikke å gå inn i tonnevis med detaljer om hvordan alt designarbeidet ble gjort og hvordan alle bildene ble skåret ut. I stedet kan vi se på hverandre, så forteller jeg raskt.
| | Bilde for bakgrunnstekstur. Gjentar seg over hele kroppsdelen. |
 | Bilde for PSDTUTS-fanen. Bunnhalvdel er for "på" -posisjon, øverste halvdel er for "av" -posisjon. |
 | Bilde for VECTORTUTS-fanen. Bunnhalvdel er for "på" -posisjon, øverste halvdel er for "av" -posisjon. |
 | Bilde for NETTUTS-fanen. Bunnhalvdel er for "på" -posisjon, øverste halvdel er for "av" -posisjon. |
 | Bilde for AUDIOTUTS-fanen. Bunnhalvdel er for "på" -posisjon, øverste halvdel er for "av" -posisjon. |
 | Bilde for "kropp" av widgeten. Dette kan gjenta vertikalt, slik at det kan vokse så høyt som nødvendig. |
 | Bilde for bunnen av widgeten. |
 | Bilde for "neste" -knappen, for å gå videre til neste fane. |
 | Bilde for "Forrige" -knappen, for å flytte tilbake til forrige faneblad. |
Normalt kan vi starte med å kode XHTML / CSS vi trenger for widgeten først. Det er vanligvis den beste måten å gå på, slik at du kan sikre ren og semantisk markering. Men for dette eksempelet tror jeg det vil være lettest for oss å laste ned alle komponentene vi trenger for å få denne tingen til å fungere, og koden rundt det. Dette skyldes at jQuery-plugin "Coda Slider" vi bruker, har en bestemt HTML-struktur som den liker.
Du trenger en hjemmekatalog for dette prosjektet, så fortsett og opprett en ny mappe. Deretter opprett en index.php fil, a style.css fil, og vi trenger mapper for Bilder, inc, og js. Mer organisasjon! Last ned deretter følgende ting:
Når du er gjennom, må toppen av index.php-filen din være slik:
En bedre bloggroll
Hvis du åpner koden for demoen som følger med Coda Slider, ser du at det er ganske mange "wrapping" DIVs som skjer. Hele glidebryteren er pakket inn i en da alle panelene er pakket inn i en, så er hvert panel pakket inn og det er enda en innvendig innpakning inne i hvert panel. Ser litt ut som "DIVitis" (Pesten av amatørkodere bruker mye mer DIV enn nødvendig). Fret ikke, men. Selv om jeg ikke kan argumentere for at det er mange DIV'er som foregår her, tjener hver av dem et formål unikt for glidebryteren og er nødvendig for form og funksjon. Faktisk kompliserer vårt unike design det enda mer og krever bruk av noen flere DIVer her og der.
Her er oppslaget for resten av siden, sans det faktiske innholdet for hver av panelene:
Legg merke til hvordan det ikke er noen oppslag for listen over logoer øverst? Den merkingen genereres dynamisk av pluginet basert på hvor mange paneler det oppdager. Det gir også hvert av elementene et unikt klassenavn. Vi vil bruke disse til å bruke bildene vi opprettet. Ganske fancy eh? Dette gjør det veldig enkelt å legge til og fjerne paneler fra denne skyveknappen i fremtiden. Hvis du vil ha en topp på koden den skaper, kan du bruke noe som Firebug for å se kilden etter at den har blitt gjengitt:
Nå som vi har markeringen kvadret bort, kan vi satse på styling. Igjen, i stedet for å gå gjennom hver enkelt selector her, vil jeg bare vise deg hele CSS-filen, og deretter nedenfor vil jeg gå over noen av de viktige punktene. Det er også noen kommentarer i CSS du kan finne av interesse.
/ * GENERISK RESET & GRUNNSTRUKTUR * / * margin: 0; polstring: 0; kropp font-familie: Verdana, Arial, Helvetica, sans-serif; bakgrunn: url (images / body-bg.jpg); skriftstørrelse: 11px; en / * fjern de stiplede konturene når du klikker på faner * / disposisjon: ingen; tekst-dekorasjon: ingen; ul listestil: none; / * WIDGET STRUCTURE * / #blogSliderWrap width: 320px; margin: 50px auto; bakgrunn: url (bilder / widget-bottom-bg.jpg) 7px nederst no-repeat; polstring-bunn: 50px; stilling: relativ; #blogSlider margin-left: 15px; polstring: 25px 18px 0px 18px; bredde: 263px; bakgrunn: url (bilder / widget-middle-bg.jpg) senter senter repeat-y; .stripViewer posisjon: relative; overløp: skjult; klare: begge; .stripViewer .panelContainer posisjon: relative; venstre: 0px; topp: 0px; .stripViewer .panelContainer .panel float: left; stilling: relativ; bredde: 280px; .wrapper polstring: 10px; .innerWrap bredde: 273px; overløp: skjult; #push høyde: 35px; / * HOVED TABBED NAVIGASJON * / .stripNav margin-left: 22px; stilling: relativ; topp: 18px; z-indeks: 99; bredde: 285px; .stripNav ul li float: left; .stripNav li a / * Generisk "CSS bilde utskifting" * / display: block; høyde: 18px; tekstindeks: -9999px; / * Nedenfor klassenavnene genereres automatisk av JavaScript * / .stripNav li.tab1 a background: url (images / tab-psdtuts.jpg) bredde: 63px; .stripNav li.tab2 a bakgrunn: url (images / tab-nettuts.jpg) toppsenteret ikke-gjenta; bredde: 63px; .stripNav li.tab3 a background: url (images / tab-vectortuts.jpg) øverste senter ikke-gjenta; bredde: 85px; .stripNav li.tab4 a background: url (images / tab-audiotuts.jpg) øverste senter ikke-gjenta; bredde: 73px; .stripNav li: hover, .stripNav li: aktiv, .stripNav li a: focus / * Gjenopprett fokus styling som vi fjernet da vi fjernet skisser * / bakgrunnsposisjon: toppsenter; / * Det er nødvendig å gjenta bildestiene her * / .stripNav li.tab1 a.current bakgrunn: url (images / tab-psdtuts.jpg) bottom center no-repeat; .stripNav li.tab2 a.current bakgrunn: url (images / tab-nettuts.jpg) bottom center no-repeat; .stripNav li.tab3 a.current bakgrunn: url (images / tab-vectortuts.jpg) bottom center no-repeat; .stripNav li.tab4 a.current bakgrunn: url (images / tab-audiotuts.jpg) bottom center no-repeat; / * SUB NAVIGASJON * / .stripNavL a, .stripNavR a display: block; posisjon: absolutt; bredde: 75px; høyde: 22px; tekstindeks: -9999px; .stripNavL a bunn: 35px; igjen: 45px; bakgrunn: url (images / previous.png); .stripNavR en bunn: 35px; høyre: 45px; bakgrunn: url (images / next.png); / * HEADLINES STYLING * / .panel ul bredde: 240px; .panel ul li a border-bottom: 1px solid # C1B599; farge: # 303030; skjerm: blokk; polstring: 7px 10px; .panel ul li: siste barn a / * Fjern nederste kant på siste liste element Hooray for pseudo selectors! * / grense: ingen; / * Unike rolloverfarger for hver liste * / .panel ul # psd-list li a: svever bakgrunn: # b20202; farge: hvit; .panel ul # netliste li a: svever bakgrunn: # 4a8c7f; farge: hvit; .Panel ul # vektor-list li a: hover bakgrunn: # 1f5293; farge: hvit; .panel ul # lydliste li a: svever bakgrunn: # 4f7c11; farge: hvit;
Nå med bildene, markeringen og CSS alt på plass, kan vi slå av glidebryteren. Ta med følgende JavaScript nederst på hodet ditt.
Nå har vi en perfekt funksjonell glidebryter, med ingenting i det.
SimplePie er en PHP feed parser som gjør det ganske darn enkelt å trekke inn RSS feeds og bruke innholdet som vi ønsker. I vårt eksempel er alt vi trenger, overskriftene og koblingene, men å trekke fôret er alltid det samme uansett hva du bruker.
På toppen av din index.php fil, ta med følgende PHP-kode:
handle_content_type (); for ($ x = 0; $ x < $psdtutsfeed->get_item_quantity ($ total_articles); $ x) $ psdtutsarticles [] = $ psdtutsfeed-> get_item ($ x); ?>
Denne koden vil gå ut og få RSS-feed fra PSDTUTS RSS-feedet (http://feeds.feedburner.com/psdtuts). Deretter lager vi en rekke av de 10 siste overskriftene. Nå nede i "panelet" for PSDTUTS, må vi sykle gjennom denne gruppen og ekko ut de koblede overskriftene. Her er den nye koden for PSDTUTS-panelet:
få lenke() . '">'. $ item-> get_title (). ''; ?>
Du kan gjette hvor vi trenger å gå herfra ... Vi må gjøre nøyaktig samme ting for hver av våre fire paneler. Du trenger ikke å liste all koden ut her, da alt vi gjør er å opprette nye variabler for hver av feeds, trekk dem inn og opprett nye arrays for hver av disse feeds. Så vi løp gjennom hver av de nye arrays akkurat som vi gjorde for PSDTUTS for å ekko ut de koblede overskriftene.
Legg merke til hvordan den uordnede listen vi brukte for PSDTUTS-overskriftene hadde en unik ID for "psd-liste". Det er ikke helt nødvendig, men jeg har brukt det som en krok i dette eksemplet for å bruke en annen overgangsfarge for hver overskriftsliste.
Vår widget er nå nesten fullført!
Til tross for at det var fullt gyldig kode, viste både IE6 og IE7 noen kjennskaper med bakgrunnsbildene. Åh, vår superkule dropshadow er ikke på noen måte nødvendig. Vi kan legge den på plass som "progressiv forbedring" for folk med moderne moderne nettlesere og trekke den ut for IE, og gir bare en enkel hvit boks.
Ta med et IE-Only-stilark i hodet ditt slik:
Deretter lager du style-ie.css filen i hjemmekatalogen din og ta med følgende:
#blogSliderWrap bakgrunn: hvit; bredde: 285px; stilling: relativ; overløp: skjult; #blogSlider bakgrunn: hvit; bredde: 285px; polstring: 0; margin: 0; .stripNav margin: 0; topp: 0px;
Nå er alt A-OK i Internet Explorer. Bakgrunnen er rett og slett bare hvit:
Så der har du det, en bedre bloggroll for alle! Klart, teknologiene som presenteres her, kan brukes til alle slags interessante ting utover en enkel bloggroll. Skyvekontrollen er et fantastisk plugin som kan brukes til et fotogalleri, en portefølje, trinnvise instruksjoner eller et hvilket som helst antall applikasjoner. Evnen til å trekke inn RSS-feeder til bruk på nettsider er også veldig kraftig (og potensielt misbrukbar). Se SimplePie-dokumentasjonen for alt du kan gjøre med det, og husk å bruke det for godets krefter!
Accentsconagua