jQuery: runda kanter på bilderna för att överlappa

Torsdagen den 30 oktober, 2008

På grund av de olika konvertering mellan olika webbläsare, vilket säkert se Microsoft Internet Explorer i åtanke måste vi alltid utvägen att ansöka om artifizi effekter som nu borde vara en standard. Multi-diskuteras rundade kanter är ett klassiskt exempel på "katastrof" tillverkats av fullständig oförmåga att uppnå en standard allvarligt på sidan som gör HTML / CSS. Det finns många nätverkslösningar som gör att du kan ha "effekter" (effekter undanta dall'HTML närvarande som rundade kanter, skugga effekter, funderingar, osv ...) med fläckar på blad av stilar, särskilda tricks med hjälp av div ympade, bibliotek Javascript, användning av canvas
Av rent pedagogiska Jag skulle förklara ytterligare tekniska (cross-läsare) att gälla för rundade kanter av bilder:

Demos och källor

Fortsätt att läsa ... "

Liknande Post

Wordpress: steg för steg hur du skapar en inloggning

Fredag 24 oktober, 2008

I den här guiden kommer vi att se hur du skapar en personlig inloggning förfarande, med hjälp av Ajax-funktionalitet via jQuery. Det finns flera sätt att anpassa inloggning Wordpress, till exempel med hjälp av krokar och filter add_action() add_filter() Vi använder en låg nivå, även om vi fortfarande gränssnitt till kärnan Wordpress. Se även till att validera en användare genom den dubbla mail / lösenord.

Varför skapa ett användarkonto?

  • I vissa sammanhang kan återgå uitle har mest kontroll över inloggningssidan, att föreslå en anpassad layout för våra registrerade användare. Du kan också berika sida med information, en logotyp från den klassiska "du glömt ditt lösenord?"
  • Att tillåta åtkomst via e-post (som visas här fördraget) i stället för user_login standard Wordpress
  • För att kunna ange en inloggning panel i sidofältet i vår blogg
  • Och slutligen, att ha ett skelett - och en idé - för ett bra Plugin : D

Miljö

I vårt exempel / handledning arbete i roten på Wordpress inuti en mapp mylogin Jag skapade två php-filer i mappen: index.php och logon.php Den första innehåller för vår inloggning, med alla funktioner Javascript / jQuery som vi tjänar. Den andra filen, logon.php kommer att innehålla kod för att verifiera användaren. Då vi skapa en mapp css och inne i den här filen layout.css och en mapp med images Inne i mappen bilder innehålla en klassisk Ajax loader: skapa den online på AjaxLoad.info. I slutet bör du ha:

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

Fortsätt att läsa ... "

Liknande Post

Mycket kort trick: odefinierade värden i Javascript

Onsdagen den 22 oktober, 2008

Det är en förkortad form för att hänföra "under flygning" ett värde till en variabel om en annan inte definieras (undefined), med hjälp av logiskt eller operatör (| |) - Double-pipe:

JavaScript:
  1. / / Pluto är odefinierade
  2. var Pluto;
  3. ; var foo = Pluto | | "5";
  4. pippo ) ; varning (foo);
  5. / / Resultat: 5

Denna teknik är användbar för att skriva funktioner med parametrar:

JavaScript:
  1. param ) { miaFunc funktion (param) (
  2. ; var p1 = param | | "riktmärke";
  3. / / ...
  4. )

Men vi måste vara försiktiga med att använda detta formulär som noll värden som 0 är misstolkas på grund av "skuld" i eller Logic används:

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

Liknande Post

Camelize, CamelCase

Måndagen den 20 oktober, 2008

Som sågs i efterhand olika kodning och kodning metoder som en utvecklare kan ha för att lösa problemen är olika och många av de samma programmeringsspråk används. Så här några av de mest populära Javascript ramar har löst en enkel funktion av CamelCase:

Prototype.js

Prototype.js, version 1.6.0.3, uttryckligen föreslår en metod camelize() CamelCase på ett snöre. Metoden är ganska enkel för frågeställaren och den kod är självförklarande. I detta fall fanns det ingen användning av reguljära uttryck!

JavaScript:
  1. camelize: funktion () (
  2. . split ( '-' ) , len = parts. length ; var delar = detta. Split ('-'), len = delar. längden;
  3. len == 1 ) return parts [ 0 ] ; if (len == 1) återvända delar [0];
  4. . charAt ( 0 ) == '-' var = camelized detta. charat (0) == '-'
  5. ? ] . charAt ( 0 ) . toUpperCase ( ) + parts [ 0 ] . substring ( 1 ) delar [0]. charat (0). toUpperCase () + delar [0]. delsträngar (1)
  6. ] ; : Delar [0];
  7. var i = 1 ; i <len; i++ ) för (var i = 1, i <len, i + +)
  8. . charAt ( 0 ) . toUpperCase ( ) + parts [ i ] . substring ( 1 ) ; camelized = + delar [i]. charat (0). toUpperCase () + delar [i]. delsträngar (1);
  9. camelized avkastning;
  10. )

Fortsätt läsa ... "

Liknande Post

Olika kodning och kodning

Tisdagen den 14 oktober, 2008

Någon hävdar att programmering är en konstform och, i slutändan, jag kan bara hålla särskilt när man hittar lösningar mycket olika ut för samma problem. För att förstå hur sant detta är som ett identiskt behov i medisimo språk (Javascript) kan lösas med metoder helt annorlunda och originellt.

Vänster noll Pad

Ett antal, men det tal är också giltiga för alla strängar, till exempel 123 kan fyllas till vänster - att göra - med ett antal nollor, till exempel: 00123 Detta måste uppvisas vid flera tillfällen och är bra för att anpassas - eller visa - ett antal snyggt, underförstått som visar sitt högsta värde. I videon, till exempel den klassiska poäng (poängen) är ofta anges med 001234 högst det gäller 999999 Så här problemet löstes genom olika utvecklare:

JavaScript:
  1. / **
  2. * Vänster Pad String
  3. *
  4. * @ Från http://snipplr.com/view/8423/left-pad-string/
  5. * @ Författare webb-http: / / www.mechanicmatt.com/
  6. *
  7. * @ Param NUM - att fylla Striga
  8. * @ Param totalChars - Totalt antal tecken, inklusive de "nollor"
  9. * @ Param padWidth - Tecken som används för att fylla, default "0"
  10. * /
  11. num, totalChars, padWith ) { leadingZeros funktion (num, totalChars, padWith) (
  12. num num + = "";
  13. ? padWith = (padWith)? padWith: "0";
  14. num. length <totalChars ) { if (längd interna referensnummer <totalChars) (
  15. num. length <totalChars ) { while (längd interna referensnummer <totalChars) (
  16. padWith + num = NUM;
  17. )
  18. { } Else ())
  19. num. length > totalChars ) { //if padWith was a multiple character string and num was overpadded if (längd interna referensnummer> totalChars) (/ / om padWith var en flera Teckensträng och num var overpadded
  20. num. length - totalChars ) , totalChars ) ; = Num num. Delsträngar ((interna referensnummer längd - totalChars), totalChars);
  21. { } Else ())
  22. återgå num;
  23. )
  24. leadingZeros ( "asdf" , 10 , "0" ) ) ; varning (leadingZeros ( "asdf", 10 "0"));

Denna lösning är extremt uttryck, men kan lägga till ett obegränsat antal 0 antal num också välja typsnitt som används av padWidth i stället för standardinställningen 0
Definitivt ursprungliga dock denna lösning:

JavaScript:
  1. / **
  2. * String_pad
  3. *
  4. * @ Från http://snipplr.com/view/700/stringpad/
  5. * @ Författare http://d.hatena.ne.jp/brazil/20060721/1153489937
  6. *
  7. * @ Param str - att fylla Striga
  8. * @ Param len - Totalt antal tecken, inklusive de "nollor"
  9. * @ Param CH - Tecken som används för att fylla
  10. * /
  11. str, len, ch ) { return new Array ( len- ( '' +str ) . length + 1 ) . join ( ch ) + str } funktion pad (str, len, CH) (återgå new Array (Len-(''+ str). längd + 1). ansluta (CH) + str)
  12. pad ( 56 , 4 , '0' ) ) ; // 0056 varning (PAD (56, 4,'0 ')), / / 0056

Samma resultat, med ett helt annat synsätt. Återigen har vi möjlighet att bestämma antalet tecken padding genom parametern len och teckensnitt som används av ch Underlåter att använda den standard som anges i föregående funktion.
Vad jag använder i stället ...:

JavaScript:
  1. / **
  2. * String_pad
  3. *
  4. * @ Författare Giovambattista Fazioli
  5. * @ Web http://www.undolog.com
  6. *
  7. * @ Param s - för att fylla Striga
  8. * @ Param l - En sträng som anger tecknet är att längden
  9. * Sådana som "0000" tecken = "0" längd 4
  10. * /
  11. s,l ) { return ( l. substr ( 0 , ( l. length -s. length ) ) +s ) ; } padding funktion (s, l) (tur och retur (L. substr (0, (L-s längd. längden)) + s);)
  12. padding ( '123' , '0000' ) ) ; varning (stoppning ('123 ','0000'));

Om du har andra intressanta lösningar kommentar : D

Liknande Post

En klass nedräkning i Javascript

Måndag 13 oktober, 2008

I efterhand med 3D Countdown FIVe3D (Se hur jag gjorde det: skriva en nedräkning i Flash), var en klass förslag om inrättande av ett objekt Countdown i ActionScript, här är en version liknande i Javascript:

JavaScript:
  1. / **
  2. * Countdown klass
  3. *
  4. * @ Författare Giovambattista Fazioli
  5. * @ @ E-post g.fazioli undolog.com
  6. * @ Web http://www.undolog.com
  7. *
  8. * @ Param dd (sträng) "dag månad, år"
  9. *
  10. * /
  11. dd ) { funktion nedräkning (DD) (
  12. / / Init tidsram
  13. Date ( dd ) ; var target = nytt datum (DD);
  14. = target. getTime ( ) ; detta. targetTime = mål. getTime ();
  15. / **
  16. * Uppdatera nedräkning
  17. * /
  18. = function ( ) { detta. uppdatera = funktion () (
  19. Date ( ) ; var dag = new Date ();
  20. ( ) ; var = currentTime dag. getTime ();
  21. / / Tid kvar
  22. this . targetTime - currentTime ) ; detta. _leftMilliseconds = (this. targetTime - currentTime);
  23. ( this ._leftMilliseconds / 1000 ) ; detta. _leftSeconds = Math. golvet (this. _leftMilliseconds / 1000);
  24. ( this ._leftSeconds / 60 ) ; detta. _leftMinutes = Math. golvet (this. _leftSeconds / 60);
  25. ( this ._leftMinutes / 60 ) ; detta. _leftHours = Math. golvet (this. _leftMinutes / 60);
  26. / / Inga-modul
  27. = Math. floor ( this ._leftHours / 24 ) ; detta. leftDays = Math. golvet (this. _leftHours / 24);
  28. / / För utskrift
  29. = this ._leftMilliseconds % 1000 ; detta. leftMilliseconds = detta. _leftMilliseconds% 1000;
  30. = this ._leftSeconds % 60 ; detta. leftSeconds = detta. _leftSeconds% 60;
  31. = this ._leftMinutes % 60 ; detta. leftMinutes = detta. _leftMinutes% 60;
  32. = this ._leftHours % 24 ; detta. leftHours = detta. _leftHours% 24;
  33. )
  34. ( ) ; detta. Uppdatera ();
  35. )

Exempel

JavaScript:
  1. countDown ( '1 1, 2009' ) ; var= ny nedräkning ( "1 1, 2009");
  2. / / Visa hur många dagar, timmar, minuter, sekunder och millisekunder i den första januari 2009
  3. cd. leftDays + "," + cd. leftHours + "," + cd. leftMinutes + "," + cd. leftSeconds + "," + cd. leftMilliseconds ) ; dokumentet. skriva (dvs leftDays + "," + cd. leftHours + "," + cd. leftMinutes + "," + cd. leftSeconds + "," + cd. leftMilliseconds);

Liknande Post

Wordpress: hur man skriver ett svar på synpunkter använder jQuery

Fredag 3 oktober, 2008

Nyligen Cristiano Fino utfärdat en vinst Plugin för Wordpress kan lägga till två länkar till alla yttranden från en tjänst (kanske du har installerat en liknande, med tanke på att katalogen Wordpress.org Jag har ett par avvägar, men som en italiensk programvara skulle vara händelse för att hedra det utmärkta arbete som utförts av Cristiano). Dessa Link (svar & aktier), uppfylla och / eller citerar författaren till en kommentar genom att köra tråkiga funktion för att infoga tecknet på (@) för att visa vem det är riktat. I den här guiden kommer jag att förklara - på medellång-expert användare - hur du lägger till dessa två funktioner "på hand", utan all'istallazione Plugin. Också utnyttja kapaciteten hos jQuery till festen i Javascript. Tekniken uppvisar samma Jag användas för att införa denna funktion i denna blogg.

Anmärkning: Användningen av en plugg är den bästa lösningen för dem som ofta tenderar att ändra sina Wordpress mall eller åtminstone har i avvaktan på detta. Den här guiden kommer bara att visa hur man kan utföra riktade in koden Wordpress och riktar sig till den mest nyfiken.

Ändra filen comments.php

Den första ändringen att göra är att gå in på länken "svara" och "enheter" inom varje kommentar. För att göra detta, redigera filen comments.php ligger i mappen av våra tema. Denna fil innehåller alla instruktioner som gör att du kan se kommentarerna i slutet av en tjänst. De avsnitt som intresserar oss (som kan variera något från fråga till fråga) är loop skapandet av de olika synpunkter, som känns igen av:

Fortsätt läsa ... "

Liknande Post

jQuery: hur man bygger en förlängning Plugin

Tisdagen den 23 september 2008

Liksom alla bibliotek av detta slag också jQuery kan förlänga dess grundläggande funktioner med hjälp av verkliga plugin. Respektera reglerna i sin verksamhet, nämligen restituiendo alltid en länk till den valda eller jQuery själv, du kan skriva ett plugin med några rader kod. Ta som exempel den kod som föreslås i jQuery mot alla: ett riktmärke med 5 webbläsare som (efter korrigeringen rapporterats från Luca):

JavaScript:
  1. ) . css ( 'cursor' , 'pointer' ) . click ( $ ( "H2.dropdown"). CSS ( "markör", "pekare"). Klicka (
  2. funktion () (
  3. $ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if ($ (denna). bredvid (). är ( "dolda")) $ (denna). bredvid (). slideDown (); annat $ (denna). bredvid (). slideUp ();
  4. )
  5. );

Fortsätt läsa ... "

Liknande Post

jQuery mot alla: ett riktmärke med 5 webbläsare

Onsdagen den 17 september 2008

bild En bra utvecklare har inga problem att flytta från ett programmeringsspråk till ett annat. Valet att fokusera på ett visst språk, ram och utvecklingsmiljö, styrs mer av tillgången på tid och typ av arbete som äger rum. Men en viktig faktor som kan påverka valet av "ram" som är den sympati eller sjukdom som kan mogna med tiden.
Specifikt, jag ville analysera vissa - inte alla - Javascript ram som finns idag, eftersom "råd" att titta främst på jQuery.
Skaparna av mootools (en av de mest populära Javascript ram) har ställt ett verktyg för att köra ett prov på snabbhet och giltigheten av fem kända ramen Javascript: Slickspeed. Detta test, resultaten inte rabatt på alla, är viktigt eftersom de rambestämmelser Javascript på klientsidan, som drivs av våra läsare. Det är just av denna anledning som vissa tycker Safari snabbare än Internet Explorer eller Google Chrome snabbare än Firefox. Men detta ofta beror på vilken typ av sida du visar. I själva verket kan mycket väl hända att ett visst område är egentligen mer "snabb" när den visas i Safari, men det innebär inte att alla platser kommer att bli snabbare med Safari! Naturligtvis detta inlägg är giltig för någon annan webbläsare.

Riktmärket

I tester jag utförts med Slickspeed Jag har jämfört den webbläsare som finns på min maskin (Utilmate Windows Vista 64 bitar - Intel Core 2 Quad 2,4 GHz med en 8GB RAM).
Tyvärr är de tester som inte kan köra det med Internet Explorer 7, eftersom blockerande bilen, även gå ut i skala med resultaten! Än en gång, grattis Microsoft.
Jag crercato identiska att bibehålla status av PC under testet, öppna browser separat och inte skicka någon annan som kör processen.

Observera: Om du känner för att du gör ett eller flera av dessa tester kan du kommentera det här inlägget i fallet med "nyfiken" och olika resultat.

bild

Google Chrome är verkligen snabb, till ett värde av 68 (genomsnitt) i testet med jQuery. Den långsammare, men det verkade Flock, trots kommer från samma "mamma" Mozilla. Detta dåliga resultat för Flock är verkligen märkligt med tanke på dess att minska sociala nätverket, eftersom det är det sociala nätverket Web 2.0 utnyttja många av Javascript ramen tillgängliga, så att det ger en navigering och interaktion verkligt innovativa.
En överraskning slå Firefox och Opera har också en mycket ", fick en 74 i Dojo! Firefox och Safari, när allt kommer omkring är likadana, med Safari snabbare i tester med Mootools och jQuery.

Vilka regler att välja?

Om inte badiamo att testa hastigheten för utförande och vi bryr oss inte om storleken på Kbyte av samma ram, svaret kan vara "vad som passar för dig" eller, om du föredrar det, "vad du vet bäst eller är mer harmonisk med din stil i programmering. "
I sista hand kommer dessa ramar kommer att se något "alla (se användningen av $ till exempel), trots några viktiga och stora skillnader som kan hoppa i ögonen av en expert eller verkligen drivit i ett särskilt bibliotek. I princip, egentligen allt som kan uppnås med jQuery, till exempel, du kan göra och med mootools eller prototyp! Om jQuery har en mycket kompakt syntax, som alla metoder alltid återlämna jQuery objekt grund, vilket skapar oändliga filer av oggetto.metodo().metodo().metodo()... är inte sagt att det är på alla kostnader som en styrka, särskilt för dem som kommer att felsöka!
Bibliotek som prototype.js synd kanske i avsaknad av grafiska effekter, även enkla, tvinga exploatören att genomföra Spin-off som scriptaculous.js, tunga och långt från biblioteket första val.

Ett exempel

Just detta sista orsak, till exempel, tog mig för att ersätta de kopplade prototyp / scriptaculous med jQuery för att göra skivor interaktiv / animerade här i sidofältet i undolog.com. Till och med hjälp av Googles API för att importera bibliotek, är ett slöseri ladda hela biblioteket scriptaculous för en slideDown och slideUp. För information och prov, här går Javascript-kod tillsammans med den prototyp / scriptaculous:

JavaScript:
  1. / / Prototype / scriptaculous
  2. ) . each ( $ $ ( "H2.dropdown"). Varje (
  3. element ) { funktion (element) (
  4. = "pointer" ; element. stil. markören = "pointer";
  5. 'click' , element. observera ( "klicka",
  6. event ) { funktion (händelse) (
  7. this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration:. 5 } ) ; om (this. nästa (). stil. display == "") nya Effect. BlindUp (this. nästa (), (duration. 5));
  8. Effect. BlindDown ( this . next ( ) , { duration:. 3 } ) ; Effekt annat nya. BlindDown (this. nästa (), (längd:. 3));
  9. event ) ; Händelse. Stopp (event);
  10. )
  11. )
  12. )
  13. );

och det är nu med jQuery:

JavaScript:
  1. / / JQuery
  2. ) . each ( $ ( "H2.dropdown"). Varje (
  3. i ) { funktion (er) (
  4. ) . css ( 'cursor' , 'pointer' ) . click ( $ (Här). CSS ( "markör", "pekare"). Klicka (
  5. funktion () (
  6. $ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if ($ (denna). bredvid (). är ( "dolda")) $ (denna). bredvid (). slideDown (); annat $ (denna). bredvid (). slideUp ();
  7. )
  8. );
  9. )
  10. );

När allt kommer omkring, alls, jag tror inte att det finns en stor skillnad! Men som jag sagt tidigare ... Frågan är "bra" om personlig smak.

Liknande Post