jQuery Trend

  • Published on
    18-Nov-2014

  • View
    1.596

  • Download
    1

Embed Size (px)

DESCRIPTION

CA Conference

Transcript

<ul><li> 1. jQuery and...? </li> <li> 2. . </li> <li> 3. ... </li> <li> 4. ... 2005 . </li> <li> 5. 2005 Ajax </li> <li> 6. ! </li> <li> 7. </li> <li> 8. jQuery . </li> <li> 9. jQuery </li> <li> 10. 83.7% jQuery 10.4% 8.6% MooTools Prototype201112 http://w3techs.com/technologies/overview/javascript_library/all </li> <li> 11. . </li> <li> 12. . </li> <li> 13. . </li> <li> 14. HTML . </li> <li> 15. jQuery :- - CSS </li> <li> 16. CSS: div #id .class </li> <li> 17. CSS:div <div>#id <div>.class </div></div></li><li> 18. jQuery 2 Image: Danilo Rizzuti / FreeDigitalPhotos.net </li> <li> 19. 1. </li> <li> 20. 2. </li> <li> 21. $(#MENU).hide(); </li> <li> 22. ForDesigner CSS body{background-color:red;} jQuery $(body).css(background-color,red); Image: nuttakit / FreeDigitalPhotos.net </li> <li> 23. ForDesigner CSS body{background-color:red;} jQuery $(body).css(background-color,red); Image: nuttakit / FreeDigitalPhotos.net </li> <li> 24. ForDesigner CSS body{background-color:red;} jQuery $(body).css(background-color,red); Image: nuttakit / FreeDigitalPhotos.net </li> <li> 25. ForDesigner CSS body{background-color:red;} jQuery $(body).css(background-color,red); Image: nuttakit / FreeDigitalPhotos.net </li> <li> 26. Image: Danilo Rizzuti / FreeDigitalPhotos.net PluginsImage: Sujin Jetkasettakorn / FreeDigitalPhotos.net Image: phanlop88 / FreeDigitalPhotos.net </li> <li> 27. OpenJS Grid </li> <li> 28. SlideDeck ( http://goo.gl/t1qbB ) </li> <li> 29. HTML5 Drag&amp;Drop Uploader ( http://goo.gl/xsBV6 ) </li> <li> 30. </li> <li> 31. $(".multiselect").twosidedmultiselect(); </li> <li> 32. http://jqueryui.com </li> <li> 33. nivo slider (http://nivo.dev7studios.com/) </li> <li> 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 }); </li> <li> 35. </li> <li> 36. . </li> <li> 37. " 11.1 "- 2011 11 10 </li> <li> 38. " HTML4, CSS, jQuery ." - CA 12 </li> <li> 39. http://robot.anthonycalzadilla.com/ </li> <li> 40. http://snook.ca/technical/jquery-bg/ </li> <li> 41. HTML ul { CSS<ul><li> list-style:none; </li><li>Home margin:0; </li><li>About padding:0; </li><li>Contact } li {</li></ul> 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; }) } </li> <li> 42. jQuery Mobile </li> <li> 43. http://jquerymobile.com </li> <li> 44. http://jquerymobile.com/demos/1.0/ </li> <li> 45. CSS ~~ </li> <li> 46. http://jquerymobile.com/themeroller/ </li> <li> 47. Mobile App </li> <li> 48. 2009 2011. 102011. 11 </li> <li> 49. Apache Callback </li> <li> 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/ </li> </ul>