Kategorie 'jQuery'
Kürzlich Cristiano Up hat sich als nützliches Plugin für veröffentlichte WordPress , die zwei Links zu jedem Kommentar zu einem Post (vielleicht haben Sie ein ähnliches installiert, da in dem Verzeichnis WordPress.org ich strahlte ein paar scheitern, ist ein italienischer Software würde können aggiugere das Ereignis, um die hervorragende Arbeit von Christen gemacht zu ehren). Diese Verknüpfungen (& Antwort zitieren), zu erfüllen und / oder Auflistung der Verfasser eines Kommentars, indem Sie die lästige Aufgabe, das Einfügen das At-Zeichen (@), an wen sie gerichtet ist, anzugeben. In diesem Tutorial werde ich erklären - bis mittel-erfahrene Benutzer - wie man hinzufügen, so ist mit zwei "Hand", ohne Rückgriff auf die Installation von Plugins. Außerdem wissentlich nutzen die Möglichkeiten von jQuery für JavaScript-Partei. Die Technik präsentiert wird, ist das gleiche, dass ich diese Funktion in diesem Blog vorstellen verwendet.
Hinweis: Die Verwendung eines Plugins ist die beste Lösung für diejenigen, die sich häufig ändern Sie Ihre WordPress Template neigen, oder zumindest, hat Pläne, dies umzusetzen. Dieses Tutorial ist nur zu zeigen, wie gezielte Interventionen innerhalb des Codes durchführen WordPress und ist mit dem merkwürdigsten gewidmet.
Bearbeiten Sie Ihre comments.php
Die erste Veränderung, die wir machen, ist es, den Link "Antworten" und "Aktien" in jeder Kommentar einfügen. Dazu bearbeiten Sie die Datei comments.php in dem Ordner von unserem Thema entfernt. Diese Datei enthält alle Anweisungen, die die Kommentare am Ende eines Beitrags angezeigt werden. Der Abschnitt werden wir besorgt (kann leicht variieren von Thema zu Thema) werden die Schleife für die Erstellung von verschiedenen Kommentaren, identifiziert durch:
Mehr ...
Wie alle Bibliotheken dieser Art auch jQuery ermöglicht Ihnen, dessen grundlegende Funktionalität mit Echtzeit-Plugin erweitern. Beachtung der Regeln für ihren Betrieb, dh restituiendo immer ein Zeiger auf das ausgewählte Objekt oder die gleiche jQuery, können Sie ein Plugin, mit ein paar Zeilen Code zu schreiben. Nehmen Sie zum Beispiel die vorgeschlagene Code in jQuery gegen alle: ein Benchmark mit 5 Browser , die (nach der Korrektur durch die berichtet wurde, war Luca ):
1 2 3 4 5
| ) . css ( 'cursor' , 'pointer' ) . click ( $ ('H2.dropdown'). Css ('Cursor', 'Zeiger'). Klicken Sie ( function () { $ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if (.. $ (this) next () ist (': hidden')) $ (this) next () slideDown (); else $ (this) next () slideup ();.... } ); |
Mehr ...
Ein guter Entwickler hat kein Problem damit, von einer Programmiersprache zur anderen wechseln. Die Entscheidung, auf eine bestimmte Sprache, Rahmen-oder Entwicklungsumgebung, konzentrieren sich mehr von der Verfügbarkeit von Zeit und der Art der Arbeit, die auf geht diktiert. Aber ein wichtiger Faktor, der die Wahl des "Rahmens" beeinflussen können, so ist die Sympathie und Zuneigung, die im Laufe der Zeit reifen können.
Genauer gesagt, wollte ich einige analysieren - nicht alle - Javascript-Frameworks heute verfügbar ist, weil auch "beraten", einen Blick vor allem auf zu nehmen jQuery .
Die Macher von mootools (einer der bekanntesten JavaScript-Frameworks) zur Verfügung gestellt haben, ein Werkzeug, um einen Geschwindigkeitstest und Gültigkeitsdauer von fünf bekannten JavaScript-Frameworks laufen: Slickspeed . Dieser Test ist das Ergebnis gar nicht klar, wie wichtig die Arbeit an den Client-Seite JavaScript-Frameworks, die von unserem Browser ausgeführt werden. Es ist genau aus diesem Grund, dass einige finden, Safari schneller als Internet Explorer oder Google Chrome schneller als Firefox . Doch dies hängt oft von der Art der angezeigten Seite. Tatsächlich kann es gut passieren, dass ein bestimmter Ort ist wirklich "schneller" als in Safari angezeigt, aber das bedeutet nicht, dass "alle Seiten" wird schneller mit Safari! Natürlich ist dies auch für alle anderen Browser.
Der Benchmark
In Tests habe ich mit gemacht Slickspeed Ich verglich die verfügbaren Browser auf meinem Rechner (Windows Vista 64bit Utilmate - Intel Core 2 Quad 2,4 GHz mit 8 GB RAM).
Leider sind die Tests nicht in der Lage, mit Internet Explorer 7 ausgeführt wird, als das Auto stürzte, ging sogar außerhalb der Skala mit den Ergebnissen! Noch einmal herzlichen Glückwunsch Microsoft.
Ich crercato zu den gleichen Status des PCs während des Testlaufs zu halten, Öffnen des Browsers und nicht individuell, indem er keine anderen Prozesse laufen.
Hinweis: Wenn Sie, wie Sie auch eine oder mehrere dieser Tests fühlen, können Sie sich auf dieses Thema liegt im Falle der "odd" und andere Ergebnisse zu kommentieren.

Google Chrome war wirklich schnell, mit einem Wert von 68 (Durchschnitt) im Test mit jQuery . Je langsamer war jedoch Flock , obwohl sie dem gleichen "Mutter" Mozilla. Das schlechte Abschneiden von Flock ist wirklich neugierig, wie sein zukunftsweisendes Social Networks, weil es gerade die Social Network Web 2.0, um die Vorteile der vielen JavaScript-Frameworks zur Verfügung zu nehmen, um so eine Erfahrung von wirklich innovativen Navigation und Interaktion bieten.
Überraschenderweise schlägt FireFox und Opera hat auch eine nette kleine ", auch immer eine 74 in der Leistung der Dojo ! Firefox und Safari, schließlich sind ähnlich, mit Safari schneller in Tests mit Mootools und jQuery.
Welche Rahmenbedingungen zu wählen?
Wenn wir uns nicht kümmern, um die Geschwindigkeit der Ausführung zu testen und wir kümmern uns nicht Dimesion in Kbytes des gleichen Rahmens können die Antwort sein "Whatever You Like" oder, wenn Sie so wollen, "was Sie wissen es besser ist oder mehr harmonisch mit Ihrem Art der Programmierung. "
Letzten Endes werden diese Rahmenbedingungen sehen ein bisschen 'all (siehe zum Beispiel die Verwendung von $), obwohl einige wichtige und wesentliche Unterschiede, die in den Augen eines Experten springen kann oder wirklich schob die Verwendung einer bestimmten Bibliothek. Im Prinzip in der Tat alles, was mit jQuery getan werden kann, zum Beispiel, können Sie mit mootools oder Prototyp in Ordnung! Wenn jQuery hat eine sehr kompakte Syntax, da alle Methoden immer wieder die jQuery-Objekt-Basis, wodurch endlose Reihen von oggetto.metodo().metodo().metodo()... sagte, dass dies nicht bei allen kostet Kraft, vor allem für diejenigen, die haben zu debuggen wird!
Bibliotheken wie prototype.js Sünde, vielleicht in der Abwesenheit von Effekten, auch einfach, die Entwickler zu zwingen als Spin-off zu implementieren scriptaculous.js , schwer und weit von der Bibliothek die erste Wahl.
Ein Beispiel
Genau dies ist, warum zum Beispiel brachte mich dazu, die gekoppelt Prototype / Scriptaculous mit jQuery zu ersetzen, um interaktive Tafeln / Animierte undolog.com hier erstellen in der Seitenleiste. In der Tat, auch die Verwendung von Google-API-Bibliotheken zu importieren, ist eine Verschwendung Last all die Bibliothek und für eine scriptaculous slideDown slideup. Für Informationen und ein Beispiel, hier ist die Javascript-Code, wie es mit der Prototype / Scriptaculous gekoppelt wurde:
1 2 3 4 5 6 7 8 9 10 11 12 13
| / / Prototype / Scriptaculous ) . each ( $ $ ('H2.dropdown'). Stück ( element ) { function (element) { = "pointer" ; .. Element style cursor = "Zeiger"; 'click' , Element. beobachten ("Klick", event ) { function (event) { this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration : .5 } ) ; if (.. This. next () Stil Anzeige == "") neue Effect BlindUp (This. next (), {duration: 0,5});. Effect. BlindDown ( this . next ( ) , { duration : .3 } ) ; Effect sonst neue BlindDown (This. next (), {duration: 0,3}).; event ) ; . Event-Stop (event); } ) } ); |
und es ist jetzt mit jQuery:
1 2 3 4 5 6 7 8 9 10
| / / JQuery ) . each ( $ ('H2.dropdown'). Stück ( i ) { Funktion (en) { ) . css ( 'cursor' , 'pointer' ) . click ( $ (This). Css ('Cursor', 'Zeiger'). Klicken Sie ( function () { $ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if (.. $ (this) next () ist (': hidden')) $ (this) next () slideDown (); else $ (this) next () slideup ();.... } ); } ); |
Alles in allem ein genauerer Blick, glaube ich nicht, gibt es einen großen Unterschied! Aber wie ich schon sagte ... die Frage ist "gut" des persönlichen Geschmacks.
Mehr ...
Just in dieser Woche (unter der Leitung ...) Ich wurde am Surfen jQuery , eine große Bibliothek im Stil der prototype.js , scriptaculous.js , MooTools , so zu sagen ... und das ist, dass heute die gesamte Website wurde komplett neu gestaltet:
Toller Start, meinen Horizont zu dieser Art von Bibliotheken zu erweitern! Kurz werden einige Artikel veröffentlichen interessant, vor allem über die Unterschiede zwischen jQuery und andere Bibliotheken "ähnlich".
Mehr ...
Sie wurde mit dem Release Candidate 1 (RC1) für die Version 2.0 der Javascript-Bibliothek veröffentlicht Shadowbox , von Michael Jackson JI , nützlich, Fenster die sich mit den Ansichten der verschiedenen Arten von Medien, von Flash, um Quicktime zu HTML-Seiten zu öffnen. In dieser neuen Version gehören:
- Die Seite ist voll von Informationen und enthält nun einen Assistenten (im Stil von mootools), um "on the fly" eine Bibliothek Paket an unsere Bedürfnisse angepasst
- Die Möglichkeit, eine Verwendung Standalone-Modul Basis, ohne notwendigerweise - Adapter - externe Bibliotheken wie prototype.js, jQuery, etc ...
- Verbesserungen bei der Verwaltung und Durchführung von Skins
- Lage
Die Bibliothek ist auch auf SVN unter:
http://michaeljackson.googlecode.com/svn/trunk/shadowbox
Mehr ...
Google , in der letzten Periode hat eine Vielzahl an Werkzeugen für Entwickler veröffentlicht, aktualisieren ständig ihre Releases. Jetzt hält eine Vereinbarung mit beliebten AJAX-Framework, und nicht nur um die Verteilung der Bibliothek zentralisieren jQuery , Prototype , script.aculo.us , MooTools und Dojo !
In der Praxis ist es möglich, diese Bibliotheken nutzt die Infrastruktur und das Google-Netzwerk, mit deutlichen Vorteilen in Bezug auf Geschwindigkeit und Sicherheit zugreifen.
Die Geschwindigkeit, in der Last, wird von dem gleichen Netzwerk wie Google, die, neben der Bereitstellung einer Struktur per se von verteilten Server ermöglicht (standardmäßig) Belastung komprimiert (gzip / minify) der Bibliotheken garantiert. Das Hosting Google am nächsten an der Anfrage wird verwendet, um den Code zu senden, und wenn nicht oder vorübergehend nach unten traf, Google wird in das Netz stellen, aber das Senden der Javascript-Code!
Mehr ...
Man könnte sagen - zu Recht - genug! Javascript-Bibliotheken (unauffällig - nicht aufdringlich, oder teilweise) auf Bilder und Galerien verwalten gibt es so viele. Auf jeden Fall hier ist die Liste mit Vor-und Nachteile, die beste die ich bisher ausprobiert habe.
Slimbox 1.41
Extrem minimal, 7K (Version 1.41), benötigt mootools zu arbeiten. Wie auf der Homepage angegeben ist ein echter Klon Graph Lightbox , werden wir weiter unten. Ehrlich gesagt, abgesehen von der extremen Kompaktheit der Bibliothek nicht besitzt besondere Eigenschaften. Am selben Ort, jedoch können Sie auch ein Skript run-time Reflexionen erzeugen ... möchten Sie vielleicht zu dieser Grenze 
Bewertung: -6 - Slimbox Home Page, Home Page Reflection.js für MooTools
Lightbox2
Einer der bekanntesten und einfach. Verwaltet Bilder in dieser Pressemitteilung sind (so dass es nicht mit QuickTime, Flash, etc. zu arbeiten). Für seinen Betrieb benötigt Prototype und Scriptaculous . Verwenden Sie das Attribut rel auf die Links, um Ihre Bilder zu identifizieren verarbeitet werden:
1
| "images/image-1.jpg" rel = "lightbox" title = "my caption" > image #1 < / a > < ein href = "images/image-1.jpg" rel = "lightbox" title = "Mein Titel"> Bild # 1 </ eins > |
Wie die anderen Bibliotheken, dass wir sehen werden, unterstützt sie die Diashow-Modus, indem Sie Klammern keine Kennung in einer Reihe von Link / Bild:
1 2 3
| "images/image-1.jpg" rel = "lightbox[roadtrip]" > image #1 < / a > < ein href = "images/image-1.jpg" rel = "lightbox [Roadtrip]"> Bild # 1 </ eins > "images/image-2.jpg" rel = "lightbox[roadtrip]" > image #2 < / a > < ein href = "images/image-2.jpg" rel = "lightbox [Roadtrip]"> Bild # 2 </ eins > "images/image-3.jpg" rel = "lightbox[roadtrip]" > image #3 < / a > < ein href = "images/image-3.jpg" rel = "lightbox [Roadtrip]"> Bild # 3 </ eins > |
Bewertung: 6 - Home Page Lightbox2
LightWindow 2,0
Auch dies ist durchaus üblich! Nach allem, wie zu verstehen, was ist das meistgenutzte?
. Allerdings ist es äußerst umfassende und vielseitige. Auf der Website steht die Bitte um Spenden für den Kauf eines Mac ... ein wenig invasive und dringende ... Wie auch immer, wie die vorhergehende, für dessen Betrieb, erfordert die Anwesenheit von Prototype und Scriptaculous . Anders als sein Vorgänger, aber damit können Sie moltisiimi Arten von Dateien zu betrachten: von den Bildern, QuickTime-Filme, Flash-Filme, externe HTML-Seiten und PDF. ) altri obbligatori ( class e params - per impostare il comportamento della libreria). Im Gegensatz dazu verwendet verschiedene Attribute, einige optionale ( author, caption und title ) anderer zwingender ( class und params - , um das Verhalten der Bibliothek eingestellt). Zum Beispiel, damit Sie eine Galerie oder Diashow mit dem Attribut rel :
1 2 3
| "gallery/0-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Left Behind" caption = "Look's super tasty!" author = "Unknown" > image #1 < / a > < ein href = "gallery/0-sushi.jpg" class = "LightWindow" rel = "[Sushi]" title = Titel "Left Behind" = "Looks super lecker!" title = "Unbekannt"> Bild # 1 </ um > "gallery/1-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Beware of warewolves..." caption = "I shouldn't be doing this when I am hungry" author = "Unknown" > image #2 < / a > < ein href = "gallery/1-sushi.jpg" class = "LightWindow" rel = "[Sushi]" title = "Hüten Sie sich vor warewolves ..." caption = "I Should nicht tun, wenn ich hungrig bin" author = "Unbekannt"> Bild # 2 </ eins > "gallery/2-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "That was good!" caption = "Take that sushi!" author = "Unknown" > image #3 < / a > < ein href = "gallery/2-sushi.jpg" class = "LightWindow" rel = "[Sushi]" title = "Das war gut!" caption = "Nehmen Sie das Sushi!" title = "Unbekannt"> Bild # 3 </ eins > |
Ergebnis: 8 - Home Page LightWindow 2,0
Shadowbox 1.0B
Obwohl die Beta-Version 1.0, ist dies vielleicht die komplette Bibliothek, die beide von der funktionalen Sicht für beide Bibliotheken unterstützt. Für den Betrieb in der Tat, können Sie aus einer Vielzahl von Rahmenbedingungen zu wählen, mit der Datei "Adapter", besonders hergestellt, vom Autor selbst geliefert:
Der visuelle Effekt (konfigurierbar über Haut / css), dann, im Gegensatz zu den anderen, ist auf jeden Fall attraktiver. Die Attribute werden nur verwendet, rel wo, bei seinem Inneren Platz finden alle anderen Konfigurationsparameter. Zum Beispiel, um eine Galerie zu realisieren, nutzen Sie einfach:
1 2
| "beach.jpg" rel = "shadowbox[Vacation]" > The Beach < / a > < ein href = "beach.jpg" rel = "shadowbox [Vacation]"> The Beach </ eins > "pier.jpg" rel = "shadowbox[Vacation]" > The Pier < / a > < ein href = "pier.jpg" rel = "shadowbox [Vacation]"> The Pier </ eins > |
Wenn Sie einige Optionen einstellen (wollen siehe Website für vollständige Liste ) verwenden Sie einfach die folgende Syntax:
1
| "myimage.jpg" rel = "shadowbox;options={overlayOpacity: 0.5, resize: false}" > My Image < / a > < ein href = "myImage.jpg" rel = "shadowbox; options = {overlayOpacity: 0,5, Größe ändern: false}"> Mein Bild </ eins > |
Im Internet finden sie andere, wie Highslide JS . In der Tat, wenn eine andere Bibliothek, die Sie mir berichten wollen ... Wie auch immer, persönlich bevorzuge ich Shadowbox für Einfachheit, Skalierbarkeit und Cross-Rahmen.
Bewertung: 9 - Top Shadowbox 1.0B
Mehr ...
Neueste Kommentare
Giovambattista Fazioli : @ Fabio: ein Beitrag aus der Vergangenheit! Ich würde empfehlen, mit den nützlichsten Funktionen von Tabs nun ...
Fabio : Hallo, das Suchen im Internet fand ich diesen Artikel in Ihrem Browser Tableiste mit PHP und CSS zu erstellen, aber ...
Miriam : Was halten Sie von Disqus denken? Ich benutze es und ich liebe es.
Giovambattista Fazioli : @ Nik: Ich bin glücklich! Viel Glück dann!
Nik : Ich habe Montag Informationen über Java-Prüfung, dank mir, Sie hat uns sehr geholfen, das Buch, das ich war unklar ...