JavaScript, mind kijelöl funkció

Tegyük fel, Sok sok pici checkbox van a weboldalon. Például kijelölhetők a törlendő üzenetek. De fárasztó egyenként kattintgatni. JavaScripttel egyszerre kijelölhető akár mind is.
A következőkben erre mutatok megoldást, illetve egy kipróbálható demót is.


Induljunk ki a következő html forrásból:

  1. <div id="checkall1">
  2.         Első sor:<br />
  3.         <input type="checkbox" />
  4.         <input type="checkbox" />
  5.         <input type="checkbox" />
  6.         <input type="checkbox" />
  7.         <input type="checkbox" />
  8.         <input type="checkbox" />
  9.         <input type="checkbox" />
  10.         <input type="checkbox" />
  11.         <input type="checkbox" />
  12.         <input type="checkbox" />
  13.  
  14. </div>
  15. <div id="checkall2">
  16.         Második sor:<br />
  17.         <input type="checkbox" />
  18.         <input type="checkbox" />
  19.         <input type="checkbox" />
  20.         <input type="checkbox" />
  21.         <input type="checkbox" />
  22.         <input type="checkbox" />
  23.         <input type="checkbox" />
  24.         <input type="checkbox" />
  25.         <input type="checkbox" />
  26.         <input type="checkbox" />
  27. </div>

Két csoport checkbox van. Mindkettő egy div-ben, aminek egyedi id-je van. Így lehet csak az egyik, vagy másik csoportra hivatkozni, ha egyszerre több "Mind kijelöl" funkcióra is szükség van egy oldalon. Lehetne persze class-okat adni az inputoknak, vagy a nevet megadni tömbként stb stb... De ez a legtisztább megoldás szerintem.

Kellene most két újabb checkbox, vagy akár gomb, amire kattintva változik a többi jelölőnégyzet állapota. Ebben a példában ezt a funkciót is egy checkbox tölti be. Mérete is kisebb, és könnyebb ellenőrizni, hogy mire kell váltani az állapotokat.

  1. <input type="checkbox" onclick="checkAll(this, 'checkall1');" /> Első sor kijelölése<br />
  2. <input type="checkbox" onclick="checkAll(this,'checkall2');" /> Második sor kijelölése

Az onclick eseményben található checkAll függvény felel a jelölések változtatásáért. Első paramétere mindig a this. Így a függvényben kattintás után elérhető az input mező objektuma, és lekérdezhető annak a checked tulajdonsága, ami megadja, ki van-e jelölve az adott checkbox. Második paraméter pedig annak a tároló elemnek az azonosítója, amiben a jelölendő checkboxok vannak.

Már csak függvényt kell megírni.
Legyen ez például a checkall.js nevű fájl. Annak tartalma pedig a következő:

  1. function checkAll(chbx,id)
  2. {
  3.         var checked = chbx.checked;
  4.         var container = document.getElementById(id);
  5.         if (!container) return;
  6.  
  7.         var inputs = container.getElementsByTagName('input');
  8.         for (var i in inputs)
  9.         {
  10.                 if (inputs[i].type != 'checkbox') continue;
  11.                 inputs[i].checked = checked;
  12.         }
  13. }

Ebben, ha hibás azonosítót kapott a checkAll függvény, nem történik semmi. De ha megtalálta a tároló elemet az azonosítóval, akkor lekérdezi az összes input elemet belőle egy tömbbe. Ez után már csak egy ciklus kell, amiben az összes checkbox típusú input mező checked tulajdonságát beállítjuk ugyanarra, amilyen a kapcsolgató checkboxunké.

Kitérő:
A for-in ciklus hasonló a PHP-ben ismert foreach-hez. Az in után álló tömb összes indexét egymás után betölti az in előtt álló változóba. Így nem kell lekérdezni hány eleme van a tömbnek. És azt sem kell tudni, milyen indexek vannak benne.

Megosztás/Mentés

Webes fájlkezelő php-ben

Fájlkezelő

Ezt a fájlkezelőt még a phpstudio-ra készítettem 2006 szeptemberében.
A kezelése és a megjelenése nem a legpraktikusabb / legmodernebb, de azért még így is hasznát lehet venni :)
Letöltés: Fájlkezelő


Amit tud
A fájlkezelõ képes mappákat, fájlokat másolni, áthelyezni, átnevezni, létrehozni, törölni.
Fájlokat meg is nyithatsz, és módosíthatod. Hasznos lehet apróbb hibák esetében, ha nem akarsz ftp-t használni.
Lehetőség van fájlok feltöltésére. Maximum 2MB lehet a fájlméret.

Beállítások:
A fajlkezelo.php nevű fájl elején megtalálod a $konyvtar változót.
Állitsd be azt a mappát, ahova szeretnéd tenni a feltöltött fájlokat.
pl : $konyvtar = "temp";
A belépéshez még szükség van egy jelszóra. Ezt is a fajlkezelo.php elején teheted meg.
Töltsd fel a fajlkezelo.php fájt a szervered gyökérkönyvtárába, és máris tallózhatsz a fájlok között.

Használata
Válaszd ki a mappát, ahonnan szeretnéd listázni a fájlokat. Ezt megtalálod a "honnan" link mellett.
Majd válaszd ki, hogy hova szeretnél másolni, áthelyezni, stb... Ezt pedig a hova link mellett találod.
Ha egy szintet feljebb szeretnél ugrani a mappákban, akkor válaszd az >>1 szint fel<< opciót.

Miután a fájlok listája megjelenik, válaszd ki a fájlt, amivel dolgozni szeretnél. És jelöld ki azt másolást, vagy az áthelyezést attól függöen, mit szeretnél a fájllal. Lehetõség van a fájlok átnevezésére. Ezt akár a másolás, akár az áthelyezés opcioval is megteheted. Ha csak másolni szeretnél ugyanabba a mappába, ahol a forrásfájl található, csak jelöld ki a másolást, és nevezd át a fájlt. A cél mappa (hova) egyezzen.

Ha már egy meglévő fájlt, pl egy php szkriptedet szeretnéd feltölteni, azt is megteheted.

Ha egy meglévő fájlt szeretnél szerkeszteni, válaszd ki a fájlok listájában a fájlt, és kattints a szerkeszt linkre.
Itt módosíthatod a fájlokat. A megnyitás csak szöveges fájlok esetében működik. Így például nem tudsz megnyitni képfájlokat szerkesztésre.

Fájlok méretét is megnézheted. Amikor kiválasztod a fájlt, automatikusan megjelenik az oldal tetején a mérete a nevével együtt.

Megosztás/Mentés

Szövegben url-ek linkké alakítása automatikusan php-vel

Szokás fórumokon, vendégkönyvekben a beírt url-eket automatikusan felismertetni és átalakítani kattintható linkké. Erre jól használhatók a reguláris kifejezések. Az első példa rövid, de felismeri a linkeket, amik http-vel, https-el, www-el, wap-al kezdődnek. Viszont ha vessző kerül a végére, mert épp egy tagmondat végén van, vagy pont, esetleg felkiáltó jel, akkor az is bekerül a linkbe.

  1. <?php
  2. $szoveg = "Egy szövegben lehet link https-el kezdődve: https://www.google.com/accounts/ServiceLogin?service=mail
  3. vagy csak http-vel. http://rimelek.hu,
  4. www.phpstudio.hu ";
  5.  
  6. $szoveg = preg_replace("#(\s*)((http(s?)://)|(www\.|wap\.))(\S+\.\S+)#is", "\\1<a href=\"http\\4://\\5\\6\" target='_blank'>\\2\\6</a>", $szoveg);
  7. print $szoveg;
  8. ?>

A másik megoldás bonyolultabb, de az írásjeles hibát is megoldja:

  1. <?php
  2. function url2link($matches)
  3. {
  4.         $i = strlen($matches[0]);
  5.         $szoveg = trim($matches[0],',.!');
  6.         $j = strlen($szoveg);
  7.         return preg_replace("#(\s*)(http(s?)://)?(.*)#is",
  8.                 "\\1<a href=\"http\\3://\\4\" target='_blank'>\\2\\4</a>",
  9.                 $szoveg).substr($matches[0],$i-1,$i-$j);
  10. }
  11.  
  12. $szoveg = preg_replace_callback("#(\s*)((http(s?)://)|(www\.|wap\.))(\S+\.\S+)#is",'url2link',$szoveg);
  13. print $szoveg;
  14. ?>
Megosztás/Mentés

Lapozás PHP-ben

Nem is olyan régen írtam egy blogot a dinamikus több sorba tördelésről. Annak folytatásaként fogható fel ez a kis ismertető. Mert hát nagyon hasznos, hogy 500 ezer képet, vagy adatbázisbeli rekordot meg tudsz jeleníteni egy weboldalon több sorban oszlopokba rendezve, csak hát elég valószínűtlen, hogy azt kibírná a böngészőnk, vagy akár a szerver. De elég, ha csak saját emberi tulajdonságunkra gondolunk, a türelmetlenségre. Mi a megoldás? Természetesen a lapozhatóság megvalósítása. Amire többféle megoldás létezik, és sok fórumon, sok blogban foglalkoztak / foglalkoznak a témával. Némelyik igen szép kinézetet is kap. Osztályokat is írnak rá. Ez alól valószínű én sem leszek kivétel, de addig is nézzünk pár primitívebb módszert.

Az első példa egyszerű tömböt fog használni az adattárolásra. Akár csak a sortörésről szóló blogom első példái is.

Oké. Van egy kérdésem. Mi az első, ami eszedbe jut a lapozással kapcsolatban, és szükséges ahhoz, hogy egyáltalán legyen lapozás? Igen igen. Jól gondolod. Hogy hány elemet akarsz megjeleníteni egy oldalon egyszerre. Akkor add is meg gyorsan. Én tízet választok.

Megosztás/Mentés

Lista megjelenítése táblázattal php-ben

Nos, amire a cím is utal, nem egy nagyon bonyolult probléma, ám annál gyakoribb.
Elég, ha csak egy képgalériát szeretnél, ahol egy sorban maximum 10 képet szeretnél látni, vagy akár annál kevesebbet, függetlenül attól, hogy mekkorák a képek. Adott esetben az egyik sorban lehet, hogy csak 5 kép van, a másikban pedig 6, mert több fért el.

De bármilyen adattömeget szükség lehet ilyen módon megjeleníteni. Legyen az egy webes fájlkezelő, mint például a windows intéző, ahol szintén rendezett módon jelennek meg az ikonok, vagy akár bármilyen adatbázisban tárolt információ.

Erre mutatok pár példát, mert már túl sokszor írtam ezt le különböző fórumokon, és nyilván nem is csak én. De gyakran nehéz rátalálni a probléma megoldására egy fórumban, ahol temérdek kérdés és válasz váltja egymást egyetlen témában.

Megosztás/Mentés

Gömb rajzolása PHP-ben

Gömb logó

Ez a script már régen készült, és közel sem tökéletes megoldásokkal. De mivel újra írni már nincs kedvem, ezért így mutatom meg :)

A bal felső sarokban levő képhez hasonló gömböt, illetve különböző variációit lehet generálni. Minden fontos tulajdonsága beállítható url-ből. Így tesztelhetők a lehetőségek.


Tulajdonságok:

  • Színek:
    Minden szín a következő formában adható meg: RRR,GGG,BBB
    Ahol az egyes betűk az RGB-nek megfelelően a vörös, zöld és kék színek mértékét jelentik 0 és 255 között.

    • fill: Gömb színe (kitöltése)
    • bgcolor: Kép háttere, ha jpeg formátumú
    • border: Választható szegély az alakzatnak
    • monox,monoy: Nevüknek megfelelően vízszintes és függőleges irányban húzott ívek színe. Alapértelmezetten minden ív más színű.
    • _0 -től _7-ig: Az ívek színkészlete változó színek esetén
  • Méretek:

    • space: Az ívek távolsága egymástól pixelben.
    • width: A kép szélessége (Alapértelmezetten azonos a rajz szélességével)
    • height: A kép magassága (Alapértelmezetten azonos a rajz magasságávall)
    • w: A rajz szélessége
    • h: A rajz magassága

  • type: Kép típusa. (jpeg,jpg,png és gif a megengedett)
  • quality: A kép minősége 0 és 100 között. (Csak jpeg formátum esetén)
Megosztás/Mentés

Oszlopgrafika

Jól el lehet szórakozni PHP-ben is a grafikával. Van több olyan grafikai scriptem, ami véletlenül jött létre, mert csak próbálkoztam mindenféle koordinátagenerálással, aztán lett, ami lett. Ilyen a következő képen látható kis ábra is. Egy az egyben PHP-val generálva. Maga az ötlet nem véletlen. De a színek igen.

PHP kép

Forráskód megtekintése:

Megosztás/Mentés

Gömb rajzolása pascalban

Ez egy kis pascal nyelven írt grafikus program, amivel olyasmi alakzatot lehet kirajzoltatni, ami legalább emlékeztet egy gömbre. Konfigurálható a forráskód elején, hogy a gömb milyen paraméterekkel rendelkezzen. Ehhez sajnos újra kell fordítani a programot. Akinek van rá lehetősége, kipróbálhatja.

Letöltés
Képernyőképek:

1. screenshot
2. screenshot

Megjegyzés:
Az egavga.bgi fájlnak az exe mellett kell maradnia!

Megosztás/Mentés