jQuery

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.

<script type="text/javascript">
function show_tr_element(object) {

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