Share
Questa settimana impareremo come combinare PHP, SimplePie e jQuery per creare un semplice widget news scroller per il tuo sito web. È molto più facile di quanto tu possa pensare; quindi cominciamo.
Nota che ho modificato leggermente il codice dopo aver registrato questo screencast. Non preoccuparti, sono solo piccoli cambiamenti; ma come con qualsiasi cosa, dovresti refactoring continuamente il tuo codice.
Accentsconagua
(function ($) $ .fn.newsScroll = function (options) return this.each (function () var $ this = $ (this), defaults = velocità: 400, delay: 3000, list_item_height: $ this .children ('li'). outerHeight (), settings = $ .extend (, defaults, options); 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 animate, settings.delay); // end setInterval);) (jQuery); // Crea una funzione anonima autoinviante. In questo modo, // siamo liberi di usare il simbolo del dollaro jQuery ovunque all'interno. (function ($) // Nominiamo il nostro plugin "newscroll". Quando creiamo la nostra funzione, // consentiremo all'utente di passare in un paio di parametri. $ .fn.newsScroll = function (options) // Per ogni elemento nel set avvolto, eseguire quanto segue. Return this.each (function () var // Caches this - o il / i widget / i passato / i. // Salva tempo e migliora le prestazioni. $ This = $ (this), // Se l'utente non passa nei parametri, useremo questo oggetto: defaults = velocità: 400, // Quanto velocemente dovrebbero scorrere gli oggetti? delay: 3000, // Quanto a lungo si riposa? tra le transizioni? list_item_height: $ this.children ('li'). outerHeight () // Quanto è alto ogni elemento della lista? Se questo parametro non viene passato, jQuery lo prenderà., // Crea un nuovo oggetto che unisce i valori predefiniti e le // opzioni dell'utente: quest'ultimo ha la precedenza. settings = $ .extend (, defaults, options); // Imposta un intervallo che verrà chiamato continuamente. setInterval (function () / / Ottieni il primo elemento della lista nel set avvolto. $ Thi s.children ('li: first') // Anima it. animate (marginTop: '-' + settings.list_item_height, // Sposta questo primo oggetto verso l'alto. opacità: 'nascondi', // Dissolvenza li fuori. // Nel corso del tempo tuttavia è // passato in. (Settings.speed) settings.speed, // Al termine, eseguire una funzione di callback. function () // Ottieni di nuovo la prima voce dell'elenco. $ this.children ('li: first') .appendTo ($ this) // Sposta il fondo dell'ul. // Ripristina il margine superiore di nuovo su 0. Altrimenti, // conterrà ancora il valore negativo che abbiamo impostato in precedenza ... css ('marginTop', 0) .fadeIn (300); // Fade in back in.); // end animate, settings.delay); // end setInterval); ) (jQuery); handle_content_type (); ?>Super Duper News Scroller Scroller Super Duper News: Costruito con PHP, SimplePie e jQuery
get_items (0, 15) come $ item):?>
- get_description (); ?>
get_permalink (); ?> ">get_title (); ?>
get_date (); ?>
In venti minuti, siamo stati in grado di costruire uno scroller semplice e piacevole. Ora sei libero di prendere il plug-in e di estenderlo alle tue esigenze. Quello che hai qui dovrebbe essere considerato il primo passo. Come puoi migliorare su di esso?
Qualche giorno fa, mentre preparavo la nostra galleria Create a Slick Flickr con il tutorial di SimplePie, mi è venuto in mente che non abbiamo pubblicato molti articoli che riguardavano SimplePie. Considerando quanto sia fantastica una biblioteca, penso che sia il momento di dare un'occhiata più da vicino.
Visita l'articolo
È dura. Leggi il tutorial dopo il tutorial, ma tutti danno per scontato che tu sappia più di quello che realmente fai. Quando avrai finito, ti sentirai più confuso di quanto inizialmente fossi. Perché ha creato un oggetto vuoto? Che cosa significa quando passi "opzioni" come parametro? Cosa fanno in realtà "impostazioni predefinite"?
Mai aver paura; Ti mostrerò esattamente come costruire il tuo plugin "tooltip", su richiesta di uno dei nostri fedeli lettori.
Visita l'articolo
Ciao a tutti! Oggi ho postato lo screencast finale nella mia serie "jQuery for Absolute Beginners" sul blog ThemeForest. Se non conosci bene, nel corso di circa un mese, ho pubblicato quindici video tutorial che ti insegnano ESATTAMENTE come usare la libreria jQuery. Iniziamo scaricando la libreria e alla fine arriviamo a creare uno switcher di stile AJAX.
Visita l'articolo
Oggi segna l'inizio di una nuova serie sul blog ThemeForest che ti mostrerà ESATTAMENTE come iniziare con PHP. Proprio come con gli screencast di "jQuery for Absolute Beginners", partiremo da zero e procediamo lentamente verso argomenti più avanzati. Se speri di imparare questa lingua, assicurati di fare una visita e iscriviti al feed RSS per essere aggiornato quando vengono pubblicati nuovi video.
Visita l'articolo
