Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The jQuery Projects

The jQuery Projects

jzaefferer

March 05, 2012
Tweet

More Decks by jzaefferer

Other Decks in Technology

Transcript

  1. Jörn Zaefferer @bassistance The Projects jQuery is the stdio of

    the web -- Yehuda Katz (Merb, Rails 3, SproutCore, Ember.js) Monday, March 5, 2012
  2. Jörn Zaefferer @bassistance The Projects What mobile players have to

    learn really soon is that the framework wars are over and jQuery has won. -- PPK (quirksmode.org) Monday, March 5, 2012
  3. The Projects Jörn Zaefferer @bassistance Old-school JavaScript var  tables  =

     document.getElementsByTagName("table"); for  (var  t  =  0;  t  <  tables.length;  t++)  {        var  rows  =  tables[t].getElementsByTagName("tr");        for  (var  i  =  1;  i  <  rows.length;  i  +=  2)  {                if  (!/(^|s)odd(s|$)/.test(rows[i].className))  {       rows[i].className  +=  "  odd";                }        } }; Monday, March 5, 2012
  4. The Projects Jörn Zaefferer @bassistance Fun with event handling function

     addEvent(  obj,  type,  fn  )  {    if  (  obj.attachEvent  )  {        obj['e'+type+fn]  =  fn;        obj[type+fn]  =  function(){            obj['e'+type+fn](  window.event  );        }        obj.attachEvent(  'on'+type,  obj[type+fn]  );    }  else        obj.addEventListener(  type,  fn,  false  ); } function  removeEvent(  obj,  type,  fn  )  {    if  (  obj.detachEvent  )  {        obj.detachEvent(  'on'+type,  obj[type+fn]  );        obj[type+fn]  =  null;    }  else        obj.removeEventListener(  type,  fn,  false  ); } Monday, March 5, 2012
  5. Jörn Zaefferer @bassistance The Projects jQuery Core 1.7.1 1.5 -

    1.7 in 2011 deferreds, on, html5 Monday, March 5, 2012
  6. The Projects Jörn Zaefferer @bassistance jQuery 1.5 - Deferreds $.when(

     somethingHappens()  ) .then(  function  ()  {      doSomethingElse(); }); Monday, March 5, 2012
  7. The Projects Jörn Zaefferer @bassistance jQuery 1.5 - Deferreds and

    Ajax $.ajax(  url  ) .then(  function  ()  {      doSomethingElse(); }); Monday, March 5, 2012
  8. The Projects Jörn Zaefferer @bassistance jQuery 1.6 - Relative CSS

    //Before: var  sbwidth  =  parseInt(  $("#sidebar").css("width"),  10); $("#sidebar").css("width",  (sbwidth  +  100)  +  "px"); //Now: $("#sidebar").css("width",  "+=100px"); Monday, March 5, 2012
  9. The Projects Jörn Zaefferer @bassistance jQuery 1.6 $.map() Enhancement var

     names  =  {  firstname:  "Elijah",  lastname:  "Mannor",   age:  "OLD"};                   names  =  jQuery.map(names,  function(v)  {        return  v.toLowerCase(); });   //  returns:  ["elijah",  "manor",  "old"] Monday, March 5, 2012
  10. The Projects Jörn Zaefferer @bassistance jQuery 1.7 //  before $(".foo").bind("click",

     function(e)  {}); //  now $(".foo").on("click",  function(e)  {}); Monday, March 5, 2012
  11. The Projects Jörn Zaefferer @bassistance //  before $(".foo").delegate(".bar",  "click",  function(e)

     {}); //  now $(".foo").on("click",  ".bar",  function(e)  {}); jQuery 1.7 Monday, March 5, 2012
  12. The Projects Jörn Zaefferer @bassistance jQuery 1.7 //  before $(".bar").live("click",

     function(e)  {}); //  now $(document).on("click",  ".bar",  function(e)  {}); Monday, March 5, 2012
  13. Jörn Zaefferer @bassistance The Projects jQuery UI 1.8.18 Widgets, Interactions,

    Effects, Utilities CSS Framework, ThemeRoller Monday, March 5, 2012
  14. The Projects Jörn Zaefferer @bassistance Autocomplete var  availableTags  =  [

      "ActionScript",  "C",  "C++",  "Clojure",  "ColdFusion",   "Erlang",  "Fortran",  "Groovy",  "Java",  "JavaScript",   "Perl",  "PHP",  "Python",  "Ruby",  "Scala",  "Scheme" ]; $(  "#tags"  ).autocomplete({   source:  availableTags }); Monday, March 5, 2012
  15. The Projects Jörn Zaefferer @bassistance connected lists Sortable $(  "#sortable1,

     #sortable2"  ).sortable({   connectWith:  ".connectedSortable" }); Monday, March 5, 2012
  16. The Projects Jörn Zaefferer @bassistance Position $("img").position({   my:  "right

     middle",   at:  "left+25  middle",   of:  window }); Monday, March 5, 2012
  17. The Projects Jörn Zaefferer @bassistance Animated Position $("img").position({   my:

     "right  middle",   at:  "left+25  middle",   of:  window,   using:  function(to)  {     $(this).animate(to);   } }); Monday, March 5, 2012
  18. The Projects Jörn Zaefferer @bassistance Custom Content Tooltip <h3  data-­‐geo>Vienna,

     Austria</h3> $(  "body"  ).tooltip({   items:  "[data-­‐geo]",   content:  function()  {       return  "<img  class='map'  src='"  +         "http://maps.google.com/maps/api/staticmap?"  +         "size=350x350&maptype=terrain&&center="  +         $(  this  ).text()  +  "'>";     }   } }); Monday, March 5, 2012
  19. The Projects Jörn Zaefferer @bassistance Decimal Spinner $(  "#spinner"  ).spinner({

      step:  0.01,   numberFormat:  "n" }); Monday, March 5, 2012
  20. Jörn Zaefferer @bassistance The Projects jQuery Mobile 1.0.1 22 A-Grade

    platforms Ajax navigation with transitions Lists, Toolbars, Form controls ThemeRoller Monday, March 5, 2012
  21. The Projects Jörn Zaefferer @bassistance Simple page <!DOCTYPE  html>  

    <html>   <head>    <meta  charset="utf-­‐8">    <meta  name="viewport"  content="width=device-­‐width,  initial-­‐scale=1">      <title>Direct  Pizza  -­‐  Home</title>      <link  rel="stylesheet"  href="jquery.mobile.css"  />    <script  src="jquery.js"></script>    <script  src="jquery.mobile.js"></script> </head>   <body>   <div  data-­‐role="page">    <div  data-­‐role="header"><h1>Direct  Pizza</h1></div>    <div  data-­‐role="content"><p>Your  personal  pizza  service!</p></div>    <div  data-­‐role="footer"><h4>We  love  Pizza™</h4></div> </div> </body> </html> Monday, March 5, 2012
  22. The Projects Jörn Zaefferer @bassistance Fixed Toolbars <div  data-­‐role="page"  class="type-­‐interior">

      <div  data-­‐role="header"  data-­‐position="fixed">     <h1>Fixed  toolbars</h1>   </div>     <div  data-­‐role="content">     Whatever   </div>   <div  data-­‐role="footer"  data-­‐position="fixed">     <h1>Fixed  Footer</h1>   </div> </div> Monday, March 5, 2012
  23. The Projects Jörn Zaefferer @bassistance QUnit Usage <!DOCTYPE  html> <html>

    <head>   <meta  charset="UTF-­‐8"  />   <title>QUnit  Test  Suite</title>   <link  rel="stylesheet"  href="qunit.css">   <script  src="qunit.js"></script>   <script>      function  add(a,  b)  {            return  a  +  b;      }      test("add  basics",  function()  {            equal(  add(1,  1),  2,  "result  should  be  2"  );      });      </script> </head> <body>   <div  id="qunit"></div>   <div  id="qunit-­‐fixture">test  markup</div> </body> </html> Monday, March 5, 2012
  24. Jörn Zaefferer @bassistance The Projects Getting involved Your help, we’re

    looking for! -- Master Yoda Monday, March 5, 2012
  25. Jörn Zaefferer @bassistance The Projects Special Thanks Content: Ralph Whitbeck,

    Adam Sontag Design: Doug Neiner Monday, March 5, 2012