javascript

Widgetek írása javascriptben

Szerző:

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

Az HTML tag stílusának automatikus felülírása javascripttel

Szerző:

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

D.I.Y. “beágyazott” ablak javascriptben – kész az ablak

Szerző:

Most, hogy már az előkészületeket tisztáztuk elérkezdtünk ahhoz, hogy végre nekilássunk az ablak-kialakító javascript függvény megírásához.

A fenti képet egy konqueror(webkit) generálja.
most a sorozat utolsó cikkében összeáll a teljes kép. Választ kapunk arra, hogy miért is csináltunk Objektum osztályt, hogyan is használhatjuk fel a stíluslapot, amit már elkészítettünk, hogyan hívhatjuk életre a saját magunk által készített dialógus ablakot egy html kódban.
Ez alapján az egyszerű példa alapján már bárki nekiláthat a saját függvényeinek a megírásához, melyek sokkal többet tudhatnak, sokkal testreállóbbak, sokkal szebbek és ami a legfontosabb: saját készítésűek.

Na, de ennyit bevezetésként.

Olvass tovább

D.I.Y. “beágyazott” ablak javascriptben – segédfüggvények meg ilyesmik

Szerző:

No, most, hogy már az ablakunk kinézetét kitaláltuk, rátérhetünk a kódra.

Ám azelőtt, hogy az ablak-kialakító függvényeinket megírnánk, néhány függvényt még érdemes megírnunk. Igencsak megkönnyítheti a programaink átláthatóságát, ha objektum orientáltan készítjük el. Ezek a kódrészletek nem kötelezőek és valószynű, hogy nem a legszebbek, vagy legprofibbak, de a saját céljainknak megfelel és nem a legjobbat akarjuk kihozni, hanem valami olyat, amit könnyen megértünk.

Az alábbi kódrészlettel egy olyan alaposztályt definiálunk, menek a tulajdonságait fogja örökölni az ablakkezelő származtatott osztályunk.

{code type=javascript}var ObjectClass = function ObjectClass(cla,obj){
this.priv = {
‘cla’: cla,
‘obj’: obj,
‘uid’: (new Date()).getTime(),
}
this.priv.eid = cla+’#’+obj+’#’+this.priv.uid;
}{/code}

A kostruktorunk két paramétert fog várni 1) az osztály nevét (ez majd a Dialog lesz), ill. 2) az objektum nevét (ez utóbbi elvileg bármi lehet, gyakorlatban, majd a változó neve lesz). Ezek hasznosak lehetnek, ha nyomon szeretnénk követni, hogy mikor milyen osztályunk függvényünk éppen mit csinál, továbbá az utóbbi egy nagyonegyszerű megoldást kínál arra, hogy a vezérlőelemek az objektumaink függvényeit meg tudják hívni.

Olvass tovább

D.I.Y. „beágyazott” ablak javascriptben – stíluslap

Szerző:

Most úgy gondoltam, hogy megint valamilyen rendhagyú cikket írok. Egycsapásra dokumentálom, amit csinálok és fel fogom használni a Linuxfórum szolgáltatásaihoz is, ha eljutok odáig.

Bizonyára sokakban felmerült a kérdés, hogy mi van akkor, ha az „alert” már nem elég. Akkor használhatjuk a „window.open” függvényt is. Ebben az esetben persze külön nyűg a külön ablak, a nem saját magunk által beállított keret és a változók átadása. Ráadásul az ablakunk nem lesz olyan stílusú, ami beleolvadna a környezetébe.

Van más lehetőség is. Letölthetünk egy pár előre megírt profi megoldást is, de sokkal izgalmasabb, ha magunk írunk egy ilyen ablakkezelőt. Nos, ez a cikk egy ilyen lehetőség megvalósításával foglalkozik. Nos, ha az eredmény sárgább és savanyúbb lesz, akkor is a miénk lesz.

A képen az alább tárgyalandó stíluslappal készült javascript ablak képe látható firefox böngészőben. Természetesen a böngészőkben némi képpen eltérően jelenik meg. A megjelenést tovább lehet finomítani, ha a gombokat is magunk csináljuk. Én most ezt nem tettem meg.

Az ablaknak a méretei változtathatóak, csakúgy mint a gombok, vagy az ikon, vagy épp a cím. A tartalomhoz, pedig – csakúgy, mint a „nagy társainál” – igazodik a scrollbar. Ezen felül úgy készült el a script, hogy könnyen lehet többnyelvű.

Olvass tovább