Share
Denne uken vil vi lære å kombinere PHP, SimplePie og jQuery for å bygge en enkel nyhetsscroller-widget for nettstedet ditt. Det er mye enklere enn du kanskje tror; så la oss begynne.
Merk at jeg endret koden litt etter at du har tatt opp denne skjermbildet. Ikke bekymre deg, de er bare små endringer; men som med noe, bør du kontinuerlig refactor koden din.
Accentsconagua
(funksjon ($) $ .fn.newsScroll = funksjon (alternativer) return this.each (funksjon () var $ this = $ (dette), standard = hastighet: 400, forsinkelse: 3000, list_item_height: $ this .children ('li'). outerHeight (), innstillinger = $ .extend (, standard, alternativer); setInterval (funksjon () $ this.children ('li: first') .animate (marginTop: '-' + settings.list_item_height, opacity: 'hide', settings.speed, function () $ this .children ('li: first') .appendTo ($ this) .css ('marginTop', 0). fadeIn (300);); // end animere, settings.delay); // end setInterval);) (jQuery); // Opprett en anonym funksjon. På den måten, // vi kan bruke jQuery-dollarsymbolet hvor som helst innenfor. (funksjon ($) // Vi kaller vår plugin "newscroll". Når du lager vår funksjon, // lar vi brukeren passere i et par parametere. $ .fn.newsScroll = function (options) // For hvert element i innpakket sett, utfør følgende. Return this.each (function () var // Caches this - eller ul-widgetene som ble sendt inn. // Sparer tid og forbedrer ytelsen. $ This = $ (dette), // Hvis brukeren ikke sender inn parametere, bruker vi dette objektet. standard = hastighet: 400, // Hvor raskt skal elementene rulle? forsinkelse: 3000, // Hvor lenge er det hvile mellom overganger? list_item_height: $ this.children ('li'). outerHeight () // Hvor høy er hvert listepunkt? Hvis denne parameteren ikke er sendt inn, vil jQuery gripe den., // Opprett et nytt objekt som fusjonerer standardene og // brukerens "alternativer". Sistnevnte har forrang. innstillinger = $ .extend (, standardinnstillinger, alternativer); // Dette angir et intervall som kalles kontinuerlig. setInterval (funksjon () / / Få det aller første listeposten i det innpakket settet. $ Thi s.children ('li: first') // Animer den .animate (marginTop: '-' + settings.list_item_height, // Skift dette første elementet oppover. opacity: 'hide', // Fade the li ut. // I løpet av den lange tiden er // passet inn. (Settings.speed) settings.speed, // Når du er ferdig, kjør en tilbakeringingsfunksjon. funksjon () // Få det første listen elementet igjen. $ this.children ('li: first') .appendTo ($ this) // Flytt den aller bunnen av ul. // Tilbakestill marginen tilbake til 0. Ellers vil // fortsatt inneholde den negative verdien som vi angitt tidligere ... css ('marginTop', 0) .fadeIn (300); // Fade inn igjen.); // end animere, settings.delay); // end setInterval); ) (jQuery); handle_content_type (); ?>Super Duper News Scroller Super Duper News Scroller: Bygget med PHP, SimplePie og jQuery
get_items (0, 15) som $ item):?>
- get_description (); ?>
get_permalink (); ?> ">get_title (); ?>
get_date (); ?>
På tjue minutter kunne vi bygge en fin og enkel scroller. Du er nå ledig til å ta pluggen og utvide den til dine behov. Det du har her, bør betraktes som det første trinnet. Hvordan kan du forbedre det?
For noen dager siden, da jeg forberedte vårt Opprett et Slick Flickr-galleri med SimplePie-opplæringen, skjedde det for meg at vi ikke har postet mange artikler som dekket SimplePie. Med tanke på hvor fantastisk et bibliotek det er, synes jeg det er på tide å ta en nærmere titt.
Besøk artikkelen
Det er tøft. Du leser opplæringen etter opplæringen, men de antar at du vet mer enn du egentlig gjør. Når du er ferdig, er du igjen følelsen mer forvirret enn du i utgangspunktet var. Hvorfor opprettet han en tom gjenstand? Hva betyr det når du sender "alternativer" som en parameter? Hva gjør "defaultsettings" faktisk?
Aldri frykt; Jeg skal vise deg nøyaktig hvordan du bygger ditt eget "tooltip" -plugin, på forespørsel fra en av våre lojale lesere.
Besøk artikkelen
Hei alle sammen! I dag postet jeg den siste screencast i min "jQuery for Absolute Beginners" -serien på ThemeForest Blog. Hvis du ikke er kjent - i løpet av omtrent en måned, postet jeg femten videoopplæringer som lærer deg nøyaktig hvordan du bruker jQuery-biblioteket. Vi begynner med å laste ned biblioteket og til slutt jobbe oss opp for å skape en AJAX stilbryter.
Besøk artikkelen
I dag markerer begynnelsen på en helt ny serie på ThemeForest bloggen som vil vise deg nøyaktig hvordan du kommer i gang med PHP. På samme måte som med "jQuery for Absolute Beginners" -screenshots, starter vi fra bunnen av og jobber langsomt opp med noen avanserte emner. Hvis du har håpet å lære dette språket, må du besøke og abonnere på RSS-feedet som skal oppdateres når nye videoer blir lagt ut.
Besøk artikkelen
