HTML

Nos, itt egy újabb (saját gyártású) „sorozat”, melyet folytatok. (Ezek a cikksorozatok és egyebek szintén elérhetőek a DOKUMENTÁCIÓK & LINKEK almenüiben is.)

Korábban azt ismertettem, hogy hogyan lehet egy (hagyományos módszerekkel nem módosítható) HTML tag stílusát megváltoztatni javascripttel.
Előtte pedig azt szemléltettem, hogy hogy lehet példaképpen egy dialógus ablakot létrehozni.

Mindkét dolognak meg vannak a maga korlátai.
Az első módszer – noha széles körben alkalmazható, több példányban is – hátránya, hogy a weblap stílusa utólag változik azáltal, hogy a node-okon végigfutva kiválasztjuk a módosítandó tageket. Ezt a módszert alkalmazhatjuk azon kevés előre definiált tagen, melyeket új stílussal szeretnénk előállítani, de nem praktikus, ha többször (sokszor) végignyálazva saját tageket hozunk létre… nem is beszélve arról, hogy ütközhetnek egy későbbi szabvánnyal, vagy ne adj ég egy böngésző dobhatja a nem definiált elemeket.
A második módszernek szintén vannak hiányosságai, hibái. Az első, az objektumosztály definiálásának statikus mivolta, vagy épp az, hogy az objektum nevét definiálnunk kell. Arról nem is beszélve, hogy az ablakot document.write paranccsal hoztuk létre, ami nyilvánvalóan abban az esetben alkalmazható, ha mást nem akarunk az oldalra felvésni.

Megoldásként létrehozhatunk egy objektumbarát widgetet, mely alkalmas bonyolultabb dolgok tárolására és nem bír az előzőleg felsorolt hátrányokkal.

Olvass tovább

Bizonyára mindenki észlelte már, hogy egy egyszerű checkbox is annyi féle képpen nézhet ki, ahány böngészó, meg operációs rendszer együttvéve.

Kézenfekvő tehát, hogy saját stílust alakítsunk ki, de amint elővesszük a szokásos css fájlunkat pl. egy checkboxnál, az nem fog működni.
Mielőtt szomorúan tudomásul vennénk, hogy bizony lehetetlenre vállalkoztunk, elárulom, hogy van az a trükk, amivel megoldható ez a probléma is.

Először is, vagy egy css-sel alakítjuk ki a stílusunkat, ami nem jó, hisz megint ahány böngésző, annyi módon fogja megjeleníteni.
Célszerű tehát csak az alapdolgokat css-ben elkészíteni, a többit pedig bitképpel…a mi lehet akármilyen bonyolult.

Tehát jelen esetben szerkesszünk egy 24×96-os checkbox.png-t, amelyben 4 24×24-es ikont fogunk tárolni (1) normál, 2) nem engedélyezett, 3) kipipált, 4) kipipált, de nem engedélyezett). Az ikonok közepét részint átlátszónak hagyjuk, hogy mintegy üvegként látszódjon alatta a háttér, valamint, ha az egeret felé húzzuk, akkor új hátteret adhassunk neki.
Ettől jól fog kinézni. Természetesen bonyolultabbat is lehet csinálni és külön lehet definiálni az egér lenyomását, felengedését, úgy, ahogy három állást is meghatározhatunk, sőt elvileg animálhatjuk is, ha nem sajnáljuk rá az erőforrást.

Olvass tovább