Daily Archives: 2011.08.28. 11:32

Image overlay készítése CSS-sel

Az egyik projektünkben egy weboldalon olyan képeket kell megjelenítenünk, amiket a felhasználók töltenek fel. Ez még önmagában nem is nagy durranás, csakhogy a dizájner ráálmodott egy-egy Metros nyíl ikont is ezekre a képekre, overlay formájában:

A végeredmény

A feladat nyilván sokféleképpen megoldható, mi a CSS-t választottuk, dolgozzon csak a böngésző. Ehhez kellett először is az eredeti kép:

Az eredeti kép

Továbbá az overlay, ami ugyanakkora, mint az eredeti kép, majdnem teljesen átlátszó és csak a nyíl van rajta:

Az overlay

A kód pedig nagyon egyszerű, csak fordítva kell gondolkodni: az overlayt jelenítjük meg és a kép lesz a háttér:

<img style="background:url(kep.jpg)" src="overlay.png" />

 

Technorati-címkék:

Globalizálás és lokalizálás JavaScriptben

Ahogy a webalkalmazásaink logikájának egyre jelentősebb része költözik a kliens oldalra, úgy egyre gyakrabban merül fel az igény, hogy lokalizáljunk és globalizáljunk JavaScriptben. Például egy Ajax hívás nyers JSON adatokat ad vissza, de persze az átküldött Date objektumot már a felhasználó nyelvi beállításainak megfelelően kellene sztringgé alakítanunk megjelenítés előtt. Vagy éppen egy alert ablakot kell feldobnunk, természetesen olyan nyelven, amelyen ért a felhasználó.

A problémára több megoldás létezik, nekem a Microsoft által tavaly bejelentett jQuery Globalization Plugin tűnik legszimpatikusabbnak, mégpedig azért, mert nagyon közel áll a szerver oldalon megszokott CultureInfo képességekhez. Sajnos a plugin elsőre elég barátságtalannak tűnik, több ok miatt:

1. A bejelentés óta nem sokat írt róla sem a Microsoft, sem pedig a jQuery csapat, de szerencsére ez nem azt jelenti, hogy egy újabb ígéretes fejlesztés került a kukába, ugyanis a jQuery csapatnak komoly tervei vannak ezzel a komponenssel.

2. Nehéz megtalálni az aktuális verziót, mert időközben átnevezték a projektet. Már nem jQuery Globalization Pluginnek hívják, hanem egyszerűen csak jQuery Globalize és itt található: https://github.com/jquery/globalize. “Globalize certianly needs some polishing and bug fixing, but the API is now pretty stable, so you should give it a try.”

3. A nevében a “jQuery” félrevezető. Szerencsére már nem hívják “plugin”-nak, ugyanis nem plugin. Ez egy önálló JavaScript osztálykönyvtár hasznos függvényekkel, nem kell hozzá se $, se selector.

Mit tud?

  • Ismeri 350 kultúra paramétereit, méghozzá a .NET Framework CultureInfo adatai alapján, de persze a lista bővíthető. Számformátumok, dátum formátumok, naptár információk stb.
  • Számok és dátumok formázása a megadott kultúra szerint. A sok formázási lehetőséget legegyszerűbben a példák között található examples/browser/index.html fájl futtatásával lehet áttekinteni.
  • Lokalizált sztringek definiálása és felolvasása.
  • Egész számok, törtszámok és dátumok parszolása sztringből.

A rövid, de használható dokumentáció megtalálható itt: https://github.com/jquery/globalize/blob/master/README.md

Bár a jelenlegi verziószáma 0.1.0a1 (ez vajon mennyivel több, mint a 0.0?) és van néhány nyitott issue, a tapasztalataink alapján már jól működik, merjük is élesben használni.

Ti mit használtok kliens oldali globalizálásra és lokalizálásra?