I am learning jQuery these days and here’s the source code of a php script that uses jQuery on the client side.
I have mainly demonstrated jQuery here. PHP has been used to manipulate desired number of paragraphs quickly 😀
You get a number of paragraphs. Hovering over them changes their style. Clicking the “Hide” link hides the paragraphs one by one. 🙂
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>jQuery with PHP</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/JavaScript" src="jquery-1.3.2.min.js"></script> <script type="text/JavaScript"> $(document).ready(function() { masnun(); }); function masnun() { i = 0; total = $("p").length - 1; $("a").click(function (e) { if(i > total) { alert("No more paragraphs to hide!"); e.preventDefault(); } else { e.preventDefault(); $("p:eq("+i+")").hide("slow"); i = i + 1; } }); $("p").hover(function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); }); } </script> <style> p { color:black; margin:5px; cursor:pointer; } p.hover { background:black; color: white; } </style> </head> <body> <a href="">Hide</a> <br/><br/> <?php for($i=0; $i < 7; $i++) { echo "<p> Paragraph number: {$i} </p>"; } ?> </body> </html> |