Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Mehr von Tomohiro MITSUMUNE
jQueryチュートリアル
- 1. jQuery Tomohiro Mitsumune 2009/03/27 2009 3 31
- 2. What’s jQuery ? 2009 3 31
- 3. jQuery • JavaScript • • • The Write Less, Do More, JavaScript Library 2009 3 31
- 4. jQuery Features • • Ajax • • • 2009 3 31
- 5. 2009 3 31
- 6. 2009 3 31
- 7. 2009 3 31
- 8. 2009 3 31
- 9. <head> <script type=”text/javascript” src=”jquery.js”></ script> <script type=”text/javascript”> $(function() { $(“.button”).click(function() { $(“#panel”).slideDown(“slow”); }); }); </script> </head> 2009 3 31
- 10. jQuery <head> <script type=”text/javascript” src=”jquery.js”></ script> <script type=”text/javascript”> $(function() { $(“.button”).click(function() { $(“#panel”).slideDown(“slow”); }); }); </script> </head> 2009 3 31
- 11. jQuery <head> <script type=”text/javascript” src=”jquery.js”></ script> <script type=”text/javascript”> $(function() { (function(){})(); $(“.button”).click(function() { $(“#panel”).slideDown(“slow”); }); }); </script> </head> 2009 3 31
- 12. jQuery <head> <script type=”text/javascript” src=”jquery.js”></ script> <script type=”text/javascript”> $(function() { (function(){})(); $(“.button”).click(function() { $(“#panel”).slideDown(“slow”); }); }); class=”button” </script> id=”panel” </head> 2009 3 31
- 13. 2009 3 31
- 14. $(‘.boxRow, .boxLow’).each(function(){ $(this) .find(‘a:first’) .css(‘background-color’, ‘blue’) .end() .find(‘a:eq(1)’) .css(‘background-color’, ‘yellow’) .end() .find(‘a:last’) .css(‘background-color’, ‘red’); }); 2009 3 31
- 15. boxRow, boxLow $(‘.boxRow, .boxLow’).each(function(){ $(this) .find(‘a:first’) .css(‘background-color’, ‘blue’) .end() .find(‘a:eq(1)’) .css(‘background-color’, ‘yellow’) .end() .find(‘a:last’) .css(‘background-color’, ‘red’); }); 2009 3 31
- 16. boxRow, boxLow $(‘.boxRow, .boxLow’).each(function(){ $(this) .find(‘a:first’) .css(‘background-color’, ‘blue’) .end() .find(‘a:eq(1)’) .css(‘background-color’, ‘yellow’) .end() .find(‘a:last’) .css(‘background-color’, ‘red’); }); 2009 3 31
- 17. boxRow, boxLow $(‘.boxRow, .boxLow’).each(function(){ $(this) .find(‘a:first’) .css(‘background-color’, ‘blue’) .end() .find(‘a:eq(1)’) .css(‘background-color’, ‘yellow’) .end() .find(‘a:last’) .css(‘background-color’, ‘red’); }); 2009 3 31
- 18. $(“#header”) id=”header” $(“h3”) <h3> <div id=”content”> $(“div#content .photo”) class=”photo” $(“ul li”) <ul> <li> <ul> $(“ul li:first”) <li> 2009 3 31
- 19. click click mouseover mouseover append slideToggle slideDown/slideUp style css(name, value) http://semooh.jp/jquery/ 2009 3 31
- 20. jQuery Samples 2009 3 31
- 21. Simple Slide Panel 2009 3 31
- 22. $(function() { $(“.btn-slide”).click(function() { $(“#panel”).slideToggle(“slow”); $(this).toggleClass(“active”); }); }); 2009 3 31
- 23. Simple Disappearing Effect 2009 3 31
- 24. $(function() { $(“.pane .delete”).click(function() { $(this).parents(“.pane”) .animate({ opacity: “hide” },“slow”); }); }); 2009 3 31
- 25. Chain-able Transition Effects 2009 3 31
- 26. $(function() { $(“.run”).click(function() { $(“#box”).animate({opacity: “0.1”, left: “+=400”), 1200) .animate({opacity: “0.4”, top: “+=160”, height: “20”, width: “20”}, “slow”) .animate({opacity: “1”, left: “0”, height: “100”, width: “100”}, “slow”) .animate({top: “0”}, “fast”) .slideUp() .slideDown(“slow”) return false; }); }); 2009 3 31
- 27. Accordion #1 2009 3 31
- 28. $(function() { $(“.accordion h3:first”).addClass(“active”); $(“.accordion p:not(:first)”).hide(); $(“.accordion h3”).click(function() { $(this).next(“p”).slideToggle(“slow”) .sibilings(“p:visible”).slideUp(“slow”); $(this).toggleClass(“active”); $(this).sibilings(“h3”).removeClass(“active”); }); }); 2009 3 31
- 29. According #2 2009 3 31
- 30. $(function() { $(“.accordion2 h3”).eq(2).addClass(“active”); $(“.accordion2 p”).eq(2).show(); $(“.accordion2 h3”).click(function() { $(this).next(“p”).slideToggle(“slow”) .sibilings(“p:visible”).slideUp(“slow”); $(this).toggleClass(“active”); $(this).sibilings(“h3”).removeClass(“active”); }); }); 2009 3 31
- 31. Animated Hover Effect #1 2009 3 31
- 32. $(function() { $(“.menu a”).hover(function() { $(this).next(“em”).animate({opacity: “show”, top: “-75”}, “slow”); }, function() { $(this).next(“em”).animate({opacity: “hide”, top: “-85”}, “fast”); }); }); 2009 3 31
- 33. Animated Hover Effect #2 2009 3 31
- 34. $(document).ready(function(){ $(".menu2 a").append("<em></em>"); $(".menu2 a").hover(function() { $(this).find("em").animate({opacity: "show", top: "-75"}, "slow"); var hoverText = $(this).attr("title"); $(this).find("em").text(hoverText); }, function() { $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast"); }); }); 2009 3 31
- 35. Entire Block Clickable 2009 3 31
- 36. $(function() { $(“.pane-list li”).click(function() { window.location = $(this).find(“a”).attr(“href”); return false; }); }); 2009 3 31
- 37. Collapsible Panels 2009 3 31
- 38. $(function() { $(“.message_list .message_body:gt(0)”).hide(); $(“.message_list li:gt(4)”).hide(); $(“.message_head”).click(function() { $(this).next(“.message_body”).slideToggle(500) return false; }); $(“.collpase_all_message”).click(function() { $(“.message_body”).slideUp(500) return false; }); $(“.show_all_message”).click(function() { $(this).hide(); $(“.show_recent_only”).show(); $(“.message_list li:gt(4)”).slideDown(); return false; }); $(“.show_recent_only”).click(function() { $(this).hide(); $(“.show_all_message”).show(); $(“.message_list li:gt(4)”).slideUp(); return false; }); }); 2009 3 31
- 39. Image Replacement Gallery 2009 3 31
- 40. $(document).ready(function(){ $("h2").append('<em></em>') $(".thumbs a").click(function(){ var largePath = $(this).attr("href"); var largeAlt = $(this).attr("title"); $("#largeImg").attr({ src: largePath, alt: largeAlt }); $("h2 em").html(" (" + largeAlt + ")"); return false; }); }); 2009 3 31
- 41. • 2009 3 31
- 42. • $(“ ”). (function(){ }); 2009 3 31
- 43. Let’s Suprising jQuery Magic ! 2009 3 31