HTML

Rendszeresen megkeresnek azzal a kéréssel, hogy hogyan kell egyedi Drupal sminket készíteni, mert nem akrarnyak egy már elkészített contrib fejlesztést használni.
Én is általában azt szoktam javasolni, hogy inkább készítsük el saját magunk a meglévő psd alapján a sminkünket, mert igaz az esetek legtöbbségében meg lehetne oldani valamely már meglévő fejlesztés css-ének módosításával, de az mégsem az igazi. Egyrészt azért, mert a contrib sminkek több dologra vannak felkészítve mint amire nekünk szükségünk van, másrészt a végeredményben úgyis egy 3000 soros css-t kapunk amiben egy rakás osztály, vagy id több helyen van definiálva. Másrészt ahogy a contrib modulokba se szokás beleirkálni, szerintem a sminkeket se kell piszkálni.

Ha saját sminket készítünk, saját tpl és css fájlokkal akkor ezek a problémák kiküszöbölhetőek, és nem egy ördöngös feladat.

Leszögezném, hogy ez a bejegyzés csak az alapokról szól, nagyon sok egyéb dologra felkészíthetjük a sminkünket, pl: $logo, $site_slogan, $mission, $search_box stb. Az elérhető változókat itt lehet megnézni.

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:

<li class="menu-129"><a class="menu-129" href="/"><span class="primary-title">Nyitólap</span></a></li>

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

ul.primary-links span.primary-title {
display: none;
}

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:

/**
 * Csak kepekbol allo menu elkeszitesenek alapjai
 *
 * @param unknown_type $links
 * @param unknown_type $attributes
 * @return HTML
 */
function phptemplate_links($links, $attributes = array('class' => 'links')) {
  global $language;
  $output = '';
 
  if (count($links) > 0) {

É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):

<!--[if lt IE 7]>
  <link rel="stylesheet" href="http://www.kalman-hosszu.com/ie-fix/ie.css" type="text/css" media="screen" />
<![endif]-->

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:

img {
  behavior: url(/images/png.htc);
}

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.

Ü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:

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:

<style type="text/css">
.form-row {
  padding-bottom: 10px;
  width: 290px;
}
 
.form-row label {
  float: left;
  width: 100px;
  padding-right: 10px;
}
 
.form-row input {
  float: left;
  padding: 3px;
  width: 160px;
}
 
.clear {
  clear: both;
}
 
.form-error {
  text-align: center;
  color: #C52020;
  border: 1px solid #DD7777;
  background: #FFCCCC;
  margin: 10px 0;
  display: none;
}
</style>
 
<div style="margin: 0 auto; width: 300px;">

Olyan oldalaknál ahol egy bizonyos node tipushoz sok beviteli mező tartozik elvárás lehet, hogy ne kelljen minden módosításnál lemenni a lap aljára.

A logikus megoldás az, hogy az ENTER gomb lenyomásával jelzi a felhasználó, hogy végzett a tartalom módosításával, feltöltésével.

Az eseményt a jQuery JavaScript könyvtárral könnyen meg lehet oldalni, utána pedig már csak egy nagyon egyszerű Drupal modult kell hozzá írni, és minden olyan weblapon alkalmazni lehet ahol szükség van rá.

Íme a JavaScript fájl amint majd hozzárendelünk az oldalhoz:

var writing   = false;
var node_edit = false;
 
$(document).ready(function() {
 
  if ($('#node-form').length) {
    node_edit = true;
  }
 
  if (node_edit) {
    $('.form-textarea', $('#node-form').parent()).focus(function() {
      writing = true;
    });
    $('.form-textarea', $('#node-form').parent()).blur(function() {
      writing = false;
    });
  }
});
 
$(document).keypress(function(event) {
  if (event.keyCode == 13 && !writing && node_edit) {
 
    if (confirm_submit()) {
      $('#edit-submit', $('#node-form').parent()).click();
    }
  }
});
 
function confirm_submit() {
  var agree = confirm("Valóban menti a tartalom változásait?");
  if (agree) {
    return true ;
  } else {
    return false ;
  }
}

Menjünk végig a kódon, mi miért van!

Először is a writing változó, a node_edit változó és az oldal betöltésekor lefutó fgv-ek, vagyis a $(document).ready(function()).

Sokszor felmerül a kérdés, hogy lehet a form mezőinek kitöltöttségét egyszerűen és újrahasznosíthatóan megírni.

Erre egy nagyon jó megoldást ad a jQuery JavaScript könyvtár.
A lényeg az, hogy egy kód megírásával lehessen ellenőrizni az oldalon található összes form kötelező mezőinek kitöltöttségét, függetlenül attól, hogy mely formnak hány kötelező mezője van.

Ehez fontos, hogy a form-okat a megfelőle stratégia szerint építsük fel...a lényeg a helyes osztályok használata. Ha a megfelelő input mezőket a megfelelő osztályokba soroljuk, akkor a megoldás néhány sor JS-el megoldható, és el lehet sütni akármikor a jövőben is.

Néhány napja az egyik ügyfelünknek kellett elkészítenem egy site részletet, ahol az oldalak összességét tekintve, kb. 20 formot kellett elhelyezni, namost ez sok, és ha mindet a szabványos JS módszerekkel próbáltam volna ellenőrizni (a mezőket ID alapján lekérdezem és ellenőrzöm, hogy ki van-e töltve), akkor sok kódot kellett volna írni, valamint a hibalehetőség is nagy. Ahol nagy a hibalehetőség azt minimum tízszer annyi idő tesztelni, mint egy megfelően elkészített form ellenőrzést.

Vegyünk egy egyszerű példát egy négy mezőböl álló form-ra, melynek három kötelező mezője, amiből az egyik email, tehát az email cím valósságát is ellenőrizni kell.

A form a következő képp néz ki:

<div class="form">
 
Ide jöhet a form bevezető szövege
<form class="feliratkozo-form" action="#" method="post">
<div style="display: block; width: 70%; margin: 0 auto;">
<div class="form-row" style="clear: left;">
        <label style="float: left; clear: left;" for="lastname">Vezetéknév</label>
<input id="lastname" class="register-input-narrow kotelezo" name="mssys_lastname" type="text" /></div>
<div class="form-row" style="clear: left;">
        <label style="float: left; clear: left;" for="firstname">Keresztnév</label>

Biztos sokakban felmerült már a kérdés, hogy hogyan lehet olyan hyperlink-et készíteni ami új ablakban nyílik meg, mégis valid.

Ugyebár megvan a lehetőség HTML segítségével új ablakba nyíló hivatkozás készítésére, de sajnos a hyperlink-nek nincs valid target attributuma.

A kellő eredményt hozza a következő kódrészlet, de nem sajnos nem lesz valid:

<a href="http://drupal.org/" title="http://drupal.org/" target="_blank">drupal.org</a>

Én a megoldásra a jQuery JavaScript könyvtárat használom. Ez amúgy alapól benne van a Drupal CMS-ben. Egy nagyon egyszerű eljárást alkalmazok:
Azokat a hyperlink-ekekt amiket új ablak szeretnénk megnyitni elhelyezem a new_window osztályba, és az oldal betöltődésekor a jQuery segítségével helyettesíthetem a target="_blank" paramétert.

<script type="text/javascript">
$(document).ready(function() {
  $('a.new_window').click(function(){
    window.open(this.href);
    return false;
  });
});
</script>
 
<a class="new_window" href="http://drupal.org/" title="http://drupal.org/">drupal.org</a>