• Like
  • Save
Quick Intro to JQuery and JQuery Mobile
Upcoming SlideShare
Loading in...5
×
 

Quick Intro to JQuery and JQuery Mobile

on

  • 726 views

 

Statistics

Views

Total Views
726
Views on SlideShare
725
Embed Views
1

Actions

Likes
0
Downloads
12
Comments
0

1 Embed 1

https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Quick Intro to JQuery and JQuery Mobile Quick Intro to JQuery and JQuery Mobile Presentation Transcript

    • JQuery  +  JQuery  Mobile   Jussi  Pohjolainen   Tampere  University  of  Applied  Sciences  
    • 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).  
    • 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  
    • JQUERY  
    • 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!  
    • <script type="text/javascript" src="jquery.js"></script> <script type="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>
    • Some  Basic  Syntax   •  JQuery  can  be  used  in  two  ways:   – JQuery() – Or   – $() •  $  is  an  alias  to  JQuery()!  $  more  commonly   used  
    • <script type="text/javascript" src="jquery.js"></script> <script type="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>
    • // USING ANONYMOUS FUNCTIONS <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>
    • // EVEN SHORTER SYNTAX, 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>
    • Geers  in  the  TradiBonal  Way   •  getElementsById •  getElementsByTagName •  getAttribute
    • 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/
    • CreaBng  Elements  in  TradiBonal  Way   •  createElement •  createTextNode •  setAttribute •  appendChild •  removeChild
    • 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(); }); });
    • ManipulaBon  FuncBons   •  .addClass() •  .after() •  .append() •  .css() •  …   •  See: http://api.jquery.com/category/ manipulation/
    • Some  Effects:  Lot  of  Anim  FuncBons   $('#clickme').click(function() { $('#book').slideUp('slow', function() { // Animation complete. }); });
    • JQUERY  MOBILE  
    • 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/  
    • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My first 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>