jQuery: abgerundete Kanten auf die Bilder, um Überschneidungen

Donnerstag, 30. Oktober 2008

Aufgrund der unterschiedlichen Darstellung von den verschiedenen Browsern, die sich Microsoft Internet Explorer zu berücksichtigen, müssen wir immer auf Kunststücken für die Auswirkungen, die jetzt zu einem Standard. Die Multi-diskutiert abgerundeten Kanten sind ein klassisches Beispiel für die "Katastrophe" durch die vollständige Unfähigkeit, eine Norm für schwere Rendering von HTML / CSS. Es gibt viele Online-Lösungen, die es Ihnen ermöglichen, um die "Auswirkungen" (Auswirkungen dall'HTML Freistellung als abgerundeten Ecken, Schatteneffekte, Spiegelungen, etc. ...) mit Patches auf die Blätter von Stilen, spezielle Tricks mit dem Einsatz von div veredelt, Bibliotheken Javascript, die Verwendung von canvas etc. ...
Für rein Bildungseinrichtungen möchte ich erklären, weitere Technik (Cross-Browser), um die Kanten gerundet, um die Bilder:

Demo-und Source -

Lesen Sie weiter ... "

Verwandte Post

Wordpress: Schritt für Schritt, wie Sie ihre eigenen Login

Freitag, 24. Oktober, 2008

In diesem Tutorial werden wir sehen, wie man ein persönliches Login-Verfahren, mit Ajax Funktionalität mit jQuery. Es gibt mehrere Möglichkeiten, um Ihre Anmeldung bei Wordpress, zum Beispiel durch den Einsatz von Haken und Filter add_action() add_filter() Wir fahren zu einem Low-Level, auch wenn es Schnittstellen zu den Kernel, aber Wordpress. Auch stellen Sie sicher, dass die Validierung eines Benutzers Dupla per E-Mail / Passwort ein.

Warum ein Login?

  • In einigen Fällen lässt sich die Rückkehr uitle haben maximale Kontrolle über die Login-Seite, um ein benutzerdefiniertes Layout für unsere registrierten Benutzer. Sie können auch bereichern die Seite mit nützlichen Informationen, ein Logo von der klassischen "Haben Sie Ihr Passwort vergessen?"
  • Um den Zugang per E-Mail (wie oben gezeigt,) statt user_login Standard Wordpress
  • Zu können, geben Sie einen Login-Panel in der Seitenleiste des Blogs
  • Und schließlich, um ein Skelett - und eine Idee - für eine gute Plugin : D

Umgebung

In unserem Beispiel / Tutorial wird auf die Wurzel des Wordpress in einem Ordner mylogin Ich habe zwei PHP-Datei in diesen Ordner: index.php und logon.php Die erste enthält die Schnittstelle unserer Protokoll mit allen Features Javascript / jQuery wir dienen. Die zweite Datei logon.php wird der Code, um die Nutzer. Dann erstellen Sie einen Ordner css und innerhalb dieser Datei layout.css und einen Ordner images Innerhalb der Ordner Bilder wird eine klassische Ajax loader: createlo online AjaxLoad.info. Am Ende sollten Sie:

  • mylogin
    • index.php
    • logon.php
    • css
      • layout.css
      • Bilder
        • ajax-loader.gif

Lesen Sie weiter ... "

Verwandte Post

Camelize, CamelCase

Montag, 20. Oktober 2008

Wie in der Post Vielzahl von Kodierung und Codierung der Ansätze, die ein Entwickler haben ein Problem zu lösen, sind unterschiedlich, und viele der verwendeten Programmiersprache. Hier ist, wie einige der beliebtesten Javascript Rahmen gelöst haben eine einfache Funktion der CamelCase:

Prototype.js

Prototype.js, Version 1.6.0.3, ausdrücklich vor, eine Methode camelize() um die CamelCase an einer Schnur. Der Ansatz des Autors ist sehr einfach und wird der Code erscheint selbsterklärend. In diesem Fall gab es keine Verwendung von Regular Expression!

JavaScript:
  1. camelize: function () (
  2. . split ( '-' ) , len = parts. length ; var = dieser Teile. Split ('-'), len = Teile. Länge;
  3. len == 1 ) return parts [ 0 ] ; if (len == 1) return Teile [0];
  4. . charAt ( 0 ) == '-' var = camelized diese. Charat (0) == '-'
  5. ? ] . charAt ( 0 ) . toUpperCase ( ) + parts [ 0 ] . substring ( 1 ) Teile [0]. Charat (0). toUpperCase () + Teile [0]. substring (1)
  6. ] ; : Teile [0];
  7. var i = 1 ; i <len; i++ ) for (var i = 1; i <len; i + +)
  8. . charAt ( 0 ) . toUpperCase ( ) + parts [ i ] . substring ( 1 ) ; camelized + = parts [i]. Charat (0). toUpperCase () + Teile [i]. substring (1);
  9. camelized return;
  10. )

Lesen Sie weiter ... "

Verwandte Post

jQuery: Animierte backgroundColor

Mittwoch, 15. Oktober 2008

Ich verstand nicht, ob es sich um einen Fehler oder etwas wollen, aber es bleibt die Tatsache, dass die Methode animate() von jQuery funktioniert nicht mit CSS-Eigenschaften, einschließlich der background-color (die, wie camelize ist backgroundColor Zum Beispiel mit dem folgenden keine Wirkung:

HTML:
  1. > <style "text/css" Art =>
  2. div # box (background-color: # EEE; width: 100px; height: 100px)
  3. </ Style>
  4. <! - .... ->
  5. > </div> <div id = "box"> </ div>

JavaScript:
  1. ) . animate ( { backgroundColor: "#f90" } ) ; $ ( '# Div box "). Lebendig ((backgroundColor:" # F90 "));

Um dieses Problem zu beheben, müssen Sie eine Erweiterung installieren: jQuery Color Animationen. Dies ermöglicht es Ihnen, "Animation" sull'attributo backgroundColor und darüber hinaus:

  • backgroundColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • color
  • outlineColor

Verwandte Post

Wordpress: wie man eine Antwort auf Kommentar mit jQuery

Freitag, 3. Oktober 2008

Kürzlich Cristiano Bis eine Gewinn-Plugin für Wordpress können zwei Links zu jedem Kommentar von einer Stelle (vielleicht haben Sie eine ähnliche, angesichts der Tatsache, dass das Verzeichnis WordPress.org Ich habe ein paar Irre, aber es wäre ein Software-Italienisch die Veranstaltung zu Ehren der hervorragenden Arbeit von Cristiano). Diese Links (Antwort-Quote) in Reaktion und / oder eine Liste der Autor eines Kommentars, indem Sie die langweilige Betrieb, um die At-Zeichen (@), um anzuzeigen, an wen sie gerichtet ist. In diesem Tutorial werde ich erklären, - in den mittel-Experten - wie Sie sich diese beiden Merkmale dieser selbst, ohne die Installation von Plug-Ins. Außerdem, mit den Fähigkeiten von jQuery, um die Partei in Javascript. Die Technik, das ist es, die gleiche habe ich die Einführung dieser Funktion in diesem Blog.

Hinweis: Die Verwendung eines Plugins ist die beste Lösung für diejenigen, die eher zu häufig ändern Sie Ihre WordPress-Template, zu beschränken oder es in der Erwartung zu tun. Dieses Tutorial will nur, um zu zeigen, wie man gezielte Eingriffe in den Code Wordpress und ist für die meisten neugierig.

Ändern Sie die Datei comments.php

Die erste Änderung ist, dass, um den Link zu "antworten" und "Quoten" in jeder Kommentar. Um dies zu tun, editieren Sie die Datei comments.php befindet sich in dem Ordner, der unser Thema. Diese Datei enthält alle Anweisungen, die es Ihnen ermöglichen, um die Kommentare am Ende der Nachricht. Der Abschnitt, die uns (die können sich leicht von Ausgabe zu Ausgabe) ist die Schleife, um die verschiedenen Stellungnahmen, erkennbar durch:

Lesen Sie weiter ... "

Verwandte Post

jQuery: wie man ein Plugin Verlängerung

Dienstag, 23. September 2008

Wie alle Buchhandlungen dieser Art auch jQuery ermöglicht es Ihnen, ihre grundlegenden Funktionen mit echten Plugin. Die Einhaltung der Regeln seiner Tätigkeit, nämlich restituiendo immer einen Zeiger auf das ausgewählte oder jQuery selbst, können Sie ein Plugin mit ein paar Zeilen Code. Nehmen Sie als Beispiel den Code im jQuery gegen alle: ein Benchmark mit 5 Browser, die (nach der Korrektur von Lukas):

JavaScript:
  1. ) . css ( 'cursor' , 'pointer' ) . click ( $ ( 'H2.dropdown "). CSS (" Cursor "," Zeiger "). Klicken Sie auf (
  2. Funktion () (
  3. $ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if ($ (this). next (). ist ( ': versteckt')) $ (this). next (). slideDown (); else $ (this). next (). slideUp ();
  4. )
  5. );

Lesen Sie weiter ... "

Verwandte Post

jQuery gegen alle: ein Benchmark mit 5 Browser

Mittwoch, 17. September 2008

Bild Ein guter Entwickler ist kein Problem, von einer Programmiersprache zur anderen. Die Wahl auf eine bestimmte Sprache, Rahmen-und Entwicklungsumgebung, ist mehr diktiert durch die Verfügbarkeit von Zeit und der Art der Arbeit, die stattfinden. Jedoch ein wichtiger Faktor, die möglicherweise Einfluss auf die Wahl der "Rahmen", wie ist die Sympathie oder die Krankheit, die im Laufe der Zeit reifen.
Genauer gesagt, ich wollte zu analysieren einige - nicht alle - Javascript Rahmen heute, denn "empfohlen", um einen Blick vor allem jQuery.
Die Entwickler von Mootools (einer der beliebtesten Javascript Rahmen) zur Verfügung gestellt haben ein Werkzeug, um einen Test der Geschwindigkeit und der Gültigkeit von fünf bekannten Javascript Rahmen: Slickspeed. Diese Prüfung, die Ergebnisse nicht Rabatt auf alle, es ist wichtig, da die Rahmenbedingungen clientseitigen Javascript, die von unseren Browser. Es ist genau aus diesem Grund, dass einige finden Safari schneller als Internet Explorer oder Google Chrome schneller als Firefox. Allerdings, dieser hängt oft von der Seite, die Sie sich ansehen. In der Tat ist, kann sehr gut passieren, dass einer bestimmten Website ist wirklich mehr "schnell", wenn sie in Safari, das heißt aber nicht, dass alle Seiten werden schneller mit Safari! Natürlich, dieser Diskurs ist gültig für alle anderen Browser.

Die Benchmark

In Tests habe ich mit Slickspeed Vergleich habe ich den Browser auf meinem Rechner (Windows Vista Utilmate 64bit - Intel Core 2 Quad zu 2,4 GHz mit 8Gb RAM).
Leider, ist der Test nicht in der Lage war, um mit Internet Explorer 7, da es blockiert das Auto, sogar noch aus der Skala mit den Ergebnissen! Noch einmal, herzlichen Glückwunsch Microsoft.
Ich crercato, um den gleichen Status der PC während der Ausführung der Tests, die Öffnung der Browser individuell und nicht irgendeine andere Prozess läuft.

Hinweis: Wenn Sie der Meinung sind wie Sie eines oder mehrere dieser Prüfungen, können Sie Kommentare zu diesem Beitrag im Falle von "neugierig" und unterschiedlichen Ergebnissen.

Bild

Google Chrome war wirklich schnell, mit einem Wert von 68 (Durchschnitt) in die Prüfung mit jQuery. Je langsamer, jedoch wurde Flock, trotz der aus dem gleichen "Mutter" Mozilla. Das schlechte Ergebnis für Flock ist wirklich merkwürdig angesichts ihrer Schneiden Social Network, denn es ist die Social Network Web 2.0 zu nutzen viele Javascript Rahmen zur Verfügung, so dass eine Erfahrung im Bereich der Navigation und Interaktion wirklich innovativ.
Eine Überraschung Beat FireFox und Opera hat auch eine Menge ", sogar noch eine 74 im Dojo! Firefox und Safari, alle Dinge berücksichtigt, sind ähnlich, mit Safari schneller in Tests mit Mootools und jQuery.

Was Rahmen zu wählen?

Sie können badiamo, um die Schnelligkeit bei der Ausführung und wir kümmern uns nicht um die Größe in KB des gleichen Rahmen, die Antwort könnte "Was ist für Sie", oder, wenn Sie es vorziehen, "was Sie wissen am besten, oder mehr mit dem harmonischen Stil der Programmierung. "
Letztlich sind diese Rahmenbedingungen wird sich ein wenig "(siehe die Verwendung von $ zum Beispiel), obwohl einige wichtige Unterschiede, die sich direkt in die Augen eines Sachverständigen oder wirklich forciert den Einsatz einer bestimmten Bibliothek. Im Prinzip ist in der Tat alles, was getan werden kann, mit jQuery, zum Beispiel, können Sie auch mit Mootools oder Prototyp! Wenn jQuery hat eine sehr kompakte Syntax, da alle Methoden immer wieder die Grundlage jQuery-Objekt, wodurch endlose Dateien oggetto.metodo().metodo().metodo()... ist nicht gesagt, dass dies auf allen Kosten einer Stärke, vor allem für diejenigen, die haben zu debuggen!
Bibliotheken wie prototype.js vielleicht schuldig in Ermangelung grafische Effekte, selbst einfache, zwingt die Entwickler zur Umsetzung als Spin-off scriptaculous.js, schwerer und weit von der Bibliothek die erste Wahl.

Ein Beispiel

Genau diesem Grund, zum Beispiel, hat mich zu ersetzen, gekoppelt Prototyp / scriptaculous mit jQuery um interaktive Tafeln / animierte hier in der Seitenleiste undolog.com. Ja, mit Google-API-Bibliothek zu importieren, ist ein Abfall laden die gesamte Bibliothek für eine scriptaculous slideDown und slideUp. Für weitere Informationen und ein Beispiel, hier ist, wie die Javascript-Code in Verbindung mit dem Prototyp / scriptaculous:

JavaScript:
  1. / / Prototype / scriptaculous
  2. ) . each ( $ $ ( 'H2.dropdown "). Jede (
  3. element ) { Funktion (Element) (
  4. = "pointer" ; Element. Stil. cursor = "pointer";
  5. 'click' , Element. beobachten ( "klicken Sie auf",
  6. event ) { Funktion (event) (
  7. this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration:. 5 } ) ; if (this. next (). Stil. Display == "") neuen Effekt. BlindUp (this. next (), (Dauer:. 5));
  8. Effect. BlindDown ( this . next ( ) , { duration:. 3 } ) ; Wirkung sonst neu. BlindDown (this. next (), (Dauer:.) 3);
  9. event ) ; Event. Stop (event);
  10. )
  11. )
  12. )
  13. );

und es ist jetzt mit jQuery:

JavaScript:
  1. / / JQuery
  2. ) . each ( $ ( 'H2.dropdown "). Jede (
  3. i ) { Funktion (i) (
  4. ) . css ( 'cursor' , 'pointer' ) . click ( $ (This). CSS ( "Cursor", "Zeiger"). Klicken Sie auf (
  5. Funktion () (
  6. $ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if ($ (this). next (). ist ( ': versteckt')) $ (this). next (). slideDown (); else $ (this). next (). slideUp ();
  7. )
  8. );
  9. )
  10. );

Alles in allem ein genauerer Blick, ich glaube nicht, dass es einen großen Unterschied! Aber wie ich schon sagte ... Frage ist, "auch" persönlichen Geschmack.

Verwandte Post

jQuery Restyling

Sonntag, 31. August, 2008

In diesen Tagen (im Rat ...) Ich war auf der Suche auf jQuery, eine ausgezeichnete Bibliothek im Stil der prototype.js, scriptaculous.js, Mootools, zum Beispiel ... und hier, dass heute die gesamte Site wurde komplett überarbeitet:

Bild

Guten Start zu erweitern meinen Horizont auf diese Art von Buch! Demnächst veröffentlichen einige interessante Artikel, insbesondere über die Unterschiede zwischen jQuery Bibliotheken und anderen "ähnlich".

Verwandte Post

Google AJAX-API-Bibliothek: ein Wendepunkt für Entwickler

Donnerstag, 29. Mai 2008

AJAX-API-Bibliotheken Google, in der zweiten perdiodo, hat eine Vielzahl von Werkzeugen für Entwickler, die kontinuierliche Aktualisierung ihrer Releases. Jetzt läuft eine Vereinbarung mit den beliebtesten AJAX Framework, und nicht nur zu zentralisieren die Verteilung der Bibliotheken jQuery, Prototyp, script.aculo.us, MooTools und dojo!

In der Praxis, können Sie diese Bibliotheken nutzen die Infrastruktur und das Google-Netzwerk, mit erheblichen Vorteilen in Bezug auf Geschwindigkeit und Sicherheit.

Die Geschwindigkeit, die Last wird durch die gleichen Netz, dass Google, zusätzlich zu der in sich eine Struktur von verteilten Servern, so dass (Standard), um komprimierte (gzip / minify) Bibliothek. Google-Hosting der Nähe zu der Anfrage wird verwendet, um den Code, und wenn nicht erreichen oder zeitlich begrenzt, die Google-Netz wird immer noch senden Sie die JavaScript-Code!

Lesen Sie weiter ... "

Verwandte Post

Alle Leuchtkasten Klone in einem dynamischen Matrix

Freitag 11. April 2008

Planetozh hat einen herrlichen dynamisches Instrument, das eine Liste von allen JavaScript-Bibliotheken wie Lightbox.

Bild

Bild Durch ein Panel (siehe Bild links) mit einer Reihe von "check" (Prüfung), in denen die verschiedenen Funktionen der Bibliotheken, können Sie einen Filter den Erhalt der Liste mit einem oder mehreren Bibliotheken, die wir können. Wir hoffen, dass der Autor behauptet, aktualisiert dieser fantastischen Seite, nützlich bei der Suche nach den zahlreichen und immer mächtiger Bibliotheken dieses Typs.

Verwandte Post