Share
In dieser Woche erfahren Sie, wie Sie PHP, SimplePie und jQuery kombinieren, um ein einfaches Widget für Ihre News-Scroller für Ihre Website zu erstellen. Es ist viel einfacher als Sie vielleicht denken. Also fangen wir an.
Beachten Sie, dass ich den Code nach der Aufnahme dieses Screencasts leicht geändert habe. Mach dir keine Sorgen, es sind nur kleine Änderungen; Wie auch immer, sollten Sie Ihren Code kontinuierlich umgestalten.
Accentsconagua
(Funktion ($) $ .fn.newsScroll = Funktion (Optionen) return this.each (Funktion () var $ this = $ (this), Standardwerte = Geschwindigkeit: 400, Verzögerung: 3000, list_item_height: $ this .children ('li'). outerHeight (), settings = $ .extend (, Standardeinstellungen, Optionen); setInterval (function () $ this.children ('li: first') .animate (marginTop: '-' + settings.list_item_height, Deckkraft: 'hide', settings.speed, function () $ this .children ('li: first') .appendTo ($ this) .css ('marginTop', 0). fadeIn (300);); // end animate, settings.delay); // end setInterval);) (jQuery); // Eine anonyme Funktion zum Selbstaufrufen erstellen. Auf diese Weise // können wir das jQuery-Dollar-Symbol an beliebiger Stelle verwenden. (function ($) // Wir nennen unser Plugin "newscroll". Beim Erstellen unserer Funktion // erlauben wir dem Benutzer, einige Parameter zu übergeben. $ .fn.newsScroll = function (options) // Führen Sie für jedes Element in der umschlossenen Gruppe Folgendes aus: return this.each (function () var // Zwischenspeichert dies - oder die ul-Widget (s), die übergeben wurden. // Spart Zeit und verbessert die Leistung. $ This = $ (this), // Wenn der Benutzer keine Parameter übergibt, verwenden wir dieses Objekt. defaults = Geschwindigkeit: 400, // Wie schnell sollten die Elemente blättern? delay: 3000, // Wie lange dauert eine Pause? zwischen Übergängen? list_item_height: $ this.children ('li'). outerHeight () // Wie groß ist jedes Listenelement? Wenn dieser Parameter nicht übergeben wird, wird es von jQuery übernommen., // Erstellen Sie ein neues Objekt führt die Standardwerte und die // Optionen des Benutzers zusammen. Letztere hat Vorrang. settings = $ .extend (, Standardwerte, Optionen); // Hiermit wird ein Intervall festgelegt, das fortlaufend aufgerufen wird. setInterval (function () / / Holen Sie sich das allererste Listenelement in der umschlossenen Gruppe. $ Thi s.children ('li: first') // Animieren Sie es .animate (marginTop: '-' + einstellungen.list_item_height, // Schieben Sie dieses erste Element nach oben. Deckkraft: 'hide', // Ausblenden des Li. // Im Laufe der Zeit wird jedoch // lang. (Settings.speed) settings.speed übergeben. // Wenn der Vorgang abgeschlossen ist, führen Sie eine Rückruffunktion aus. function () // Holen Sie sich das erste Listenelement erneut. $ this.children ('li: first') .appendTo ($ this) // Verschiebe es ganz nach unten. // Setzen Sie den Rand wieder auf 0 zurück. Andernfalls enthält // der zuvor festgelegte negative Wert… css ('marginTop', 0) .fadeIn (300); // wieder einblenden.); // end animate, settings.delay); // Ende setInterval); ) (jQuery); handle_content_type (); ?>Super Duper News Scroller Super Duper News Scroller: Mit PHP, SimplePie und jQuery erstellt
get_items (0, 15) als $ item):?>
- get_description (); ?>
get_permalink (); ?> ">get_title (); ?>
Verabredung bekommen(); ?>
In zwanzig Minuten konnten wir einen schönen und einfachen Scroller bauen. Sie können das Plugin jetzt frei nehmen und an Ihre Bedürfnisse anpassen. Was Sie hier haben, sollte als erster Schritt betrachtet werden. Wie kannst du es verbessern??
Als ich vor ein paar Tagen unser Tutorial "Eine Slick Flickr-Galerie mit SimplePie erstellen" vorbereitete, fiel mir ein, dass wir nicht viele Artikel über SimplePie gepostet haben. Wenn man bedenkt, wie fantastisch eine Bibliothek ist, denke ich, ist es an der Zeit, genauer hinzusehen.
Artikel besuchen
Es ist schwierig. Sie lesen das Tutorial nach dem Tutorial, aber alle gehen davon aus, dass Sie mehr wissen als Sie tatsächlich wissen. Wenn Sie fertig sind, fühlen Sie sich verwirrter als ursprünglich. Warum hat er ein leeres Objekt erstellt? Was bedeutet es, wenn Sie "Optionen" als Parameter übergeben? Was tun eigentlich "Standardeinstellungen"??
Hab niemals Angst; Auf Wunsch eines treuen Lesers zeige ich Ihnen genau, wie Sie Ihr eigenes Tooltip-Plugin erstellen können.
Artikel besuchen
Hallo allerseits! Heute habe ich den letzten Screencast in meiner Serie „jQuery für absolute Anfänger“ im ThemeForest-Blog veröffentlicht. Wenn Sie sich nicht auskennen, habe ich im Laufe von etwa einem Monat fünfzehn Video-Tutorials veröffentlicht, in denen Sie GENAU erfahren, wie Sie die jQuery-Bibliothek verwenden. Wir beginnen mit dem Herunterladen der Bibliothek und arbeiten schließlich daran, einen AJAX-Switcher zu erstellen.
Artikel besuchen
Heute ist der Beginn einer brandneuen Serie im ThemeForest-Blog, die Ihnen GENAU zeigt, wie Sie mit PHP beginnen. Genau wie bei den Screencasts „jQuery für absolute Anfänger“ beginnen wir bei null und arbeiten uns langsam an ein paar fortgeschrittenere Themen heran. Wenn Sie gehofft haben, diese Sprache zu lernen, sollten Sie unbedingt einen Besuch abstatten und den RSS-Feed abonnieren, der aktualisiert wird, wenn neue Videos veröffentlicht werden.
Artikel besuchen
