hosszu kálmán

Nekem már többször előfordult olyan problémám, hogy a Drupal elsődleges menüjének (primary links) egyedi kinézete miatt, kizárólag képekből álló menüt kellett készítenem. Ezalatt azt értem, hogy nincs a háttérkép felett semmilyen szöveg, a menü címe is a képen szerepel.

A háttérképeket egyszerűen megadhatjuk, a menüpontok egyedi azonosítója miatt (pl. menu-130 stb.), viszont a rajta lévő szöveget el kell tüntetni valahogy.

CSS-ben ha levesszük a betűméretet 0px-re sajnos nem a megfelelő megoldás, mert IE-ben, Chrome-ban és Operában kicsiben, de látszik.

Egy megoldás, ha a hyperlinkek szövegét span elemek közé tesszük, és a span elemeket tüntetjük el CSS-ben a display: none; definícióval, tehát a cél az lenne, hogy így nézzen ki egy menüelem:

Ekkor minden további nélkül megadhatjuk CSS-ben a következőt:

Igenám, de hogy érjük el, hogy a Drupal span elemek közé tegye a linkek címét?

A megoldás az, hogy a sminkünk template.php fájljába kifejtjük a theme_links() fgv-t.

Íme a kód:

Ez a kód, majdnem megegyezik az API oldalon található fgv. kóddal. Nézzük az eltéréseket:

Ezzel annyit érünk el, hogy ne csak a listaelemnek (li) legyen egyedi azonosítója, hanem a hyperlink-nek (a) is. Ez azért fontos, hogy a :hover eseményre is tudjunk képet rakni, ha esetleg különbözik.

A link tömb lesz az l() fgv. harmadik paramétere, ebbe kell szerepelnie a beállításoknak, és mivel HTML-t adunk meg, ezért a $link tömb html kulcsát igaz értékre kell állítanunk. Az l() fgv. első paraméterének pedig beírjuk a span elemek közé a link címét.

Ha ezt elvégeztük, feltöltjük a template.php-t a smink könyvtárába, majd hogy a rendszer érzékelje az új fgv. létrejöttét, menjünk be a sminkek beállítási oldalába (admin/build/themes) és nyomjunk egy mentést.

Ezután minden menüelem egyedi azonosítoval fog rendelkezni, és a menü címe span elemek között lesz, amit könnyedén eltüntetetünk. Innenstől kezdve csak CSS kérédése az egész.

Észrevehetjük, hogy az Internet Explorer régebbi verziói nem tudják támogatni a PNG fájlokat. A jelenség az, hogy nem kezeli az átlátszóságukat, és ez elég nagy probléma mivel (sajnos) a mai napig is a felhasználók legnagyobb része IE6-ot használ.

Szerencsére erre is van megoldás, nem is bonyolult, nem is sok idő megoldani.

Mindösszesen három fájlra lesz szükségünk:

• ie.css
• png.htc
• transparent.gif

Az első css fájlt a Conditional Comment feltételes megoldással kell beilleszteni a weboldalunkba (Drupal CMS esetén a page.tpl.php fájlba):

Ezzel elérjük azt, hogy az IE7 előtt böngészőknél hozzáadja az oldalhoz az ie.css fájlt is.

Ha megnézzük ennek a css fájlnak a tartalmát akkor láthatjuk, hogy hova kell elhelyezni a többi fájlt:

Tehát az itt megadott könyvtárba (esetemben /images) elhelyezzük a png.htc és a transparent.gif fájlokat, és IE alatt is használhatunk PNG képeket.

Létezik egy jQuery fgv: show(). Ennek az a szerepe, hogy a nem látható html elemet láthatóvá teszi.

Tehát végülis annyi történik, hogy egy html elemet ami el van rejtve (display: none;) megmutat, mégpedig úgy, hogy inline css-sel ad neki egy display: block tulajdonságot.

Ez így rendben is lenne, ha nem akarnánk táblázatok soraira is alkalmazni (table tr). A probléma az, hogy pl. a Firefox szétcsúszik, ha a sor elemre vonatkozó css display: block. Erre a megoldás a display: table-row css definíció. Ezzel viszont az a gond, hogy az IE nem támogatja. Az IE viszont kezeli a táblázat soraira is a display: block tulajdonságot.

Nem értem miért nem építették bele a jQuery-be a böngésző ellenőrzését a show() fgv. meghívása esetében, de akkor vegyük figyelembe magunk, hiszen nem mindegy, hogy a táblázatunk így néz ki:

Vagy így:

Láthatjuk, hogy az első esetben a táblázat első oszlopa sokszorosára nőtt, ezért az oldal szétcsúszott.

JS-ből lekérdezni a böngésző típusát, nem nehéz, és a jQuery-be is beépített (core).

A következő kódot aztán símán beépíthetjük egy saját fgv-be.

Ügyfelünk kérése alapján el kellett készítenünk egy DropDown menüt a nyitólapjára. Most is - mint általában - a jQuery JavaScript könyvtárban kerestem a megoldást. Rövid keresgélés után megtaláltam a Superfish jQuery plugin-t, mely tökletesen megfelelőnek tűnt a célra…legalábbis első ránézésre.

A probléma a tesztelés során jelentkezett, mégpedig a szokásos IE6/IE7/FF kompatibilitási ellentétek keretében.
Mondanom sem kell, hogy a plugin FF alatt teljesen jól teljesített (ugyanúgy mint Safari-n vagy Opera-n), a Microsoft két böngészőjénél az oldal gyakorlatilag összeomlott.

A menü FF-ban:

Az internet Explorerben elég érdeksen mutatott:

Először úgy gondoltam megkeresem a megoldást, mert biztosan lokális gond van, hiszen az oldalon található bemutatókon nincs gond Internet Explorer alatt sem, de akárhogy csürtem csavartam nem akart működni. Nem csak a kinézettel volt összeakadás, hanem a funkcionalitás sem működött. IE alatt egyszerüen eltünt a DropDown menü amikor elhagytam az egérrel a legfelső meüelemet.

Néhány órányi küszködés után úgy felidegesítettem magam, hogy eldöntöttem inkább írok egy sajátot, hiszen nem egy atomfizika a DropDown menü, főleg a jQuery-t használva.

Nézzük meg, először a HTML osztályokat, az elrendezési szabályokat!

Íme egy főmeü, és a hozzá tartozó DropDown menü:

Az l() fgv. használata ne tévesszen meg senkit sem, ez egy beépített Drupal fgv., síma link generálódik belőle.
Tehát a

Sorok nyugodtan lecserélhetőek síma HTML elemekre:

Nézzük meg a css-t, hogy ki is nézzen valahogy, nameg azért vannak benne fontos részek:

Itt volt egy-két érdekesség, amit mindenképpen szeretnék megmelíteni!

Az ul.submenu css definícióban fontos elemek:

Az első három nélkül az oldal IE-ben szétcsúszik, a szélesség megadása nélkül pedig IE6-ban csak 70px lesz a lehullómenü szélessége.

Az “ul.submenu” és az “ul.submenu li a” css definíciónál is nagyon fontos a szélesség megadása, mert különben IE6-ban eltűnik a DropDown menü ha az első elemet elhagyjuk (tehát nem tudjuk kivűlasztani mondjuk a második, vagy harmadik elemet a mnüből).
Az a (link) elemnél nyiván a paddingot kivonjuk a szélességből, ezért lesz 40px-el kevesebb.

A harmadik dolog amire figyelni kell az, hogy mindenhol megadtam a margin-bottom értékét, mégpedig 0-nak. Ez is fontos, különben IE6 alatt nagy alsó margót rak minden menüelem alá.

Végül, mint IE6 mint IE7 alatt nem volt megfelelő az “ul.submenu” bal oldali margó értéke (65px), ezért teljesen kiment a DropDown menü a jobb oldalra. Erre a Conditional comments megoldással probálkoztam, vagyis:

De sajnos ez nem reagált semmit, úgyhogy megoldottam ezt is JavaScript-el:

Nézzük meg végül a lényeget, a HTML-hez tarotó jQuery kódot, amiben kivitelezzük a DropDown menüt:

Mit is csinál?

Az oldal betöltődése után létrehoz egy bool tipusú változót, melyben a DropDown menü aktivitását figyeljük, majd végigmegy az összes ddown-menu osztályon, és figyeli a hover esemény.
Amikor bekövetkezik, a hozzá tartozó submenu osztályt előhozza (show), majd ennek a megjelenített menünek figyeli a hover eseményét.
Ha bekövetkezik, akkor a submenu_active változó értéke igaz lesz, hiszen éppen a menüben vagyunk, ha pedig elhagyjuk, akkor elrejtjük, és a submenu_active értékét hamisra állítjuk.
Végül megnézzük, hogy a ddown-menu osztályba tartozó elemek hover eseményének végén a submenu_active igaz-e, és ha nem akkor a DropDown listát eltávolítjuk. Erre azért van szükség, mert olyan szituáció is elképzelhető, hogy valaki nem lép be a submenu-be, csak előhozza. Ha ez a sor kimaradna, akkor ilyen esetekben a sumenu nem tunne el.

Régebben írtam egy cikket a dinamikus form ellenőrzésről, és arra gondoltam leírom az eljárás modernebb változatát, azaz a hibaüzenetek nem alert ablakban jelennek meg, hanem DHTML segítségével.

Természetesen olyan kódot kell készíteni amely akárhány form-ra dinamikusan működik, tehát nem függ az input mezők számától, és az oldalon elhelyezett form-ok mennyiségétől.

A megoldást itt is a jQuery JavaScript könyvtár adja.

De mindenek előtt érdemes átnézni hogyan is kell felépíteni egy profi form-ot. Khauth György kollegám írt már erről néhány nagyon hasznos cikket:

• Regisztrációs űrlap tervezési minták
• Felhasználóbarát form kitöltés és ellenőrzés
• Ergonómikus formok készítésének irányelvei

Miután az alapelvek tanulmányozásával végeztünk készítsük el a form-ot:

Ha megnézzük a kód a css stílus felépítésével kezdődik, ez gyakorlatilag csak az átlátható kinézetet kezeli. A lényeg természetesen a form, és a form-on belüli osztályok elhelyezkedése!

A form-ot körülöleli egy div, a JavaScript kóddal ezen belül fogunk keresni. Ennek az a lényege, hogy akárhány form-on el tudjuk sütni az eljárást, ne kelljen minden form-nál újra és újra megírni, hozzáigazítani a form-hoz.
Három adatok kérünk be: keresztnév, vezetéknév, és email cím.
Ha megfigyeljük mindegyik alatt megtalálható a hozzá tartozó hibaüzenet is. A hibaüzenetek mindegyike a form-error osztályba van sorolva, így a kinézetük egységesen definiálható, és láthatóságuk egységesen kezelhető.
A hibaüzenetek nem csak a form-error osztályba tartoznak, hanem a hiba típusába is. Ezesetben mind a három input mezőhöz tartozik egy hianyos osztály, ami akkor jelenik meg ha üresen hagytuk, az email címhez pedig egy hibas osztály, ami akkor jelenik meg ha az email cím nem valós.

Nézzük meg a hozzá tartozó JavaScript kódot, melyben dinamikusan elleőrizzük az input mezők kitöltöttségét, és az email cím helyességét, valósságát is:

A dinamikus form ellenőrzésről írt cikkemhez képes van néhány eltérés, most ezekre térnék ki elsősorban.
Az első, hogy nem csak a mehet változót deklaráljuk, hanem a first_error bool típusút, és az error_obj html objektum típusút is. Ezek azt a célt szolgálják, hogy hibás kitöltés esetén le tudjuk tárolni melyik hiba volt az első a sorban, és automtaikusan oda ugorjunk az oldalon.
Utána láthatjuk a

részt, ami arra való, ha már egyszer hibásan töltöttük ki a form-ot, akkor eltűntetjük az összes hibaüzenetet, különben ottmaradhat második hibás kitöltés esetén olyan üzenet is, ami már nem aktuális.

Ezután ellenőrizzük a kitöltöttséget, tehát végigmegyünk a kötelező input mezőkön. Ha valameny nincs kitöltve akkor a szülö objektumának hianyos osztályát megjelenítjük. Végül ellenőrizzük az email cím helyességét, tehát hogy illeszkedik-e a szabványra, és ha nem a szülő html objektumának hibas osztályát megjelenítjük.

Végül ha nem találtunk hibát tobábbengedjük a submit eseményt, ha találtunk akkor az első hibás mezőhöz ugrunk.

Mert ugye, hiába a jó munkamódszer, ha rosz szofvereket használunk!

Hihetetlen, hogy mennyiben meg tudja könnyíteni, vagy éppen nehezíteni egy fejlesztőkörnyezet a programozó dolgát. Ha nem megfelelő a szoftver amit használunk, nagyon sok időt veszítünk, és párhuzamosan rengeteg ideget nyelünk. Semmelyik se valami jó ráadásul a kettő hatással van egymásra. Ha valami miatt egy egyszerű feladaton sokat kell dolgozni, akkor az felidegesít, es ha felidegesít akkor még lassabb lesz a munka…és ez így megy körbe-körbe, amíg a végén mar teljesen értékelhetetlenné válik az ember munkája.

Ugyebár ezt szeretnénk elkerülni ha egy mód van rá :-)

Létezik ennek az ellenkezője is, amit nagyon könnyen meg lehet szokni, és utána már teljesen természetessé válik, hogy az időm nagyrészét kreatív munkával tudom tölteni, nem pedig a forráskódom helyesírási hibáinak javításával, vagy éppen azzal, hogy az átláthatan szerkesztőbe kétszázadjára siklok el a megoldandó probléma felett.

A kód szerkesztésére én a Zend Studio-t javaslom. Pont annyit tud amennyit egy PHP fejlesztőkörnyezetnek tudnia kell. Kitölti a változókat, ismeri a php beépített fgv-eket és a leírásukat, tehát ha elkezdem beírni a fgv nevét, kiírja a lehetőségeket, melyik milyen paramétereket vár stb. Érzékeli a szintaktikai hibákat, és jelzi mi a gond…egy szóval pont arra jó amire akjuk használni.
Külön megemlíteném, hogy van Windows és Mac OS X rendszerre is.

Aztán van a css. Végülis a Zend is be tudja tölteni ezt a feladatot, de én sokkal jobbat használok.
Van egy CSS Edit nevű program. Teljesen tökéletes. Hátránya, hogy csak Mac OS X rendszeren létezik (ami nekem nem problema, de a pc felhasználók ebből kimaradnak). Windowsra van egy Style Master nevű program, de nem ismerem, csak azt hallottam róla hogy jó! A CSS Edit az viszont tényleg tökéletes nekem.
Alapból az tetszett meg benne, hogy bal oldalon mutatja a léterhozott definiciókat, és mindegyik úgy néz ki amilyen stílus igaz rá. Tehát pl ha az a.valami{} zöld, kövér, piros háttérrel, akkor úgy jeleníti meg a felsorolásban. Úgynevezett “Group”-okba lehet csopotosítani a css fájlon belül a definiciókat amik úgy működnek mintha könyvtárak lennének. Ez nagyon átláthatóvá teszi a kódolást. A másik nagy előnye, hogy nem kell beirogatni a css tulajdonságokat, mert felkínálja a lehetőségeket. Ha benyomok egy p betűt egyből előugrik az összes p-vel kezdődő tulajdonság, amikor kiválasztom az egyiket egyből berakja a pontosvesszőt a végére.
Kicsit más így css-t létrehozni, mint amiatt újraírni, mert elnéztem egy karaktert.

A site sminkjének elkészítésekor nem mindegy hogy mit használunk debuggolásra. Lényegesen lerövidíti a szerkeztési időt, ha a Firefox böngészőhöz tartozó Firebug nevű plugin-t használjuk. A lényege az, hogy az egérrel kiválaszthatjuk, hogy a weboldalon melyik elem tulajdonságait szeretnénk látni. Miután kiválasztottuk, látjuk a rá hatással lévő css tulajdonságokat, és ha ez önmagában nem lenne elég, akkor a meglévőket szerkezthetjük is, SŐT újakat vihetünk fel. Ez annyit jelent, hogy amikor felviszünk egy igencsak szétcsúszott sminket, akkor a Firebuggal rendberakjuk, és közbe párhuzamosan írhatjuk is a css fájlba a változásokat. Elmentjük, feltöltjük és a rendezett kinézet fogad minket anélkül, hogy harmincszor írtuk volna át a paddingot, hogy pixelre pontosan stimmeljen minden.
Egy másik remek dolog amire használni lehet az, hogy kijelzi a JavaScript hibákat, es mutatja a weboldal mögött, háttérben futó AJAX hívásokat, az átküldött adatokat, es a visszatérés eredméyét is. Gondoljunk csak bele, ha ez nem lenne, akkor ha elírunk egy AJAX utasítást csak annyit látunk az egészből hogy nem müködik, míg ezzel egy kattintás, és már mutatja is hogy nem létezik az URL amit meghívtunk, vagy ami a hiba oka volt.
Van egy hátulütője is a dolognak! Az az érdekessége, hogy a Firefox nem bírja a saját plugin-jét :-) Ha használjuk, egy idő után nem létezik a böngészőbe a tabulátor és az enter. Ez azonban egy Firefox restart-al könnyedén megoldható.

Én ezeket a szoftvereket használom nap mint nap, és hihetelneül meggyorsítják a munkámat, mindenkinek csak ajánlani tudom.