Quick Intro to JQuery and JQuery Mobile

Quick Intro to JQuery and JQuery Mobile

• 1.
  JQuery  +  JQuery  Mobile   Jussi  Pohjolainen   Tampere  University  of  Applied  Sciences  
• 2.
  Overview   •  JQuery   –  Most  popular  JavaScript  library  to  simplify  client-­‐side  scripBng   –  DOM  Handling,  animaBons,  events,  AJAX   –  Hides  browser  differences!   •  JQuery  UI   –  Desktop  widgets,  such  as  date  picker,  dialog,  progress  bar,  tabs…   –  Built  on  top  of  JQuery   •  JQuery  Mobile   –  Mobile  app  framework,  mainly  touch  UI  widgets   –  Support  for  all  mobile  operaBng  systems   –  Built  on  top  of  JQuery   •  Possible  to  mix:  JQuery  (dom  handling)  +  JQuery  Mobile  (UI).  
• 3.
  PhoneGap?   •  PhoneGap  (Adobe)  framework  allows  to  build  hybrid   apps  for  mobile  plaTorms   •  Hybrid  apps?   –  Web  apps  (HTML5+JS)  that  are  wrapped  inside  of  naBve   WebView  widget   •  Benefits   –  Can  be  sold  in  app  stores   –  Can  access  naBve  APIs   •  One  possible  stack  for  building  cross  plaTorm  apps:   –  JQuery  for  DOM  and  AJAX  Handling   –  JQuery  Mobile  for  User  Interface   –  PhoneGap  for  wrapping  the  app  as  naBve  
• 4.
  JQUERY  
• 5.
  Quick  Start   • Download  JQuery  file  (hp://jquery.com/)   – 1.x   – 2.x   •  Smaller  and  faster,  but  does  not  support  ie6,  7  or  8.   •  Windows  Phone  8  plaTorm  supports  IE10.   •  Make  your  (x)html  page  and  reference  to  the   file  in  script  block   •  Make  your  code  and  use  JQuery  funcBons!  
• 6.
  <script type="text/javascript" src="jquery.js"></script> <scripttype="text/javascript"> //<![CDATA[ // When document is ready to be manipulated jQuery(document).ready( pageReadyToBeManipulated ); function pageReadyToBeManipulated() { // If link is clicked jQuery("a").click( linkClick ); } function linkClick(event) { alert("Thanks for visiting!"); // Prevent the default action event.preventDefault(); } //]]> </script>
• 7.
  Some  Basic  Syntax   •  JQuery  can  be  used  in  two  ways:   – JQuery() – Or   – $() •  $  is  an  alias  to  JQuery()!  $  more  commonly   used  
• 8.
  <script type="text/javascript" src="jquery.js"></script> <scripttype="text/javascript"> //<![CDATA[ // When document is ready to be manipulated $(document).ready( pageReadyToBeManipulated ); function pageReadyToBeManipulated() { // If link is clicked $("a").click( linkClick ); } function linkClick(event) { alert("Thanks for visiting!"); // Prevent the default action event.preventDefault(); } //]]> </script>
• 9.
  // USING ANONYMOUSFUNCTIONS <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready( function() { $("a").click(function(event){ alert("Thanks for visiting!"); event.preventDefault(); }); }); //]]> </script>
• 10.
  // EVEN SHORTERSYNTAX, FORGET THE DOCUMENT PARAMETER <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $().ready(function(){ $("a").click(function(event){ alert("Thanks for visiting!"); event.preventDefault(); }); }); //]]> </script>
• 11.
  Geers  in  the  TradiBonal  Way   •  getElementsById •  getElementsByTagName •  getAttribute
• 12.
  JQuery  and  Selectors   •  Select  all  h1  elements   – $(“h1”) •  Select  the  first  one   – $(“h1”)[0] •  Add  contents   – $(“h1”)[0].innerHTML = “hello!”; •  Lot  of  different  selectors   – http://api.jquery.com/category/selectors/
• 13.
  CreaBng  Elements  in  TradiBonal  Way   •  createElement •  createTextNode •  setAttribute •  appendChild •  removeChild
• 14.
  JQuery  Insert   $().ready(function(){ $("a").click(function(event){ //Insert the new element after element with id here $("<p>New Element</p>").insertAfter("#here"); event.preventDefault(); }); });
• 15.
  ManipulaBon  FuncBons   • .addClass() •  .after() •  .append() •  .css() •  …   •  See: http://api.jquery.com/category/ manipulation/
• 16.
  Some  Effects:  Lot  of  Anim  FuncBons   $('#clickme').click(function() { $('#book').slideUp('slow', function() { // Animation complete. }); });
• 17.
  JQUERY  MOBILE  
• 18.
  JQuery  Mobile   • UI  for  all  popular  mobile  device  plaTorms   – hp://jquerymobile.com/   •  Built  on  top  of  JQuery   •  Themes  can  be  changed   •  See  demo:   – hp://view.jquerymobile.com/1.3.2/dist/demos/  
• 19.
  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Myfirst jQuery Mobile code</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div data-role="page" data-theme="a"> <div data-role="header"> <h1>jQuery Mobile</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true" data-dividertheme="b"> <li data-role="list-divider">Options</li> <li><a href="option1.html">Option 1</a></li> <li><a href="option2.html">Option 2</a></li> <li><a href="option3.html">Option 3</a></li> <li><a href="option4.html">Option 4</a></li> </ul> </div> <div data-role="footer"> <h4>&copy; 2013</h4> </div> </div> </body> </html>