Gondoltam körülnézek a neten, hátha találok valamit, amivel fel tudom dobni az összhatást, és mondhatom, sikerrel jártam: több millió friss, igényes és főleg ingyenes ikont találtam. Hogy hol?

FindIcons

A keresésem fő forrása a FindIcons nevű, ~200 000-es ikon- és ~2000-es ikonpakk-adatbázissal rendelkező gyűjtőhely. Nagyon szépen lehet filterezni a keresést, kulcsszó, méret, licensz és stílus szerint. Csak ajánlani tudom, hibátlan választás.

IconFinder

Hasonlóan igényes, és még a nevében is könnyen összekeverhető a FindIcons-hoz az IconFinder, a maga ~160 000 ikon és kb 500 ikoncsomag bázisával. Szintén kereshető kulcsszó, méret és licensz szerint, ezen kívül van még egy százezres óriáscsomag, ami azért elég tetemes.

We Love Icons

A We Love Icons oldal inkább egy gyűjtő, mint rendszerező hely, hiszen külső oldalakra (pl deviantArt) mutat. Jól átválogatott gyűjtemény, ahova tényleg csupa igényes csomag kerül ki, kb 450 csomag. Egyetlen hibájának talán azt lehet felróni, hogy a kereshetőség nem elég mély, ezért sokszor nem lehet tudni, hogy az adott ikoncsomag használható-e üzleti célra.

WebAppers

A WebAppers nem csak ikonok gyűjtőhelye: mindenféle webfejlesztéshez hasznos dolgot rendszereznek itt, kezdve a Flash videólejátszóknál, át a jQuery-s képgalériákon, egészen a betűtípusokig. Ez bizony kötelező a Google Readerben!

Icon Archive

A fentieknél kisebb és kevésbé igényes oldallal rendelkező, de sokszor hasznos az Icon Archive, ahol nagyjából 30 000 ikon található.

Egyelőre ennyi elég lesz.

Írásomban összeszedem, hogy miként is működik egy jQuery program és hogy mik a legalapvetőbb effekt utasítások, amiket használni érdemes és kell. Akik egyáltalán nincsenek tisztában a HTML kóddal és az alapvető Javascript nyelvvel, azok először ezeknek nézzenek utána, mert ahhoz, hogy az ember megértsen egy komplexebb nyelvet, jobb ha ismeri annak az alapjait. Persze azért nem kell az Assembly-vel kezdeni!

A Javascripttől eltérően a jQuery parancsok elég összetettek tudnak lenni, főleg mivel ezt a library-t azért hozták létre, hogy meggyorsítsa, megkönnyítse a webprogramozást, és hogy minél kevesebb sor megírásával lehessen létrehozni minél felhasználóbarátabb oldalakat. Minden parancs így néz ki:

$(DOM elem).valami();

• A $ jel a “jQuery” rövidítése, ez jelzi a JS számára, hogy itt most egy jQuery objektumról lesz szó. Ha mondjuk használtál már Ruby on Rails-t akkor ismerős lehet ez a fajta jelölés. Lényegében ennyi, de érdemes még tudni, hogy a $ helyettesíthető a jquery kiírásával, tehát: jquery(DOM elem).valami();
• A (DOM elem) az a HTML elem amire hivatkozol a jQuery parancsban. Ezen az elemen fog végrehajtódni a meghívott függvény
• A .valami(); a jQuery függvény, amely meghívásra kerül. Lehet ez a legegyszerűbb hide(), ami eltünteti a megnevezett elemet, vagy egy összetett AJAX hívás is.

Tulajdonképpen ez volt a legelrettentőbb rész. Érdemes tudni, hogy egy DOM elemhez több függvény is rendelhető, tehát a $(DOM elem).valami1().valami2(); is nagyon szépen fog működni; és ebben van az igazi potenciál. Most, hogy ezt megértettük nézzünk meg a legegyszerűbb függvényeket: az effekteket.

Effekt függvények

A beépített effekt függvények nagy része a következő felépítéssel működik:

$(elem).effekt([speed, callback]);

• A függvények paraméterei opcionálisak, de közülük a speed, azaz sebesség az amit legtöbbször használni kell. Meg lehet adni ezt ‘slow’, ‘normal’ és ‘fast’ értékeken túl milliszekundumban is (1000 ms = 1 másodperc). Ez lesz az az időtartam, ami alatt a függvény végrehajtódik; ez a lefutási idő.
• A callback, vagyis visszahívás paraméterben megadható, hogy mi történjen miután lefutott a függvény. Például amint véget ér az adott parancs, visszakapjuk egy alert()-ben a számolás értékeit.

Volt, nincs (show(), hide(), toggle())

Szerencsére a jQuery függvényei többsége nevében hordozza a funkcióját is, ezért ha nem is ismered a függvényt, nagyon gyorsan rá lehet jönni a működésére. Így van ez a show() és a hide() parancsoknál is: míg előbbi megjelenít egy rejtett elemet, utóbbi eltünteti a célelemét. Mindkét függvény használható speed és callback paraméterrel és nélküle, de fontos megjegyezni, hogy a sebesség paraméter nélkül csak megjelenik/eltűnik a kiválasztott DOM elem; megadásakor azonban egy kis animációt kap.

A toggle() egy kicsiben eltér a show() és hide() függvényketől, ugyanis ez tulajdonképpen a kettő kombinációja. Paramétereinek megadhatjuk a már ismert speed és callback paramétereket, de egy kifejezést is (pl. osztas++ % 2 == 0, azaz ha az “osztas” változó kettővel történő maradékos osztásának eredménye 0), amely teljesülésekor végrehajtódik az utasítás.

Lássunk is egy rövid példát. HTML kód:

Jelenítsd meg (show)
Tüntesd el (hide)
Jelenítsd meg és tüntesd el (toggle)

jQuery kód:

$('a#show').click(function() {
  $('p.pelda_1').show();
});
$('a#hide').click(function() {
  $('p.pelda_1').hide();
});
$('a#toggle').click(function() {
  $('p.pelda_1').toggle('slow');
});

A kis programunk mindössze annyit csinál, hogy a megadott linkekre való kattintáshoz  (click() függvény [erről egy későbbi postban]) rendel show, hide és toggle effekteket. Itt nézheted meg működés közben a demot. A show és hide nem kapott speed paramétert, míg a toggle-re tettem, csak azért, hogy lássátok, hogy milyen is az.

Csúszkálás (slideDown(), slideUp(), slideToggle())

A slide függvények nagyon hasonlóan működnek a show, hide függvényekhez, lényegében annyiban különböznek, hogy míg az előbbiek a speed megadásával függőleges és vízszintes irányba animálták a függvényt, a slide függvények csak függőleges irányba teszik ezt. Nem ér meg külön példát, a jQuery dokumentációban van róluk bőven leírás, példával.

Eltűnés/feltűnés (fadeIn(), fadeOut(), fadeToggle())

Eljutottunk egyik kedvencemhez: a fadeIn(), fadeOut(), fadeTo() ugyanis az a függvényhármas, amelyiket a legnagyobb előszeretettel használom. Szerintem baromi jól tud kinézni egy jó helyre rakott, szépen animálódó üzenet a usernek, főleg ha az ugyanilyen szépen be is csukódik utána. A fadeTo() a paraméterben kapott értékig csökkenti a függvény láthatóságát, míg a fadeIn() és fadeOut() a megadott sebességgel csökkenti az elem opacity CSS értékét, majd mikor ez elért a 0-hoz, rádob egy “display: none”-t, tehát eltűnteti teljesen, hogy ne foglalja a helyet. Na ez gondokat okozhat néha.

A fade effektek egyik fontos tulajdonsága, hogy míg az eddig megismert függvények folyamatosan “nyitják ki” a célobjektumot, ezzel lentebb tolva/fentebb húzva az alatta és körülötte lévő elemeket; a fade az animáció befejeztével és kezdetekor a DOM elem elfoglalja a megfelelő méretű helyét és így tűnik el(ő). Ez azt jelenti, hogy ha egy oldal közepén lévő elemet animálsz meg fade-del, akkor az animációs idő egy időpillanatában ugrani fog egyet az oldal magassága/szélessége, erre pedig figyelni kell mert zavaró lehet!

A fade-hez készített példában az eltüntetendő elem után raktam egy másikat, hogy lássátok miről beszéltem pontosan. Megoldásként vagy azt javaslom, hogy olyan elemeknél használjátok a függvényt, amik nincsenek körülvéve sok másik elemmel, vagy CSS-sel pozicionáljátok be az elemet egy felsőbb rétegre.

A központi effekt (animate() és stop())

Az összes eddig felsorolt effekt függvény visszavezethető egy központi animációs függvényre, az animate()-re. Ez az amivel mi magunk is létrehozhatunk hasonló mozgásokat a DOM elemekre, csupán egy kis CSS tudás kell hozzá. Egyszerűen az animate() paraméterei között meg kell adnunk, hogy mely CSS tulajdonságokat változtassa meg a függvényünk; például a 400px széles és magas <p> csökkenjen 200×200-ra, a láthatósága pedig legyen fele:

$('a#animald').click(function() {
  $('p.pelda_3').animate({width: "200px", height: "200px", opacity: 0.5}, 1500);
});

Itt a kipróbálható példa. Az animate() az egyik legfontosabb effekt, hiszen ezzel nagyon komplex animációkat hozhatunk létre, de vannak korlátok; a háttérképet például csak vízszintesen lehet animálni, ami kicsit idegesítő tud lenni, szerencsére azonban van erre egy plugin.

Feltűnhet, hogy a példában alkalmaztam a stop() függvényt az animate() előtt (a függvények összefűzhetőek, mint már említettem!); ez annyit csinál, hogy megállítja az éppen zajló animate()-et, így adva szabad utat a következő animáló függvénynek. A stop()-ról van egy egészen jó példa a jQuery dokumentációban.

Mára ennyi. Következő alkalommal megnézünk egy-két fontos esemény-függvényt (pl. rákattintás, fókuszba kerülő elemek) és néhány selectort (ezekkel tudunk bizonyos elemekre hivatkozni és kezelni jobban a DOM elemeket). Addig is gyakoroljatok ezekkel! Ha valami nem világos, nyugodtan kérdezzetek a hozzászólásoknál!

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

- jQuery.com

Láttátok a főoldalon a portfólióm részt? Nagyjából egy óra alatt megvolt, a nulláról. Vagy a Webidea legördülő menüit? Fél óra. Sorolhatnám az ehhez hasonló példákat, vagy írhatnék a végtelen felhasználási lehetőségről, de ezzel sokan foglalkoztak már, így inkább egy kicsit az általános működésről és a jQuery User Interface-ről, azaz a jQuery-hez fejlesztett grafikus segédkörnyezetről írnék.

A jQuery a(z egyik) leghasznosabb JavaScript fejlesztői környezet, amivel valaha dolgom volt. Ez a mondat bátran hagyhatja el számat, mert a cucc használata annyival megkönnyíti a webfejlesztési tevékenységem, mint például a Google a böngészést. Nagy szavak, de mindjárt meggyőzlek benneteket. Nagyjából egy éve használom, ez idő alatt rengeteg hasznos információt megtanultam róla: az alapvető működést, a programozást egyszerűsítő funkcióit; a “hogyan”-ra és a “hol”-ra jöttem rá. Nem állítom, hogy nincsenek még nekem is kisebb sötét foltok, de azért már elég jól eligazodom benne. Tekintsük át, hogy mit tud ez az 50 kbyte-os kis JS library.

Az első és talán legfontosabb tulajdonsága a DOM megváltozott kezelésében van. Amikor egy JavaScript alkalmazást írsz és sok HTML elemre kell hivatkozni és azokkal operálni, elég nehézkes és egy idő után átláthatatlan lesz a kód. Tegyük fel, hogy egy űrlapot kezelsz éppen és a benne lévő 3 <label> színét szeretnéd lecserélni, mert a felhasználó elfelejtette kitölteni a mezőket. Az űrlap:

Első mező:

Második mező:

Harmadik mező:

Ezt sima JS-ben így csinálod:

document.getElementById("elsomezo").style.color = 'red';
document.getElementById("masodikmezo").style.color = 'red';
document.getElementById("harmadikmezo").style.color = 'red';

Míg jQuery-ben:

$('label#elsomezo, label#masodikmezo, label#harmadikmezo').css('color', 'red');

Melyik tűnik egyszerűbb és elegánsabb megoldásnak? Innen már csak azt kell elképzelni, hogy ha egy három soros kódon ennyit tudtunk egyszerűsíteni, akkor mi lesz a 4-500 soros JS alkalmazásokkal!

A második, szintén fontos tulajdonság a beépített effektek létezése. Egy sor beírásával tűnheteted el, hozhatod elő, csukhatod be és nyithatod ki a HTML elemeket, összesen 9 beépített effekt áll rendelkezésre. Ezeken túl használható még az alap animáló függvény, amiben beállíthatod, hogy milyen módon mozogjon egy elem, például az alaphelyzetből egy elfehéredéssel csukódjon össze, miközben a betűmérete is folyamatosan csökken. Egy rövid demonstráló példa:

Kattints rám, hogy eltűntessem/előhozzam az alábbi bekezdést-t

Csukj be, nyiss ki!

A forrása pedig:

$('a.pelda').click(function(){
$('blockquote.pelda').slideToggle();
});

Ugye, hogy milyen egyszerű? Vajon mennyi idő lenne ezt megírni szimpla JavaScripttel?

A jQuery önmagában egy olyan számtalan extra tulajdonsággal rendelkező eszköz, amit minden webfejlesztőnek ismernie kéne, hogy sokkal sokszínűbb, interaktívabb és használhatóbb weboldalakat készíthessenek vele. Az 1.4-es verzió megjelenésével pedig újabb lehetőségeket adtak a kezünkbe: a változtatások dokumentációja 16 teljesen új függvényt és több tucat egyéb fejlesztést tartalmaz.

Térjünk rá a jQuery UI-re. Mint már említettem, ez a jQuery-hez fejlesztett grafikus környezet: itt jön képbe az interaktív weboldal, hiszen olyan extrákat tesz hozzá ez a kis plugin az alap programhoz, mint például a mozgatható, az átméretezhető, vagy a rendezhető sorrendű HTML elemek. Ezen felül jó néhány kis widget (dátum választó, felugró ablak kezelő, csúszka és egyebek) valamint számtalan felturbózott jQuery effekt áll rendelkezésére a fejlesztőnek.

Melyik a meggyőzőbb?

A jQuery UI hasznos kiegészítő társa a jQuery-nek, mindenképpen ajánlott egy komolyabb portál elkészítéséhez, de akár a saját weboldalon is hasznos lehet, főleg mivel a plugin letöltésénél teljesen személyre szabható, hogy melyik funkciókat szeretnénk a UI-n belül használni, így nem kell a felesleges függvények letöltésével terhelni a szervert.

A kérdés tehát nem az, hogy a webfejlesztőknek használnia kéne-e a jQuery-t, hanem az, hogy feltegyék-e mellé a jQuery UI-t is. Az 1.4-es fejlesztői környezet már annyira sokrétű és fejlett, hogy aki nem is gondolkodott el a használatán, az pont olyan, mint aki szándékosan levágja a fél karját, csak hogy megnehezítse a saját dolgát. Aki jobban el akar mélyedni a jQuery-ben, annak ajánlom a teljes dokumentációt és a különböző tutorialokat.

Szóval nekiálltam, hogy akkor megtanulom a jQuery Ajax metódusait, de szerencsére ráakadtam egy nagyon hasznos kis kerülőre. Ezt fogom most megosztani veletek.

Az első és legfontosabb dolog, hogy megértsük a <form> működését. A form – magyarul űrlap – egy olyan HTML tag, amivel egyszerű kitölthető mezőket tolhatunk a felhasználó arcába, ezzel rákényszerítve, hogy regisztrációkor megadja nekünk a haja színét és a kedvenc parfümének illatát. Ezek közé a mezők közé tartozik a fájl mező is. Az űrlap működése nagyon egyszerű, beillesztésekor megadjuk, hogy milyen módon (method), és hova (action) küldje az információkat, amiket a mezőkben megadtak a felhasználók.

A milyen módon rész POST vagy GET lehet, attól függően, hogy mennyire titkosan akarjuk küldeni az infokat. Elég másként lehet feldolgozni az adatokat, a GET ugyanis a címsorban küldi az adatokat (pl regisztracio.php?felhasznalo=jozsi&jelszo=123456), míg a POST titkosan küldi tovább, de ezért ha használni akarunk egy-két adatot további oldalakhoz, akkor azokat tovább kell vinni valahogy (PHP-nál nagyjából úgy mint ahogy a GET metódus teszi).

Az űrlap hova része a feldolgozó fájl (esetünkben egy PHP lesz), ami kezeli a megkapott adatokat és tárolja vagy továbbküldi.

A formokban betöltött fájlokkal az a baki összesen, hogy azokat PHP-ban nem $_POST és nem is $_GET, hanem $_FILES előtaggal kell feldolgoznunk, hogy jussunk valahova. Ahhoz, hogy megkapjuk a kiválasztott fájlokat, az űrlapnak meg kell adnunk még egy attribútumot, ez pedig az enctype. Az enctype igazából az elküldött adatok titkosításának módja (nem ugyanaz mint a POST/GET), a fájlok feltöltéséhez szükséges értéke pedig enctype=”multipart/form-data”.

Nézzük is akkor hogy mire lesz szükségünk. Lesz egy form, ahol kiválasztjuk a fájlt; lesz egy PHP ami feldolgozza a fájlt; és egy JavaScript ami a vizualizációért felelős. Az űrlap nem lesz túl bonyolult, lássuk csak:

  <form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" >
    Fájl: <input name="myfile" type="file" />
    <input type="submit" name="submitBtn" value="Upload" />
  </form>

Igazából néhány extra mezőre szükségünk lesz, hogy a JS is jól működjön:

<body>
  <p id="f1_upload_process">Feltöltés folyamatban...</p>
  <p id="result"></p>
  <form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
    Fájl: <input name="myfile" type="file" />
    <input type="submit" name="submitBtn" value="Feltöltés" />
  </form>
  <iframe id="upload_target" name="upload_target" src="#" style="width:0px; height:0px; border:0px;"></iframe>
</body>

Mint látjátok bekerült két <p> bekezdés és egy <iframe> belső frame, de ez utóbbi el van rejtve (width: 0px, height: 0px;). A keretre azért van szükségünk, mert ha megnézitek, az űrlapunk megkapta target attribútumnak az <iframe> nevét; magyarán oda fog betöltődni az action=”upload.php”. Ezzel le is lőttem a legnagyobb poént, amivel a fájlfeltöltés AJAX-szerűvé válik.  Egy finom kis CSS-t ráhúzunk az oldalra:

#f1_upload_process{
  z-index: 100;
  position: absolute;
  visibility: hidden;
}

Ezzel biztosítottuk, hogy a #f1_upload_process egyelőre láthatatlan legyen, mert majd a JavaScript teszi láthatóvá, a fájlfeltöltés elindításakor. Sok szó esett már a JavaScript részről, nézzük is meg, hogy mit tud. Egyelőre csak a startUpload() függvényt hívtuk meg az űrlap elküldésével. Ez a függvény igazából csak annyit tesz, hogy a már említett #f1_upload_process részt megmutatja nekünk és engedélyezi a form elküldését:

function startUpload(){
  document.getElementById('f1_upload_process').style.visibility = 'visible';
  return true;
}

A hangsúly nem is ezen a függvényen van, hanem a stopUpload()-on, ami a feltöltés eredményét fogja nekünk kiírni. Ezt a függvényt a PHP fájlból fogjuk meghívni majd.

function stopUpload(success) {
  if (success == 1){
    document.getElementById('result').innerHTML = '<span class="msg">Sikeres volt a fájlfeltöltés!</span>>';
  } else {
    document.getElementById('result').innerHTML = '<span class="emsg">Hiba történt a feltöltés során!</span>';
  }
  document.getElementById('f1_upload_process').style.visibility = 'hidden';
  return true;
}

A függvényt egy success paraméterrel együtt hívhatjuk meg, ami az eredménynek megfelelő üzenetet dob ki a <p id=”result”> bekezdésünkbe. A vizualizációval meg is volnánk, nézzük meg, hogy mi is történik a háttérben. A PHP az űrlapból megkapott fájlt egyszerűen felmásolja a gyökérkönyvtárjába, majd 1 másodperces pihenő után (hogy a nagyon kicsi fájloknál is látszódjon, hogy történik valami ) meghívja a stopUpload() JS függvényt.

<?php
  $destination_path = getcwd().DIRECTORY_SEPARATOR;
  $result = 0;
  $target_path = $destination_path . basename( $_FILES['myfile']['name']);
  if(move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {
    $result = 1;
  }
  sleep(1);

  echo('<script language="javascript" type="text/javascript">
    window.top.window.stopUpload(' . $result . ');
  </script> ');

?>

Ezzel tulajdonképpen meg is volnánk. A dolog működik szépen, én is használom, használjátok ti is egészséggel! Ha bármilyen kérdés vagy észrevétel van, jöhet fórumba!

Forrás: ajaxf1.com

A nyelv maga jelenleg a kettes és hármas verzió között stagnál, a legtöbb böngésző (Firefox, Safari, Chrome) támogatja a hármas verzió nagyrészét (kb 80%), de a jó öreg IE persze megint csak le van maradva: bár az IE8 kezd ledolgozni a lemaradásából, még így is sok-sok munkaórát kell beleölni a sitebuildereknek, ha CSS3 kód részeket is írnak IE8-ra.

A továbbiakban megnézzük, hogy hogyan is működik és mikre is lehet használni a CSS-t.

Az első és legfontosabb tanácsom, hogy ne kezdjünk el CSS-t írni a weblapunkhoz mielőtt nem vagyunk tisztában nagyjából a HTML nyelvvel, a CSS ugyanis erre épül, ugyanakkor a HTML teszi azt használhatóvá és használandóvá. A HTML sajnos elég szegényes készletekkel rendelkezik a webdesignerek számára, az a néhány meglévő stíluselem pedig csak körülményesen használható és minden egyes alkalommal be kell írni, amikor a szövegben vastaggal írt részeket mondjuk piros színűre akarod színezni:

<font color="red"><b>ez a szöveg piros</b></font>, ez nem piros

Na most ezt el lehet képzelni egy nagyobb táblázat megformázásánál, amikor mondjuk minden egyes fejlécnél ezeket be kell írni és a kiemelt elemeknél is hasonló eszközöket kell alkalmazni… A legnagyobb problémája igazából az, hogy egy idő után átláthatatlanná teszi a forrást.

A CSS kód egyszerűen a <style type=”text/css”>…</style> tagek közt a HTML fájlba illesztve aktivizálódik. Persze a komolyabb oldalakhoz már külön fájlokat használnak a fejlesztők (a ZoltanHosszu.com CSS fájljai: zoltanhosszu.css, zoltanhosszu_hu.css), de egyelőre mi még megelégedhetünk a <head> részbe illesztett kóddal. A fentiekkel szemben a CSS verzió így néz ki:

<style type="text/css">
b {
   color: red;
}
</style>

A HTML hozzá pedig:

<b>ez a szöveg piros</b>, ez nem piros

Ezt a rövid kódot a forrásfájlba illesztve az összes <b> taggel jelölt rész piros színűre változik. Bár ezen a rövid szövegrészen első ránézésre úgy tűnhet, hogy bonyolítom itt az életetek, higyjétek el, hosszútávon nagyon megéri!

A leghasznosabb dolog a CSS-ben talán az, hogy különböző HTML tageket, mint pl <a>, <p>, <h1>, mind-mind egységes stílussal láthatunk el; ha pedig módosítani szeretnénk valamit a honlapon, akkor csak egy dolgot kell megkeresni, átírni és voila, mindenhol megváltozott a linkek színe, a fejlécek betűtípusa és a bekezdések sorköze:

<style type="text/css">
a {
  color: #800;
  font-weight: bold;
}

p {
  line-height: 1.2em;
}

h1 {
  font-family: georgia, serif;
}
</style>

A nyelv maga nagyon könnyen és gyorsan tanulható, hiszen a legtöbb stíluselem elég jól magyarázza önmagát (pl line-height: sorköz; width: szélesség; color: betűszín, border: keret) és ha egyszer megértette az ember a működését, nagyon szép dolgokra képes.

Sajnos megvannak a maga hátulütői is a nyelvnek, használatával igazán meg lehet tapasztalni a böngészők közti különbségeket: még a Firefox 2 és a Firefox 3 között is kellemes kis eltérések vannak (annak ellenére, hogy elvileg mindkettő megfelel a web standars-nek), az Internet Explorert pedig hadd ne említsem.

Mindezek ellenére számomra a webfejlesztés egyik legkedvesebb eleme.

Remélem érhető volt a cikk, ha pedig bármilyen kérdésetek van, ne féljetek azt a hozzászólásoknál feltenni; de persze jöhetnek javaslatok is! A következő CSS-sel kapcsolatos cikkben megnézünk néhány felhasználást (pl hogy mik is azok a CSS osztályok és hogyan is kell őket használni), amivel nagyon leegyszerűsödik a HTML oldalak formázása.

Először is vegyük gyorsan sorra, hogy mire van szüksége az embernek egy lapozhatóan megjelenő tartalomhoz: honnan kezdődjön a lekérdezés a MySQL táblából és meddig tartson. Igazából a legnehezebb dolog itt nem a táblából való lekérdezés, hiszen azt egy sima “SELECT * FROM tabla LIMIT x, y” paranccsal megoldhatjuk, ahol x az eltolás mértéke (tehát, hogy honnan kezdjük az adatok lekérdezését), y pedig a megjelenítendő elemek száma (hmm, milyen érdekes, pont ezekre van szükségünk egy jól működő lapozás funkcióhoz, micsoda szerencse); a bonyolult funkció a lapok számának dinamikus kiírása, mondjuk egy ilyesmi formában:

Ezt fogjuk most megírni.

Létrehozunk egy új függvényt mondjuk lapozas néven, és paramétereknek megadjuk az eltolás mértékét és a megjelenítendő elemek számát. A paramétereknek megadunk egy alap értéket, hogy ha a meghíváskor nem kap a függvény értékeket, akkor is tudjon szépen dolgozni.

Szükségünk lesz néhány változóra is: előző oldal, aktuális oldal, következő oldal, az oldalak száma, az oldalakon megjelenítendő összes elem száma, valamint egy olyan változóra ami az aktuális oldalszámtól jobbra és balra kiszámítja, hogy hány oldalt mutassunk: egy intervallumhatárra. Ez utóbbi változót így leírva lehet kicsit nehéz megérteni, de ahogy haladunk látni fogjátok a funkcióját.

function lapozas($offset = 0, $show = 12) { //Lapozás függvény - $offset az eltolás értéke, $show a megjelenítendő elemek száma

	global $osszes; //Itt megkapjuk az összes elem számát a táblából, ezt a lekérdezéskor kell kiszámolnunk.

	$elozo = $offset - $show; //Előző oldal kiszámítása
	$kovetkezo = $offset + $show; //Következő oldal kiszámítása
	$aktoldal = (int)($offset / $show) + 1; //Aktuális oldal
	$oldalszam = $osszes / $show; //Oldalak számának kiszámítása

	if ($oldalszam > (int)($osszes / $show)) $oldalszam = (int)($osszes / $show) + 1; //Oldalszám kerekítése

A változóknak kiszámoljuk a kezdeti értékeit és ezzel meg is van az egyik lényeges adat: a kezdeti értékek. Ezekre nagy szükségünk lesz a következő lépéseknél, hiszen elég sokat fogunk számolni velük. Létrehozunk egy rendezetlen listát (<ul>), az oldalszámokat pedig ebbe fogjuk pakolgatni, majd betesszük első elemnek az “előző oldal” kiírást és linket.

	if ($oldalszam > 1) { //Ha van elég oldal, hogy megjelenítsük

		print('<ul class="scroll">'); //Rendezetlen lista létrehozása, ebben tároljuk az oldalszámokat

		if ($elozo >= 0) print('<li><a href="oldal.php?&offset=' . $elozo .'">« elõzõ oldal</a></li>'); //Előző oldal kiírása, ha nem az első oldalon vagyunk

Innentől két részre bontottam a függvényt, először is azért, mert szerintem 10 oldal alatt nem érdemes a …-os részt belerakni, mert 10-12 link még bőven kifér és átlátható; 10 felett viszont már a $range értékkel is számolgatunk majd.

Szóval 10 oldal alatt egy sima for ciklussal bedobáljuk az oldalszámokat a megfelelő linkekkel a listába. Egy kis finomság: az aktuális oldalt vastaggal fogjuk írni.

		if ($oldalszam < 10) { //Oldalszámozás, ... nélkül

			for ($i = 0; $i < $oldalszam; $i++) {
				$off = ($i * $show) + ($offset % $show); //Offset számítása
				$oldal = $i + 1; //Kiirandó oldalszám megadása

				if ($off == $offset) $oldal = "" . $oldal . ""; //Aktuális oldal vastagon írva

				print ('<li><a href="oldal.php?&offset=' . $off . '">' . $oldal . '</a></li>'); //Kiiratás
			}

		}

Ezzel meg is volnánk, most jön az érdekes rész, a …-ozás ha sok oldal van. Itt már szükségünk lesz a $range értékre, ami a már fent említett intervallumhatár értéket fogja tárolni. Ezt én 2-re állítottam, mert szerintem elég egy ötös (2 balra + aktuális oldal + 2 jobbra) intervallumot látni, de ezt nyugodtan megváltoztathatjátok. Itt be fogunk hozni 2 új változót, egy $start és egy $end változót, amik az aktuális oldaltól számolják a $range értékkel csökkentett ill. növelt értékeket. Ez azért kell, hogy ha az utolsó előtti oldalon vagyunk, ne írjunk ki utolsó+1 oldalt, a második oldalon meg -1-t. Lássuk akkor a kódot részletekben.

		 else { //Oldalszámozás ...-tal

			$range = 2; //Intervallum két szélének távolsága aktuális oldaltól

			if ($aktoldal >= ($range *2)) { //Ha messzebb vagyunk az első oldaltól mint $range * 2, kiírjuk az első oldal linkjét
				print ('<li><a href="oldal.php?offset=0">1</a></li>');
			}

			if ($aktoldal > ($range *2)) { //Ha már a második oldal száma nem látszik, kipontozzuk
				print('<li>...</li>');
			}

			$start = $aktoldal - $range; //$start és $end kezdeti értékek
			$end = $aktoldal + $range;

			// /!\ Kritikus rész /!\ a $start és $end pontos kiszámítása			

			if ($start < 1) { //Nem megyünk negatívaba, ha közel vagyunk az oldalak elejéhez
				$start = 1;
				$end = ($range * 2) + 1;
			} elseif ($end > $oldalszam) { //Nem megyünk túl a maximális oldalakon, ha a végén vagyunk
				$start = ($oldalszam - ($range * 2) + 1);
				$end = $oldalszam;
			}

Innentől igazából a nehezén túl is vagyunk, most egy sima for-ral ki kell iratnunk az oldalakat, majdnem úgy mint a kipontozós résznél, annyi eltéréssel, hogy most $start-tól $end-ig tesszük ezt meg.

			for ($i = $start; $i <= $end; $i++) { //Oldalak kiírása $start-tól $end-ig

				$off = ($i - 1) * $show;
				$oldal = $i;

				if ($off == $offset) $oldal = "<b>" . $oldal . "</b>";

				print ('<li><a href="oldal.php?offset=' . $off . '">' . $oldal . '</a></li>'); //Kiiratás
			}

Már majdnem készen is vagyunk, egy nagyon apró dolog van csak hátra, az utolsó ill. a következő oldal linkjének kiírása, majd a lista és a függvény lezárása.

			if ($aktoldal < ($oldalszam - ($range * 2) + 1)) {
				print('<li>...</li>');
			}
			if ($aktoldal <= ($oldalszam - ($range * 2) + 1)) {
				$utolso = $osszes - ($osszes % $show);
				print ('<li><a href="oldal.php?offset=' . $utolso . '">' . $oldalszam . '</a></li>'); //Utolsó oldal kiiratása
			}
		}

		if ($kovetkezo <= $osszes ) print('<li style="border: 0px"><a href="' . $klink . '&offset=' . $kovetkezo . '">következő oldal »</a></li>');

		print ("</ul>");
	}

}

Ezzel kész is! Nézzük meg egyben gyorsan:

function lapozas($offset = 0, $show = 12) { //Lapozás függvény - $offset az eltolás értéke, $show a megjelenítendő elemek száma

	global $osszes; //Itt megkapjuk az összes elem számát a táblából, ezt a lekérdezéskor kell kiszámolnunk.

	$elozo = $offset - $show; //Előző oldal kiszámítása
	$kovetkezo = $offset + $show; //Következő oldal kiszámítása
	$aktoldal = (int)($offset / $show) + 1; //Aktuális oldal
	$oldalszam = $osszes / $show; //Oldalak számának kiszámítása

	if ($oldalszam > (int)($osszes / $show)) $oldalszam = (int)($osszes / $show) + 1; //Oldalszám kerekítése

	if ($oldalszam > 1) { //Ha van elég oldal, hogy megjelenítsük

		print('<ul class="scroll">'); //Rendezetlen lista létrehozása, ebben tároljuk az oldalszámokat

		if ($elozo >= 0) print('<li><a href="oldal.php?&offset=' . $elozo .'">« előző oldal</a></li>'); //Előző oldal kiírása, ha nem az első oldalon vagyunk

		if ($oldalszam < 10) { //Oldalszámozás, ... nélkül

			for ($i = 0; $i < $oldalszam; $i++) {
				$off = ($i * $show) + ($offset % $show); //Offset számítása
				$oldal = $i + 1; //Kiirandó oldalszám megadása

				if ($off == $offset) $oldal = "<b>" . $oldal . "</b>"; //Aktuális oldal vastagon írva

				print ('<li><a href="oldal.php?&offset=' . $off . '">' . $oldal . '</a></li>'); //Kiiratás
			}

		} else { //Oldalszámozás ...-tal

			$range = 2; //Intervallum két szélének távolsága aktuális oldaltól

			if ($aktoldal >= ($range *2)) { //Ha messzebb vagyunk az első oldaltól mint $range * 2, kiírjuk az első oldal linkjét
				print ('<li><a href="oldal.php?offset=0">1</a></li>');
			}

			if ($aktoldal > ($range *2)) { //Ha már a második oldal száma nem látszik, kipontozzuk
				print('<li>...</li>');
			}

			$start = $aktoldal - $range; //$start és $end kezdeti értékek
			$end = $aktoldal + $range;

			// /!\ Kritikus rész /!\ a $start és $end pontos kiszámítása			

			if ($start < 1) { //Nem megyünk negatívaba, ha közel vagyunk az oldalak elejéhez
				$start = 1;
				$end = ($range * 2) + 1;
			} elseif ($end > $oldalszam) { //Nem megyünk túl a maximális oldalakon, ha a végén vagyunk
				$start = ($oldalszam - ($range * 2) + 1);
				$end = $oldalszam;
			}

			for ($i = $start; $i <= $end; $i++) { //Oldalak kiírása $start-tól $end-ig

				$off = ($i - 1) * $show;
				$oldal = $i;

				if ($off == $offset) $oldal = "<b>" . $oldal . "</b>";

				print ('<li><a href="oldal.php?offset=' . $off . '">' . $oldal . '</a></li>'); //Kiiratás
			}

			if ($aktoldal < ($oldalszam - ($range * 2) + 1)) {
				print('<li>...</li>');
			}
			if ($aktoldal <= ($oldalszam - ($range * 2) + 1)) {
				$utolso = $osszes - ($osszes % $show);
				print ('<li><a href="' . $klink . '&offset=' . $utolso . '">' . $oldalszam . '</a></li>'); //Utolsó oldal kiiratása
			}
		}

		if ($kovetkezo <= $osszes ) print('<li style="border: 0px"><a href="' . $klink . '&offset=' . $kovetkezo . '">következő oldal »</a></li>');

		print ("</ul>");
	}

}

Remélem megértettétek, hogyan is működik ez a függvény, ha nem, bátran kérdezzetek a hozzászólásoknál!