Share
I veckan lär vi oss att kombinera PHP, SimplePie och jQuery för att skapa en enkel nyhetsscroller-widget för din webbplats. Det är mycket lättare än du kanske tror; så låt oss börja.
Observera att jag ändrade koden något efter inspelningen av denna skärmdump. Oroa dig inte, det är bara små förändringar. men som med allt, bör du kontinuerligt refactor din kod.
Accentsconagua
(funktion ($) $ .fn.newsScroll = funktion (alternativ) return this.each (funktion () var $ this = $ (detta), standardvärden = hastighet: 400, fördröjning: 3000, list_item_höjd: $ this .children ('li'). outerHeight (), inställningar = $ .extend (, standardvärden, alternativ); setInterval (funktion () $ this.children ('li: first') .animate (marginTop: '-' + settings.list_item_height, opacitet: 'hide', settings.speed, function () $ this .children ('li: first') .appendTo ($ this) .css ('marginTop', 0). fadeIn (300);); // end animera, settings.delay); // end setInterval);) (jQuery); // Skapa en egen anropande anonym funktion. På så sätt, // vi kan använda jQuery-dollarnsymbolen någonstans inom. (funktion ($) // Vi heter vårt plugin "newscroll". När vi skapar vår funktion, // tillåter vi användaren att skicka i några parametrar. $ .fn.newsScroll = function (options) // För varje objekt i den förpackade uppsättningen, utför följande. Returnera this.each (function () var // Caches this - eller den ul widget (er) som skickades in. // Sparar tid och förbättrar prestanda. $ This = $ (this), // Om användaren inte skickar in parametrar använder vi det här objektet. default = speed: 400, // Hur snabbt ska objekten bläddra? Fördröjning: 3000, // Hur länge vilar mellan övergångar? list_item_height: $ this.children ('li'). outerHeight () // Hur hög är varje listobjekt? Om den här parametern inte skickas in kommer jQuery ta tag i det., // Skapa ett nytt objekt som Sammanfogar standardvärdena och // användarens alternativ. Den senare har företräde. Settings = $ .extend (, standardvärden, alternativ); // Detta ställer in ett intervall som kallas kontinuerligt. setInterval (function () / / Hämta det allra första listobjektet i den förpackade uppsättningen. $ Thi s.children ('li: first') // Animera det .animate (marginTop: '-' + settings.list_item_height, // Ändra det här första objektet uppåt. opacitet: "hide", // Fade the li out. // Under loppet av hur länge det är // går in. (Settings.speed) settings.speed, // När du är klar kör du en återuppringningsfunktion. funktion () // Hämta det första listobjektet igen. $ this.children ('li: first') .appendTo ($ this) // Flytta den längst ner på ul. // Återställ sin marginal överst till 0. Annars, // kommer det fortfarande att innehålla det negativa värdet som vi satt tidigare ... css ('marginTop', 0) .fadeIn (300); // Fade in back in.); // avsluta animera, settings.delay); // slutet setInterval); ) (jQuery); handle_content_type (); ?>Super Duper News Scroller Super Duper News Scroller: Byggd med PHP, SimplePie och jQuery
get_items (0, 15) som $ item):?>
- get_description (); ?>
get_permalink (); ?> ">get_title (); ?>
get_date (); ?>
På tjugo minuter kunde vi bygga en fin och enkel scroller. Du kan nu plugga in och expandera det till dina behov. Vad du har här bör betraktas som det första steget. Hur kan du förbättra det?
För några dagar sedan, när jag förberedde vårt Skapa ett Slick Flickr-galleri med SimplePie-handledning, så hände det mig att vi inte har lagt upp många artiklar som täckte SimplePie. Med tanke på hur fantastiskt ett bibliotek det är, tycker jag att det är dags att ta en närmare titt.
Besök artikeln
Det är svårt. Du läser handledning efter handledning, men de antar att du vet mer än du faktiskt gör. När du är klar är du kvar och känner dig mer förvirrad än du ursprungligen var. Varför skapade han ett tomt objekt? Vad betyder det när du skickar "alternativ" som en parameter? Vad gör "defaultsettings" faktiskt?
Var aldrig rädd för; Jag ska visa dig exakt hur du bygger din egen "tooltip" -plugg, på begäran av en av våra lojala läsare.
Besök artikeln
Hej allihopa! Idag skrev jag den sista skärmbilden i min "jQuery for Absolute Beginners" -serie på ThemeForest Blog. Om du är obekant - under ungefär en månad har jag skrivit upp femton videokollektioner som lär dig EXAKTIVt hur du använder jQuery-biblioteket. Vi börjar med att ladda ner biblioteket och så småningom jobba fram till att skapa en AJAX stil-switcher.
Besök artikeln
I dag markerar början på en helt ny serie på ThemeForest-bloggen som visar dig EXACTLY hur man kommer igång med PHP. Precis som med "jQuery for Absolute Beginners" -screenshots börjar vi från början och arbetar långsamt upp till några mer avancerade ämnen. Om du har hoppats på att lära sig detta språk, var noga med att besöka och prenumerera på RSS-flödet som ska uppdateras när nya videoklipp publiceras.
Besök artikeln
