Share
Deze week leren we hoe je PHP, SimplePie en jQuery kunt combineren om een eenvoudige nieuws-scroller-widget voor je website te maken. Het is veel gemakkelijker dan je zou denken; dus laten we beginnen.
Merk op dat ik de code enigszins heb aangepast na het opnemen van deze screencast. Maak je geen zorgen, het zijn slechts kleine veranderingen; maar zoals met alles, moet je je code continu aanpassen.
Accentsconagua
(functie ($) $ .fn.newsScroll = functie (opties) return this.each (function () var $ this = $ (this), defaults = speed: 400, delay: 3000, list_item_height: $ this .children ('li'). outerHeight (), settings = $ .extend (, standaardinstellingen, opties); setInterval (function () $ 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 animation, settings.delay); // end setInterval);) (jQuery); // Maak een zelfoproepende anonieme functie. Op die manier // zijn we vrij om overal het jQuery-dollarteken te gebruiken. (functie ($) // We noemen onze plug-in "newscroll". Wanneer we onze functie maken, // laten we de gebruiker een aantal parameters doorgeven. $ .fn.newsScroll = function (options) // Voor elk item in de ingepakte set voert u het volgende uit: return this.each (function () var // Caches this - of de ul-widget (s) die zijn doorgegeven. // Bespaart tijd en verbetert de prestaties. $ This = $ (this), // Als de gebruiker geen parameters doorgeeft, gebruiken we dit object. defaults = speed: 400, // Hoe snel moeten de items scrollen? delay: 3000, // How long a rest tussen overgangen? list_item_height: $ this.children ('li'). outerHeight () // Hoe groot is elk lijstitem? Als deze parameter niet wordt ingeleverd, haalt jQuery deze., // Maak een nieuw object dat voegt de standaardwaarden en de // user's "options" samen .De laatste heeft voorrang. settings = $ .extend (, defaults, options); // Hiermee wordt een interval ingesteld dat continu wordt aangeroepen. setInterval (function () / / Krijg het allereerste lijstitem in de ingepakte set. $ Thi s.children ('li: first') // Animeer het .anim (marginTop: '-' + settings.list_item_height, // Verplaats dit eerste item naar boven. dekking: 'verberg', // Fade the li out. // In de loop van de tijd wordt // doorgegeven. (Settings.speed) settings.speed, // Voer een callback-functie uit wanneer deze is voltooid. function () // Krijg dat eerste lijstitem opnieuw. $ this.children ('li: first') .appendTo ($ this) // Verplaats hem helemaal onderaan de ul. // Zet de marge top terug op 0. Anders zal // deze nog steeds de negatieve waarde bevatten die we eerder hebben ingesteld ... css ('marginTop', 0) .fadeIn (300); // Fade-in terug in.); // end animation, settings.delay); // end setInterval); ) (jQuery); handle_content_type (); ?>Super Duper Nieuws-scroller Super Duper Nieuws-scroller: Gebouwd met PHP, SimplePie en jQuery
get_items (0, 15) als $ item):?>
- get_description (); ?>
get_permalink (); ?> ">get_title (); ?>
krijg datum(); ?>
In twintig minuten konden we een mooie en eenvoudige scroller bouwen. U bent nu vrij om de plug-in in te nemen en uit te breiden naar uw behoeften. Wat je hier hebt, moet als de eerste stap worden beschouwd. Hoe kun je het verbeteren?
Toen ik een paar dagen geleden onze Create a Slick Flickr-galerij met SimplePie-zelfstudie voorbereidde, drong het tot me door dat we niet veel artikelen over SimplePie hebben gepubliceerd. Gezien hoe fantastisch een bibliotheek is, denk ik dat het tijd is om het van dichterbij te bekijken.
Bezoek artikel
Het is zwaar. Je leest tutorial na tutorial, maar ze gaan er allemaal vanuit dat je meer weet dan je eigenlijk doet. Tegen de tijd dat je klaar bent, voel je je meer in de war dan je aanvankelijk was. Waarom creëerde hij een leeg object? Wat betekent het als u "opties" als parameter doorgeeft? Wat doen "defaultsettings" eigenlijk??
Nooit bang zijn; Ik ga u precies laten zien hoe u uw eigen "tooltip" -plug-in bouwt, op verzoek van een van onze trouwe lezers.
Bezoek artikel
Hallo iedereen! Vandaag plaatste ik de laatste screencast in mijn serie "jQuery for Absolute Beginners" op de ThemeForest Blog. Als je onbekend bent - in de loop van ongeveer een maand heb ik vijftien videozelfstudies gepost die je PRECIES leren hoe je de jQuery-bibliotheek gebruikt. We beginnen met het downloaden van de bibliotheek en werken uiteindelijk een weg omhoog naar een AJAX-stijlwisselaar.
Bezoek artikel
Vandaag is het begin van een gloednieuwe serie op de ThemeForest-blog die je PRECIES laat zien hoe je aan de slag kunt met PHP. Net als bij de screenings van "jQuery for Absolute Beginners", beginnen we helemaal opnieuw en werken we langzaamaan verder aan wat meer geavanceerde onderwerpen. Als u hoopt deze taal te leren, moet u zeker een bezoek brengen en u abonneren op de RSS-feed die moet worden bijgewerkt wanneer er nieuwe video's worden geplaatst.
Bezoek artikel
