Selektory + animacja w jQuery (podstawy)
Autor: JDStar o czwartek 16. Październik 2008
Dzisiaj gotowy cały plik z przykładem (nie chciało mi się kombinować z WordPressem jak umieścić w poście działający kod) – może ktoś ma jakieś przydatne wtyczki do tego?
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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>jQuery - bardzo mały i prosty poradnik devel.jdstar.pl</title> <meta name="description" content="miniporadnik jQuery, Jacek Diurra" /> <meta name="keywords" content="jquery, jacek dziura, jdstar" /> <meta name="author" content="Jacek Dziura htttp://devel.jdstar.pl" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <style type="text/css"> div{ display: block; border: 1px solid gray; background-color: rgb(239, 239, 239); width: 150px; height: 150px; margin: 3px; padding: 5px; text-align:center; float: left; } div:hover{ border: 1px solid blue; background-color: rgb(194, 231, 239); } a.button{ border: 1px solid gray; padding: 2px; line-height:170%; text-decoration:none; } a.button:hover{ border: 1px solid blue; background-color: rgb(0, 191, 255); color:blue; } .bluesky{ background-color: rgb(0, 191, 255); } </style> </head> <body> <div id="parent" style="float:none; width:auto; height: auto">Lorem ipsum..... "rodzic" <div class="anim ex1">Lorem ipsum..... [ex1]<br/>child 1</div> <div class="anim ex2">Lorem ipsum..... [ex2]<br/>child 2</div> <div class="anim ex3">Lorem ipsum..... [ex3]<br/>child 3</div> <div class="anim ex4">Lorem ipsum..... [ex4]<br/>dziecko 4</div> <div class="anim ex5">Lorem ipsum..... [ex5]<br/>dziecko 5</div> <div class="anim ex6">Lorem ipsum..... [ex6]<br/>child 6</div> <br style="clear:both"/> </div> <p> <a href="#" class="button" id="showall">pokaż wszystkie</a><br/> <a href="#" class="button" id="togglechild">pokaż/schowaj n-child - czyli kolejny element z tablicy o numerze 'n' (wartość z pola obok)</a><input id="nchild" name="nchild" size="2" value="1"/><br/> element(y) zawierający wartość z pola obok: <input id="nval" name="nval" size="6" value="child"/> [<a href="#" class="button" id="selval">zaznacz</a> - <a href="#" class="button" id="dselval">odznacz</a>] </p> <script type="text/javascript">//<![CDATA[ $(document).ready(function(){ $("div .anim").click(function(){ $(this).toggle('slow'); return false; }); $("#showall").click(function(){ $("div").show("fast"); return false; }); $("#togglechild").click(function(){ $("div.anim:nth-child("+$("#nchild").val()+")").toggle("slow"); return false; }); $("#selval").click(function(){ $("div.anim:contains('"+$("#nval").val()+"')").addClass("bluesky"); return false; }); $("#dselval").click(function(){ $("div.anim:contains('"+$("#nval").val()+"')").removeClass("bluesky"); return false; }); }); //]]> </script> </body> </html> |
