jQuery Trend

Embed Size (px)

DESCRIPTION

CA Conference

Text of jQuery Trend

  • 1. jQuery and...?
  • 2. .
  • 3. ...
  • 4. ... 2005 .
  • 5. 2005 Ajax
  • 6. !
  • 7.
  • 8. jQuery .
  • 9. jQuery
  • 10. 83.7% jQuery 10.4% 8.6% MooTools Prototype201112 http://w3techs.com/technologies/overview/javascript_library/all
  • 11. .
  • 12. .
  • 13. .
  • 14. HTML .
  • 15. jQuery :- - CSS
  • 16. CSS: div #id .class
  • 17. CSS:div
    #id
    .class
  • 18. jQuery 2 Image: Danilo Rizzuti / FreeDigitalPhotos.net
  • 19. 1.
  • 20. 2.
  • 21. $(#MENU).hide();
  • 22. ForDesigner CSS body{background-color:red;} jQuery $(body).css(background-color,red); Image: nuttakit / FreeDigitalPhotos.net
  • 23. ForDesigner CSS body{background-color:red;} jQuery $(body).css(background-color,red); Image: nuttakit / FreeDigitalPhotos.net
  • 24. ForDesigner CSS body{background-color:red;} jQuery $(body).css(background-color,red); Image: nuttakit / FreeDigitalPhotos.net
  • 25. ForDesigner CSS body{background-color:red;} jQuery $(body).css(background-color,red); Image: nuttakit / FreeDigitalPhotos.net
  • 26. Image: Danilo Rizzuti / FreeDigitalPhotos.net PluginsImage: Sujin Jetkasettakorn / FreeDigitalPhotos.net Image: phanlop88 / FreeDigitalPhotos.net
  • 27. OpenJS Grid
  • 28. SlideDeck ( http://goo.gl/t1qbB )
  • 29. HTML5 Drag&Drop Uploader ( http://goo.gl/xsBV6 )
  • 30.
  • 31. $(".multiselect").twosidedmultiselect();
  • 32. http://jqueryui.com
  • 33. nivo slider (http://nivo.dev7studios.com/)
  • 34. jQuery("#nivoslider-125").nivoSlider({ effect:"random", slices:15, boxCols:8, boxRows:4, animSpeed:500, pauseTime:3000, startSlide:0, Thats all directionNav:true, directionNavHide:true, controlNav:true, controlNavThumbs:false, controlNavThumbsFromRel:true, keyboardNav:true, pauseOnHover:true, manualAdvance:false });
  • 35.
  • 36. .
  • 37. " 11.1 "- 2011 11 10
  • 38. " HTML4, CSS, jQuery ." - CA 12
  • 39. http://robot.anthonycalzadilla.com/
  • 40. http://snook.ca/technical/jquery-bg/
  • 41. HTML ul { CSS
    • list-style:none;
    • Home margin:0;
    • About padding:0;
    • Contact } li {
    float:left; width:100px; margin:0; padding:0; Image } text-align:center; li a { display:block; padding:5px 10px; height:100%; $(#nav a) jQuery color:#FFF; .css( {backgroundPosition: "0 0"} ) text-decoration:none; .mouseover(function(){ border-right:1px solid #FFF; $(this).stop().animate( } {backgroundPosition:"(0 -250px)"}, li a { {duration:500}) }) background:url(bg.jpg) repeat 0 .mouseout(function(){ 0; $(this).stop().animate( } {backgroundPosition:"(0 0)"}, li a:hover { {duration:500}) background-position:50px 0; }) }
  • 42. jQuery Mobile
  • 43. http://jquerymobile.com
  • 44. http://jquerymobile.com/demos/1.0/
  • 45. CSS ~~
  • 46. http://jquerymobile.com/themeroller/
  • 47. Mobile App
  • 48. 2009 2011. 102011. 11
  • 49. Apache Callback
  • 50. Stock images http://www.flickr.com/photos/maniya/4020026753/ http://www.flickr.com/photos/inferis/266391219/ http://www.flickr.com/photos/colodio/4301458933/ http://www.flickr.com/photos/nettsu/4423387852/ http://www.flickr.com/photos/ivyfield/4802227735/ http://www.flickr.com/photos/ivyfield/4800359168/ http://www.flickr.com/photos/boellstiftung/6322064224/ http://www.flickr.com/photos/chrisbartow/6474456991/ http://www.flickr.com/photos/jm3/4683685/