jQuery: runde kanter på bildene for å overlappe

Torsdag, 30. oktober 2008

På grunn av de ulike rendring mellom ulike nettleser, som absolutt se Microsoft Internet Explorer i tankene, må vi alltid ty til å søke om artifizi effekter som nå bør bli en standard. Multi-diskutert avrundede kanter, er et klassisk eksempel på "katastrofe" produsert av fullstendig manglende evne til å oppnå en standard alvorlig på side rendring HTML / CSS. Det er mange nettverksløsninger som tillater deg å ha "effekter" (effekter exempting dall'HTML tilstede som avrundede kanter, skygge-effekter, tanker, osv. ...) med patcher på ark av stilarter, spesielle triks du bruker div grafted, bibliotek Javascript, bruk av canvas
For rent pedagogisk Jeg vil forklare mer teknisk (kryss-nettleser) til å gjelde de avrundede kantene av bilder:

Demonstrasjoner og kilder

Fortsett å lese ... "

Related Post

Wordpress: trinn for trinn hvordan du kan lage en login

Fredag 24 oktober, 2008

I denne opplæringen vil vi se hvordan du oppretter en personlig pålogging prosedyre, ved hjelp av AJAX-funksjonalitet via jQuery. Det er flere måter å tilpasse pålogging Wordpress, for eksempel gjennom bruk av kroker og add_action() add_filter() Vi bruker mer på lavt nivå, selv om vi fortsatt grensesnitt til kjernen Wordpress. Også sørge for å validere brukeren gjennom den doble e / passord.

Hvorfor lage en pålogging?

  • I enkelte sammenhenger kan gå tilbake uitle har størst kontroll over påloggingssiden, å foreslå en tilpasset utforming til våre registrerte brukere. Du kan også berike siden med informasjon, en logo fra den klassiske "Glemt passord?"
  • Hvis du vil tillate tilgang via e-post (som vist her traktaten) i stedet for user_login standard Wordpress
  • For å kunne angi en login panel i sidepanelet i vår blogg
  • Og til slutt, for å ha et skjelett - og en idé - for en god Plugin : D

Miljø

I vårt eksempel / opplæringen arbeid på roten av Wordpress i en mappe mylogin Jeg opprettet to php-filer i denne mappen: index.php og logon.php Den første inneholder grensesnittet til vårt pålogging, med alle funksjoner Javascript / jQuery som vi betjener. Den andre filen, logon.php vil inneholde kode for å validere brukeren. Deretter lager vi en mappe css og inne denne filen layout.css og en mappe for images Inne i mappen bilder inkludere en klassisk Ajax loader: opprette den på nettet på AjaxLoad.info. På slutten skal du ha:

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

Fortsett å lese ... "

Related Post

Svært kort triks: undefined verdier i Javascript

Onsdag, 22. oktober, 2008

Det er en forkortet form for tilordning "under flyturen" en verdi for en variabel hvis en annen er ikke definert (udefinert), ved hjelp av logisk ELLER operatør (| |) - Double-pipe:

JavaScript:
  1. / / Pluto er udefinert
  2. var Pluto;
  3. ; var foo = Pluto | | "5. ';
  4. pippo ) ; alert (foo);
  5. / / Resultat: 5

Denne teknikken er nyttig for skriving av funksjoner med parametere:

JavaScript:
  1. param ) { miaFunc funksjon (param) (
  2. ; var p1 = param | | "benchmark";
  3. / / ...
  4. )

Men vi må være forsiktige med å bruke dette skjemaet som null-verdier som for eksempel 0 er feiltolkes, på grunn av "skylden" for eller Logic brukes:

JavaScript:
  1. ; Pluto var = 0;
  2. ; var foo = Pluto | | "5. ';
  3. pippo ) ; alert (foo);
  4. / / Resultat: 5
  5. ; Pluto var = false;
  6. ; var foo = Pluto | | "5. ';
  7. pippo ) ; alert (foo);
  8. / / Resultat: 5
  9. ; Pluto var = 1;
  10. ; var foo = Pluto | | "5. ';
  11. pippo ) ; alert (foo);
  12. / / Resultat: 1

Related Post

Camelize, CamelCase

Mandag, 20. oktober 2008

Som ble sett i etterkrigstiden rekke koding og koding tilnærminger som en utvikler kan ha for å løse problemene er forskjellige, og mange av de samme programmeringsspråket som brukes. Her ser du hvordan noen av de mest populære Javascript rammer har løst en enkel funksjon av CamelCase:

Prototype.js

Prototype.js, versjon 1.6.0.3, uttrykkelig foreslår en metode camelize() camelcase på en streng. Tilnærmingen er ganske enkelt for forfatteren og koden er selvinnlysende. I dette tilfellet var det ingen bruk av vanlige uttrykk!

JavaScript:
  1. camelize: function () (
  2. . split ( '-' ) , len = parts. length ; var deler = dette. Split ('-'), len = deler. lengde;
  3. len == 1 ) return parts [ 0 ] ; if (len == 1) tilbake deler [0];
  4. . charAt ( 0 ) == '-' Var = camelized dette. charat (0) == "-"
  5. ? ] . charAt ( 0 ) . toUpperCase ( ) + parts [ 0 ] . substring ( 1 ) deler [0]. charat (0). toUpperCase () + deler [0]. delstreng (1)
  6. ] ; Deler [0];
  7. var i = 1 ; i <len; i++ ) for (var i = 1; i <len; i + +)
  8. . charAt ( 0 ) . toUpperCase ( ) + parts [ i ] . substring ( 1 ) ; camelized = + deler [i]. charat (0). toUpperCase () + deler [i]. delstreng (1);
  9. camelized return;
  10. )

Fortsett lesing ... "

Related Post

Rekke koding og koding

Tirsdag, 14. oktober 2008

Noen hevder at programmering er en kunst, og i siste instans, kan jeg bare enig spesielt når løsninger er funnet svært forskjellig for samme problem. For å forstå hvordan sant dette er som en identisk trenger i medisimo språk (JavaScript) kan løses med tilnærminger ganske annerledes og originalt.

Venstre null tast

Et tall, men talen er også gyldig for alle strengen, 123 123 kan bli fylt til venstre - til å trekke - med et antall nuller, for eksempel: 00123 Dette behovet er presentert ved flere anledninger og er nyttig for innretta - eller vis - en ren, implisitt indikerer høyeste verdi. I videoen, for eksempel den klassiske poeng (poeng) er ofte indikert av 001234 ved de fleste det kommer til 999999 Her ser du hvordan problemet ble løst ved ulike utviklere:

JavaScript:
  1. / **
  2. * Venstre puten string
  3. *
  4. * @ Fra http://snipplr.com/view/8423/left-pad-string/
  5. * @ Forfatter web-http: / / www.mechanicmatt.com/
  6. *
  7. * @ Param num - for å fylle Striga
  8. * @ Param totalChars - Totalt antall tegn, inkludert "nuller"
  9. * @ Param padWidth - Karakterer brukes til å fylle, standard "0"
  10. * /
  11. num, totalChars, padWith ) { leadingZeros funksjon (num, totalChars, padWith) (
  12. num num + = "";
  13. ? padWith = (padWith)? padWith: "0";
  14. num. length <totalChars ) { if (lengde interne referansenummer <totalChars) (
  15. num. length <totalChars ) { while (lengde interne referansenummer <totalChars) (
  16. padWith + num = num;
  17. )
  18. { } Else ())
  19. num. length > totalChars ) { //if padWith was a multiple character string and num was overpadded if (lengde interne referansenummer> totalChars) (/ / hvis padWith var en av flere tegnstreng og num var overpadded
  20. num. length - totalChars ) , totalChars ) ; = Num num. Delstreng ((interne referansenummer lengde - totalChars), totalChars);
  21. { } Else ())
  22. return num;
  23. )
  24. leadingZeros ( "asdf" , 10 , "0" ) ) ; alert (leadingZeros ( "asdf", 10 "0"));

Denne løsningen er ekstremt velformulerte, men kan legge til et ubestemt antall 0 nummer num også velge font brukes av padWidth i stedet for standard 0
Definitivt originalen, men denne løsningen:

JavaScript:
  1. / **
  2. * String_pad
  3. *
  4. * @ Fra http://snipplr.com/view/700/stringpad/
  5. * @ Forfatter http://d.hatena.ne.jp/brazil/20060721/1153489937
  6. *
  7. * @ Param str - for å fylle Striga
  8. * @ Param len - Totalt antall tegn, inkludert "nuller"
  9. * @ Param ch - Karakterer brukes til å fylle
  10. * /
  11. str, len, ch ) { return new Array ( len- ( '' +str ) . length + 1 ) . join ( ch ) + str } fungere rondell (str, len, kap.) (return new Array (len-(''+ str). lengde + 1). delta (ka) + str)
  12. pad ( 56 , 4 , '0' ) ) ; // 0056 alert (rondell (56, 4,'0 ')); / / 0056

Samme resultat, med en helt annen tilnærming. Igjen har vi muligheten til å bestemme antallet tegn padding gjennom parameteren len og fonten som brukes av ch Ikke klarer å bruke standard leveres i forrige funksjon.
Hva jeg bruke i stedet ...:

JavaScript:
  1. / **
  2. * String_pad
  3. *
  4. * @ Forfatter Giovambattista Fazioli
  5. * @ Web http://www.undolog.com
  6. *
  7. * @ Param s - å fylle Striga
  8. * @ Param l - En streng som angir tegnet er at lengden
  9. * For eksempel "0000"-tegnet = "0" lengde 4
  10. * /
  11. s,l ) { return ( l. substr ( 0 , ( l. length -s. length ) ) +s ) ; } padding-funksjon (r, l) (Return (l. substr (0, (l-s lengde. lengde)) + r);)
  12. padding ( '123' , '0000' ) ) ; alert (padding ('123 ','0000'));

Hvis du har andre interessante løsninger kan du kommentar : D

Related Post

En klasse med nedtelling i Javascript

Mandag 13 oktober, 2008

I innlegget med 3D Countdown FIVe3D (se hvordan jeg gjorde det: skrive en nedtelling i Flash), var en klasse forslag om etablering av et objekt Countdown i Actionscript, her er en versjon som ligner på Javascript:

JavaScript:
  1. / **
  2. * Countdown Klassifikasjon
  3. *
  4. * @ Forfatter Giovambattista Fazioli
  5. * @ @ Epost g.fazioli undolog.com
  6. * @ Web http://www.undolog.com
  7. *
  8. * @ Param dd (string) "-dag, måned, år"
  9. *
  10. * /
  11. dd ) { funksjon nedtelling (DD) (
  12. / / Init målet tid
  13. Date ( dd ) ; var target = ny dato (dd);
  14. = target. getTime ( ) ; dette. targetTime = målet. getTime ();
  15. / **
  16. * Refresh nedtelling
  17. * /
  18. = function ( ) { dette. oppdatere = funksjon () (
  19. Date ( ) ; var i dag = new Date ();
  20. ( ) ; Var = currentTime i dag. getTime ();
  21. / / Tid igjen
  22. this . targetTime - currentTime ) ; det. _leftMilliseconds = (this. targetTime - currentTime);
  23. ( this ._leftMilliseconds / 1000 ) ; dette. _leftSeconds = Math. gulvet (this. _leftMilliseconds / 1000);
  24. ( this ._leftSeconds / 60 ) ; dette. _leftMinutes = Math. gulvet (this. _leftSeconds / 60);
  25. ( this ._leftMinutes / 60 ) ; dette. _leftHours = Math. gulvet (this. _leftMinutes / 60);
  26. / / No-modulen
  27. = Math. floor ( this ._leftHours / 24 ) ; dette. leftDays = Math. gulvet (this. _leftHours / 24);
  28. / / For Skriv ut
  29. = this ._leftMilliseconds % 1000 ; dette. leftMilliseconds = det. _leftMilliseconds% 1000;
  30. = this ._leftSeconds % 60 ; dette. leftSeconds = dette. _leftSeconds% 60;
  31. = this ._leftMinutes % 60 ; dette. leftMinutes = dette. _leftMinutes% 60;
  32. = this ._leftHours % 24 ; dette. leftHours = dette. _leftHours% 24;
  33. )
  34. ( ) ; dette. oppdater ();
  35. )

Eksempel

JavaScript:
  1. countDown ( '1 1, 2009' ) ; var so = ny nedtelling ('1 1, 2009 ');
  2. / / Viser hvor mange dager, timer, minutter, sekunder og millisekunder i den første januar 2009
  3. cd. leftDays + "," + cd. leftHours + "," + cd. leftMinutes + "," + cd. leftSeconds + "," + cd. leftMilliseconds ) ; dokument. skrive (dvs. leftDays + "," + cd. leftHours + "," + cd. leftMinutes + "," + cd. leftSeconds + "," + cd. leftMilliseconds);

Related Post

Wordpress: hvordan du skriver et svar til å kommentere ved hjelp jQuery

Fredag 3. oktober 2008

Nylig Cristiano Fino gitt en gevinst Plugin for Wordpress kan legge to linker til hver kommentar av et innlegg (kanskje du har installert en lignende, på grunn av at katalogen Wordpress.org Jeg har et par villspor, men som en italiensk programvare ville være arrangementet til ære for utmerket arbeid utført av Cristiano). Disse Link (Svar & aksjer), møte og / eller sitere forfatteren av en kommentar ved å kjøre kjedelig operasjon for å sette karakter på (@) for å indikere hvem det er adressert. I denne opplæringen vil jeg forklare - i medie-ekspert brukere - hvordan du legger til disse to funksjonene "på hånden", uten noen all'istallazione Plugin. Også utnytte mulighetene med jQuery til festen i Javascript. Teknikken er stille det samme jeg brukte til å introdusere denne funksjonen i denne bloggen.

Merk: Bruken av en plugin er den beste løsningen for dem som ofte har en tendens til å endre sin Wordpress-malen eller i det minste, har i påvente av å gjøre det. Denne leksjonen viser bare hvordan du skal utføre målrettede inn koden på Wordpress, og er dedikert til den mest nysgjerrige.

Skifte fil comments.php

Den første endringen å gjøre er å gå inn på linken "svar" og "enheter" i hver kommentar. Du gjør dette ved å redigere filen comments.php ligger i mappen av våre tema. Denne filen inneholder alle instruksjoner som gjør det mulig å vise kommentarer på slutten av innlegget. Den delen som interesserer oss (som kan variere noe fra sak til sak) er loopen etableringen av de ulike kommentarene, gjenkjennelig av:

Fortsett lesing ... "

Related Post

jQuery: hvordan bygge en forlengelse Plugin

Tirsdag, 23. september 2008

Som alle biblioteker av denne typen også jQuery kan utvide sin grunnleggende funksjonalitet ved hjelp av real-plugin-modulen. Respektere reglene i sin drift, nemlig restituiendo alltid en peker til den valgte eller jQuery seg selv, kan du skrive en plugin-modul med noen få linjer kode. Ta som eksempel koden foreslått i jQuery mot alle: en målestokk med 5 nettleser som var (etter korrigering rapportert av Luca):

JavaScript:
  1. ) . css ( 'cursor' , 'pointer' ) . click ( $ ( 'H2.dropdown'). Css ( "markøren", "pekeren"). Klikk (
  2. funksjon () (
  3. $ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; hvis ($ (denne). neste (). er ( ': hidden')) $ (denne). neste (). slideDown (); else $ (denne). neste (). slideUp ();
  4. )
  5. );

Fortsett lesing ... "

Related Post

jQuery mot alle: en målestokk med 5 nettleseren

Onsdag, 17. september 2008

bilde En god utvikleren har ikke noe problem å flytte fra et programmeringsspråk til et annet. Valget om å fokusere på et bestemt språk, rammeverk og utviklingsmiljø, er diktert mer av tilgjengelighet av tid og type arbeid som foregår. Imidlertid en viktig faktor som kan påvirke valg av "rammen" som er den sympati eller sykdom som kan modnes over tid.
Nærmere bestemt vil jeg analysere noen - ikke alle - Javascript rammeverket tilgjengelig i dag, fordi "bedt" for å se primært på jQuery.
Den skaperne av mootools (en av de mest populære Javascript ramme) har gjort tilgjengelig et verktøy til å kjøre en test av hastighet og gyldigheten av fem kjente rammeverk Javascript: Slickspeed. Denne testen, resultatene ikke rabatt på alle, er viktig som operasjonelle rammeverket Javascript på klient-siden, som er drevet av vår nettleser. Det er nettopp derfor at noen finner Safari raskere enn Internet Explorer eller Google Chrome raskere enn Firefox. Men dette ofte avhenger av siden du viser. Faktisk, kan meget vel skje at et bestemt webområde er egentlig mer "fast" når den vises i Safari, men dette betyr ikke at "alle områder vil være raskere med Safari! Naturligvis, denne talen er gyldig for andre leser.

Benchmark

I testene jeg gjennomførte med Slickspeed Jeg har sammenlignet leseren er tilgjengelig på maskinen min (Utilmate Windows Vista 64bit - Intel Core 2 Quad 2,4 GHz med 8GB RAM).
Dessverre testene ikke er i stand til å kjøre det med Internet Explorer 7, fordi blokkerer bilen, selv gå ut av skalaen med resultater! Igjen, gratulerer Microsoft.
Jeg crercato identisk med å opprettholde status på PC under testen, åpne nettleseren separat, og ikke sende noen andre kjører prosessen.

Merk: Hvis du føler at du gjør ett eller flere av disse testene, kan du kommentere på dette innlegget i tilfelle av "nysgjerrige" og forskjellige resultater.

bilde

Google Chrome er virkelig rask, med en verdi på 68 (gjennomsnitt) i testen med jQuery. Den tregere, men det virket Flock, til tross kommer fra samme "mor" Mozilla. Dette dårlig resultat for Flock er virkelig nysgjerrig gitt sin kutte sosiale nettverk, fordi det er den sosiale nettverk Web 2.0 utnytte mange av Javascript-rammeverket tilgjengelig, slik at en navigasjon og interaksjon virkelig nyskapende.
En overraskelse beat Firefox og Opera har også en masse ', selv får 74 i Klubb! Firefox og Safari, tross alt, er like, med Safari raskere i tester med Mootools og jQuery.

Hva rammeverk å velge?

Hvis ikke badiamo å teste hastigheten på kjøringen og vi ikke bryr seg om størrelsen på Kbyte av den samme rammen, må svaret være "hva som passer for deg" eller, hvis du foretrekker det, "det du vet best, eller er mer harmoniske med stil av programmering. "
Til slutt vil disse rammene vil se noe "alle (se bruk av $ for eksempel), til tross for noen viktige og vesentlige forskjeller som kan hoppe i øynene til en ekspert eller virkelig trilles i et bestemt bibliotek. I prinsippet, faktisk, alt som kan oppnås med jQuery, for eksempel, kan du gjøre det bra med mootools eller prototyp! Hvis jQuery har et svært kompakt syntaks, som alle metoder for alltid returnere jQuery objekt grunnlag, og dermed skape endeløse filer av oggetto.metodo().metodo().metodo()... er ikke sagt at dette er på alle koster en styrke, spesielt for de som er nødt til å feilsøke!
Bibliotekene som prototype.js synd kanskje i mangel av grafiske effekter, og med enkel tvinger utvikleren til å implementere spinoff som scriptaculous.js, tunge og fjernt fra biblioteket førstevalg.

Et eksempel

Bare denne siste grunn, for eksempel, tok meg til å erstatte den koplede prototyp / scriptaculous med jQuery å gjøre paneler interaktivt / animerte her i sidepanelet i undolog.com. Selv bruker Google API for å importere bibliotekene, er en sløsing laste inn hele biblioteket scriptaculous for en slideDown og slideUp. For informasjon og eksempelkode her i går Javascript-koden sammen med prototyp / scriptaculous:

JavaScript:
  1. / / Prototype / scriptaculous
  2. ) . each ( $ $ ( 'H2.dropdown'). Hvert (
  3. element ) { funksjon (element) (
  4. = "pointer" ; element. stil. markøren = "pekeren";
  5. 'click' , element. observere ( "klikk",
  6. event ) { funksjon (hendelse) (
  7. this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration:. 5 } ) ; if (this. neste (). stil. vise == "") nye Effect. BlindUp (this. neste (), (duration. 5));
  8. Effect. BlindDown ( this . next ( ) , { duration:. 3 } ) ; Effekt annet nytt. BlindDown (this. neste (), (varighet:. 3));
  9. event ) ; Hendelse. Stop (hendelse);
  10. )
  11. )
  12. )
  13. );

og det er nå med jQuery:

JavaScript:
  1. / / JQuery
  2. ) . each ( $ ( 'H2.dropdown'). Hvert (
  3. i ) { funksjon (er) (
  4. ) . css ( 'cursor' , 'pointer' ) . click ( $ (Denne). Css ( "markøren", "pekeren"). Klikk (
  5. funksjon () (
  6. $ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; hvis ($ (denne). neste (). er ( ': hidden')) $ (denne). neste (). slideDown (); else $ (denne). neste (). slideUp ();
  7. )
  8. );
  9. )
  10. );

Når alt kommer til alt, tror jeg ikke det er mye forskjell! Men som jeg sa før ... Spørsmålet er "godt" av personlig smak.

Related Post