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
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-1.3.2.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,
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=<
$scheme=<
//kattintáskor letároljuk a koordinátákat case “click”: $query=sprintf($qTPL,$type,$x,$y,$timeStamp); break; default: return; break; } //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. 2. 3. 4. 5.
jQuery topMenu plugin animate funkciókkal JQuery és AJAX JQuery alapozó SQLite jegyzet jQuery-attribútumok és értékek kezelése
Téma: Webalkalmazás fejlesztés Forrás: http://opendir.hu Szerző: ArtH2O
Szerző: ArtH2O Erdeti URL: http://opendir.hu/webalkalmazas/jquery/364-clickheat-jquery-php5-sqlite-ajax/
