Accentsconagua

Comment construire un Super Duper News Scroller

Code
Share

Cette semaine, nous allons apprendre à combiner PHP, SimplePie et jQuery pour créer un widget de défilement de nouvelles simple pour votre site Web. C'est beaucoup plus facile que vous ne le pensez; alors commençons.


Notez que j'ai légèrement modifié le code après avoir enregistré cette capture d'écran. Ne vous inquiétez pas, ce ne sont que des changements mineurs; mais comme avec n'importe quoi, vous devriez continuellement refactoriser votre code.

Final Plugin NewsScroll

 (function ($) $ .fn.newsScroll = function (options) retour this.each (function () var $ this = $ (this), default = vitesse: 400, délai: 3000, list_item_height: $ this .children ('li'). outerHeight (), settings = $ .extend (, valeurs par défaut, options); setInterval (function () $ this.children ('li: premier') .animate (marginTop: '-' + settings.list_item_height, opacité: 'masquer', settings.speed, function () $ this .children ('li: premier') .appendTo ($ this) .css ('marginTop', 0). fadeIn (300);); // fin animer, settings.delay); // fin setInterval);) (jQuery);

Avec commentaires 

 // Crée une fonction anonyme à invocation automatique. De cette façon, // nous sommes libres d'utiliser le symbole dollar jQuery n'importe où à l'intérieur. (function ($) // Nous appelons notre plugin "newscroll". Lors de la création de notre fonction, // nous allons permettre à l'utilisateur de lui transmettre quelques paramètres. $ .fn.newsScroll = function (options) // Pour ce faire, effectuez les opérations suivantes: return this.each (function () var // Caches this - ou le ou les widgets ul qui ont été transmis. // Gain de temps et d’amélioration des performances. $ This = $ (this), // Si l'utilisateur ne transmet pas de paramètres, nous utiliserons cet objet: defaults = speed: 400, // À quelle vitesse les éléments doivent-ils défiler? delay: 3000, // Combien de temps dure la pause list_item_height: $ this.children ('li'). outerHeight () // Quelle est la hauteur de chaque élément de la liste? Si ce paramètre n'est pas passé, jQuery le récupérera., // Crée un nouvel objet qui fusionne les valeurs par défaut et les "options" de l'utilisateur //. Cette dernière est prioritaire. settings = $ .extend (, valeurs par défaut, options); // Ceci définit un intervalle appelé en continu. setInterval (function () / / Récupère le tout premier élément de la liste dans l’ensemble emballé. $ Thi s.children ('li: first') // Animate it .animate (marginTop: '-' + settings.list_item_height, // décale ce premier élément vers le haut. opacité: 'masquer', // Fade the li out. // Au fil du temps, // est passé. (Settings.speed) settings.speed, // Une fois l'opération terminée, exécutez une fonction de rappel. function () // Récupère ce premier élément de liste. $ this.children ('li: first') .appendTo ($ this) // Déplacez-le tout en bas de la ul. // Réinitialise sa marge en haut à 0. Sinon, // il contiendra toujours la valeur négative que nous avons définie précédemment… css ('marginTop', 0) .fadeIn (300); // Entrée en fondu.); // fin animer, settings.delay); // fin de setInterval); ) (jQuery);

Page finale

 handle_content_type (); ?>      Super Duper News Scroller   
 
Super Duper News Scroller: Construit avec PHP, SimplePie et jQuery 
     get_items (0, 15) en tant que $ item):?> 
  •  get_description (); ?> 
    get_permalink (); ?> ">get_title (); ?>
     
     avoir un rendez-vous(); ?> 
     
    •

C'est tout

En vingt minutes, nous avons pu construire un joli et simple scroller. Vous êtes maintenant libre de prendre le plugin et de le développer selon vos besoins. Ce que vous avez ici devrait être considéré comme la première étape. Comment pouvez-vous l'améliorer??

Vous pourriez aussi aimer…

  • Extension de SimplePie pour analyser des flux RSS uniques

    Il y a quelques jours, alors que je préparais notre didacticiel Créer une galerie Flick Slick avec SimplePie, je me suis dit que nous n'avions pas posté beaucoup d'articles couvrant SimplePie. Considérant à quel point une bibliothèque est fantastique, je pense qu'il est temps de regarder de plus près..

    Visitez l'article

  • Vous ne pouvez toujours pas créer un plugin jQuery?

    C'est dur. Vous lisez tutoriel après tutoriel, mais ils supposent tous que vous en savez plus que vous ne le savez réellement. Au moment où vous avez terminé, vous vous sentez plus confus qu'auparavant. Pourquoi a-t-il créé un objet vide? Qu'est-ce que cela signifie lorsque vous passez "options" en tant que paramètre? Que font réellement les "paramètres par défaut"?

    Jamais peur; Je vais vous montrer exactement comment créer votre propre plug-in «tooltip», à la demande de l'un de nos fidèles lecteurs..

    Visitez l'article

  • jQuery for Absolute Beginners

    Salut à tous! Aujourd'hui, j'ai posté le screencast final de ma série «jQuery for Absolute Beginners» sur le blog ThemeForest. Si vous n'êtes pas familier, au cours d’un mois environ, j’ai posté quinze tutoriels vidéo qui vous expliquent EXACTEMENT comment utiliser la bibliothèque jQuery. Nous commençons par télécharger la bibliothèque et, éventuellement, à créer un sélecteur de style AJAX.

    Visitez l'article

  • Plonger dans PHP: Série de vidéos

    Aujourd'hui marque le début d'une nouvelle série sur le blog ThemeForest qui vous montrera EXACTEMENT comment démarrer avec PHP. Comme pour les screencasts «jQuery for Absolute Beginners», nous allons commencer à partir de zéro et progresser lentement pour atteindre des sujets plus avancés. Si vous espériez apprendre cette langue, rendez-vous sur notre site et abonnez-vous au flux RSS pour être mis à jour lors de la mise en ligne de nouvelles vidéos..

    Visitez l'article

Code
×