Előadást letölteni
Az előadás letöltése folymat van. Kérjük, várjon
1
Bevezetés a JQuery használatába
Modern Javaszkript Bevezetés a JQuery használatába
2
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=" </body> </html>
3
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 ( $("a").click(function(event){ event.preventDefault(); $(this).hide("slow"); });
4
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() ); });
5
Kiszolgáló oldal (php)
<?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; } ?>
6
Összetettebb példa
Hasonló előadás
