Bevezetés a JQuery használatába

Slides:



Advertisements
Hasonló előadás
JQuery 8. előadás.
Advertisements

Bevezetés a jQuery használatába
Felhasználói felületek és üzleti logika Bollobás Dávid ASP.NET
Webszolgáltatások PHP-ben
HTML5 alapú fejlesztő és futtató környezet megvalósítása
Webes java technológiák 2011
JQuery Kocsis Roland
A magazin klán oldala Készítette: Papp Vilmos
JavaScript.
Stílus, mesteroldal, témák
HTML nyelv.
Készítette: Rummel Szabolcs Elérhetőség:
WEB Technológiák Dr. Pance Miklós – Kolcza Gábor Miskolci Egyetem.
Érettségi feladatok megoldása LINQ-kel
Microsoft szoftverek a szakképzésben
Szombathely Dinamikus WEB programozás: PHP és JSP.
PHP I. Alapok. Mi a PHP? PHP Hypertext Preprocessor Szkriptnyelv –Egyszerű, gyors fejlesztés –Nincs fordítás (csak értelmező) Alkalmazási lehetőségek:
PHP VIII Frissítések. Probléma Megoldandó feladat a böngészőben megjelenített tartalom időnkénti frissítése Például, ha az oldalon szerepel a szerver.
A PHP (PHP: Hypertext Preprocessor) nyílt forráskódú, számítógépes szkriptnyelv, legfőbb felhasználási területe a dinamikus weboldalak készítése. Emiatt.
Web Application for Resource Planning
Orovecz János Tartalomjegyzék  Az Ajax története  HTTP-kérések és válaszok  XMLHttp-kérések  Egyéb Ajax technika  XML.
a Moodle autentikációjához a PTE FEEK-en
Excel Függvények Páll Boglárka.
JavaScript a gyakorlatban Gyakorlat DHTML  Rétegek szabályozása  HTML-elemek dinamikus változtatása.
Előadóról Név: Zumpf Tamás
Silverlight Ajax Network Bridge Orbán Csaba Epam Systems Kft
WEB 2.0. Amiről szó lesz… Web átalakulóban, a WEB 2.0 –Újszerű weboldalak… –Első a tartalom! –A felhasználók hatalomátvétele?! –A Web mint platform –
PHP oktatási tapasztalatok
Flash és PHP? De még mennyire! Kiss-Tóth Marcell
Objektum orientált programozás a gyakorlatban
Bevezetés a PHP világába - kezdőknek
Bevezetés a PRADO keretrendszerbe Kardos Gergely.
CSS A CSS bemutatása.
Weboldal tervezés programozó szemmel. Alapok Minden webcím www. –tal kezdődikMinden webcím www. –tal kezdődik Webböngésző = Internet ExplorerWebböngésző.
Script nyelvek alkalmazása a webkartográfiában 1/14 Script nyelvek alkalmazása a webkartográfiában Gede Mátyás MFTTT, március 22.
Web-grafika II (SVG) 7. gyakorlat Kereszty Gábor.
Web-grafika II (SVG) 5. gyakorlat Kereszty Gábor.
HTML5 alapú fejlesztő és futtató környezet megvalósítása
Professzionális kliens oldali webfejlesztés jQuery alapokon
Illés Zoltán ELTE Informatikai Kar
További lehetőségek Weblapok programozása. Nyelvek csoportosítása Leíró nyelv (HTML, XML, …) Programozási nyelv  Szerver oldali (PHP, ASP, …)  Kliens.
Objektumvezérelt rendszerek tervezése
Nádai Gábor előadása INTERNETES KONFERENCIASZERVEZÉS GDF TDK 2009 – Konzulens: Kaczur Sándor.
Egy keretrendszer bevezetése Affentáller László MarkCon Informatikai Kft.
HTML ÉS PHP (Nagyon) rövid áttekintés. ADATBÁZISRENDSZEREK MŰKÖDÉSI SÉMÁJA Felh. interakció DB Connector MySQL ? A gyakorlaton:
Hogyan készítheti el egy laikus egy nap alatt az INFOÉRA konferencia programlistázó és értékelő mobilalkalmazását? Menyhárt László Gábor Zamárdi,
Illés Zoltán ELTE Informatikai Kar
Java web programozás 7-8..
Webprogramozó tanfolyam
CALDERONI FORRÁSKEZELŐ RENDSZER A Calderoni Program során fejlesztésre kerülő rendszer vázlatos bemutatása.
CALDERONI FORRÁSKEZELŐ RENDSZER A Calderoni Program során fejlesztésre kerülő rendszer vázlatos bemutatása.
Java web programozás 2..
Illés Zoltán ELTE Informatikai Kar
„Például, hogy hozok táblázatban, vagyis űrlapon belül létre egy új űrlapot? Úgy próbálkoztam, de nem hinném, hogy jó.” 0. dia.
Opencms modul fejlesztés Krizsán Zoltán. Modulok fajtái Nincs előírás, csak tipikus tennivalók: –Content type: új típus(oka)t vezet be. –Template: új.
Alkalmazott Informatikai Tanszék
Webprogramozó tanfolyam
Asynchronous Javascript And XML
Alkalmazott Informatikai Tanszék
Beépített függvények használata programozáskor
Java Code Coverage Library
YUI február YUI szeptember YUI3
Web-Grafika Linuxon?!? Gödöny Péter.
Cascading Style Sheet.
JavaScript a böngészőben
CALDERONI FORRÁSKEZELŐ RENDSZER
Html parancsok.
Folyamatok.
3. osztályban.
JavaScript a böngészőben
Előadás másolata:

Bevezetés a JQuery használatába Modern Javaszkript Bevezetés a JQuery használatába

Alapok http://jquery.com/ <html> <head> <script type="text/javascript" src="jquery.js"></script> <script> $(document).ready(function(){ // betöltés után végrehajtandó kód }); </script> </head> <body> <a href="http://jquery.com/">jQuery</a> </body> </html>

A kattintás esemény kiterjesztése: $("a").click(function(event){ alert("Rákattintott a linkre"); }); A kattintás esemény felüldefiniálása: $("a").click(function(event){ alert("Ez a link már nem müködik"); event.preventDefault(); }); A CSS osztályok manipulálása $("a").addClass("test"); $("a").removeClass("test"); Speciális hatások (http://docs.jquery.com/Effects) $("a").click(function(event){ event.preventDefault(); $(this).hide("slow"); });

Ajax támogatás (egyszerű szavazás – kliens oldal) $(document).ready(function() { $("#rating").append("Please rate: "); for ( var i = 1; i <= 5; i++ ) $("#rating").append("<a href='#'>" + i + "</a> "); // a kattintás átdefiniálása $("#rating a").click(function(e){ // az eredeti mukodes kikapcsolása e.preventDefault(); // Ajax kérés postázása $.post("rate.php", {rating: $(this).html()}, function(xml) { // az eredmény kiirása $("#rating").html("Köszönjük a szavazatát, a jelenlegi átlag: " + $("average", xml).text() + ", szavazatok száma: " + $("count", xml).text() ); });

Kiszolgáló oldal (php) http://jquery.bassistance.de/example-rateme.html <?php define('STORE', 'ratings.dat'); function put_contents($file,$content) {     $f = fopen($file,"w");     fwrite($f,$content);     fclose($f); } if(isset($_REQUEST["rating"])) {     $rating = $_REQUEST["rating"];     $storedRatings = unserialize(file_get_contents(STORE));     $storedRatings[] = $rating;     put_contents(STORE, serialize($storedRatings));     $average = round(array_sum($storedRatings) / count($storedRatings), 2);     $count = count($storedRatings);     $xml = "<ratings><average>$average</average><count>$count</count></ratings>";     header('Content-type: text/xml');      echo $xml; } ?>

Összetettebb példa