A jquery.clickheat egy jquery plugin, ami lekezeli a kattintásokat a kijelölt tartományban. jquery.clickheat

Átírás

1 A jquery.clickheat egy jquery plugin, ami lekezeli a kattintásokat a kijelölt tartományban. jquery.clickheat Egy kijelölt terültet vagy az egész dokumentumon lekezeli a kattintásokat, majd egy AJAX (GET) kéréssel elküldi a feldolgozó PHP5 fájlnak, ami letárolja az egér koordinátákat. A program futtatásához PHP5-kel, SQLite(2) kiterjesztések (sqlite_open). JavaScript Draw A megjelenítéshez egy javascript rajzoló plugint jquery.draw.js használ. A rajzoló osztály egyébként nagyon hasznos és érdekes módon valósítja meg a megjelenítést. A konkrét példában a kockákat pl.: CSS-el, XHTML-el oldja meg. de rengeteg műveletet támogat (drawrect, drawpolyline, drawellipse, drawbezier, fillrect, fillpolygon, fillellipse, fillarc,fillbezier). A megjelenítést böngésző függetlenül teszi. A publikus verzióban a kattintások nincsenek URL-hez vagy böngésző típushoz kötve, tehát bármelyik oldalon kattintanak azt egyként kezeli. Teszteltem Firefox-ban, Chormium-ban, IE6-7-8-ban. Van belöle egy teszt verzió amit ide kattintva megtekinthetsz. De egy a Generátorunkkal készült Site a WebKungFu.hu ahol valós körülmények között is megtekintheted a működését. Az oldalon egyébiránt online játszható ingyenes Flash játékokat gyűjtöttek kategóriákba. Mire jó ez? Feltérképezheted a honlapodon, melyek azok a forró területek ahol a felhasználók sokat kattintanak. Ennek a hasznát nem ecsetelném. Megláthatod vele, mik azok a területek ahol kattintanak (a gyengébb felhasználók), de igazából nincs is Link a terülten. Szövegek, címek amiket hivatkozásnak vélnek Hasznos ötleteket ad UI átgondoláshoz

2 Hasznos ötleteket ad UI átgondoláshoz Működés, Hasznos beállítások: G Billentyű lenyomására megjeleníti az eredményeket DB törlés: clickheat.php?type=dbreset, de mivel ezt átállítod írd be azt, vagy töröld le az adatbázis fájlt, a script ha nincs meg létrehozza. PHP oldalon: A clickheat.php fájlt meghívhatod külön is, így megnézheted hogy a rendelkezésre állnak-e a szükséges függvények, és egyben megnézheted az SQLite adatbázis létrejöttét, vagy törölheted azt. case dbreset : -et érdemes átírni, mert bárki törölheti az adatbázisod clickheat.php?type=dbreset Adatbázis neve és elhelyezkedése. Ezt is érdemes megváltoztatni. Ha nem akarod megjeleníteni az adatokat ezt is nevezd át: case clickheat : Telepítés: A #[#/body#]# elem elé vagy a #[#head#]##[#/head#]# elem közé illeszd bele az alábbi kódot, persze módosítsd az útvonalakat ha kell. ##[##pre class="csspre" ##]## #[#script src="./js/jquery min.js" type="text/javascript"#]##[#/script#]# #[#script src="./js/jquery.draw.min.js" type="text/javascript"#]##[#/script#]# #[#script src="./js/jquery.clickheat.min.js" type="text/javascript"#]##[#/script#]# #[#script type="text/javascript"#]# #[#!-- $(document).ready(function() { //teljes dokumentumra $('html').clickheat(); //csak adott elemre //$('div#lorem').clickheat(); //paraméterekkel var options={ phpfile: "./clickheat.php", rectx: 20, recty: 20, rectstroke: 20, rectcolor: "orange", rectalpha:.5, keycode: 71 ; //$('html').clickheat(options); //--#]# #[#/script#]# ##[##/pre##]## A JS kód: ##[##pre class="csspre" ##]## (function($){ $.fn.clickheat = function(options){ var settings = jquery.extend({ phpfile:./clickheat.php, rectx: 10, recty: 10, rectstroke: 10, rectcolor: red, rectalpha:.2,

3 rectalpha:.2, keycode: 71, options); $( body ).prepend( ); //kattintáskor letároljuk a koordinátákat //PHP hívás, SQLite letárolás $(this).click(function(e){ var xcoord=e.pagex; var ycoord=e.pagey; //alert( X: + xcoord + Y: + ycoord); $.get(settings.phpfile, { type: click, x: xcoord, y: ycoord //Megjelenítés billentyűzet lenyomásra Alt Gr + g //JSON eredményt várunk a PHP-fájltól (x,y) koordinátákat //és kockáztatunk $(document).keydown(function(e){ //alert(e.which); //altgr+g if(e.keycode!=settings.keycode){ return; //kirakott elemek eltávolítása $(.clickheatdiv ).remove(); $.getjson(settings.phpfile, { type: clickheat,function (json) { //JSON válasz feldolgozása $.each(json, function(i,item){ $( #clickheat ).drawrect(item.x, item.y, settings.rectx, settings.recty, { color: settings.rectcolor, stroke: settings.rectstroke, alpha: settings.rectalpha )(jquery); ##[##/pre##]## PHP kód: error_reporting(0); /** * A működéshez szükség van az SQLite2 PHP támogatásra */ //függvény teszt if(!function_exists( sqlite_query )){ die( SQLite függvények hiányoznak! ); //sql tábla és Index $scheme=<<create TABLE clickheat (

4 $scheme=<<create TABLE clickheat ( id INTEGER PRIMARY KEY DEFAULT NULL, tipus varchar(10) DEFAULT NULL, x INTEGER DEFAULT NULL, y INTEGER DEFAULT NULL, datum timestamp DEFAULT NULL ); CREATE INDEX index_clickheat ON clickheat (tipus, x, y, datum); SQL_SCHEME; // ezt érdemes áthelyezni védett helyre, vagy a nevét megváltoztani! // /var/www/db/ $dbpath= dirname( FILE ). /db/ ; // fájl neve, változtasd meg! $dbname= clickheat.sqlite ; // /var/www/fajl.sqlite $dbfile= $dbpath.$dbname; $error_message=false; $link=false; //unlink($dbfile); if(!file_exists($dbfile)){ //adatbázis és táblák létrehozása $link=sqlite_open($dbfile, 0666, &$error_message); $sorok=array_map( trim,explode( ;, $scheme)); foreach($sorok as $query){ if(!empty($query)){ sqlite_query($link,$query, &$error_message); //kapcsolódás if(!$link){ $link=sqlite_open($dbfile, 0666, &$error_message); $type=trim(strip_tags($_get["type"])); $x=(int)$_get["x"]; $y=(int)$_get["y"]; $timestamp=time(); $qtpl= INSERT INTO clickheat (id,tipus,x,y,datum) VALUES(null, %s,'%s,'%s,'%s ) ; $query=false; switch($type){ //ennél a metódusnál visszadjuk JSON formátumban az adatokat case clickheat : $query= SELECT x,y FROM clickheat ; $result=sqlite_query($link, $query); $rows=sqlite_fetch_all($result, SQLITE_ASSOC); die(json_encode($rows)); //adatbázis fajl törlése //eszt is cseréld ki case akarmi : mert bárki meghívhatja kivülről //clickheat.php?type=dbreset és már törli is! case dbreset : unlink($dbfile); exit;

5 //kattintáskor letároljuk a koordinátákat case click : $query=sprintf($qtpl,$type,$x,$y,$timestamp); default: return; //végrehajtjuk a letárolást if(is_resource($link) && $query){ sqlite_query($link,$query, &$error_message); return;?> Érdekes részletek, JSON elkészítése PHP oldalon és JS feldolgozása: //az SQL kérésből a feldolgozott adatok a rows-ban $rows=array( sql eredemények feldolgozva! ); //AJAX kérésnek kírjük és kilépünk a futásból die(json_encode($rows));?> JQuery AJAX kérés és feldolgozás aminek a válaszát JSON formátumban kapjuk: ##[##pre class="csspre" ##]## $.getjson(settings.phpfile, { type: clickheat,function (json) { //JSON válasz feldolgozása $.each(json, function(i,item){ $( #clickheat ).drawrect(item.x, item.y, settings.rectx, settings.recty, { color: settings.rectcolor, stroke: settings.rectstroke, alpha: settings.rectalpha ##[##/pre##]## Megjegyzések: Van egy ingyenes nyílt forráskódú PHP GD alapú projekt amit érdemes meglátogatni a témakörben. A letöltött források a külsős Lib-ek licenének a figyelembevételével használhatók. A billentyűzet kódok kezelésében valami fantasztikus káosz uralkodik, még jó hogy vannak oldalak ahol ezek szerepelnek. hasonló bejegyzés: 1. jquery topmenu plugin animate funkciókkal 2. JQuery és AJAX 3. JQuery alapozó 4. SQLite jegyzet 5. jquery-attribútumok és értékek kezelése Téma: Webalkalmazás fejlesztés Forrás: Szerző: ArtH2O

6 Szerző: ArtH2O Erdeti URL: