SlideShare a Scribd company logo
1 of 67
Download to read offline
JavaScript Conference 2011 By Take your JS skills to the next level with  jQuery   and   jQuery Mobile Anis uddin Ahmad Mohammad Zakir Hossain Raju
jQuery? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Absolute beginner? Please check:  http://www.slideshare.net/anisniit/jquery-from-the-very-beginning Change  the way that you write  JavaScript
Why jQuery? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
So... What's Special?
Still there's something ,[object Object],[object Object],[object Object],[object Object],We're using jQuery!
Let's Start http://docs.jquery.com/Downloading_jQuery
Embed In Your Page <html>  <head>   <script src=“path/to/jquery-x.x.js&quot;></script>  [Or <script src=“http://cdn/url.js&quot;></script>] </head>  <body> … </body>  </html>
How It Works? $(“div”). addClass(“xyz”); Find Some Elements Do something with them { } jQuery Object
Start Coding jQuery <html>  <head>  <script src=“path/to/jquery-x.x.js&quot;></script>  <script>  $(document).ready( function(){ // Start here } ) ;    </script> </head>  <body> … </body>  </html>
Basic Selectors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Using Filters ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Selecting Example $(“ #std  tr :even ” ).css( “ background-color ” ,  “ #dde ” ); $(“ #std  td .comment :empty ” ).text( “ No Comment ” ); $(“ #std  td [align= ‘ center'] &quot;).addClass( “ ocean ” ); Example for  tag,  id,  class and  filter  Name Class Roll No. Comment Raju XII 2 Good Masud IX 1 Good Apu XII 3 No Comment Mizan XII 5 No Comment Karim VI 2 Satisfactory
Actions - DOM Manipulating ,[object Object],[object Object]
Attributes and Contents ,[object Object],[object Object],[object Object],[object Object]
Attributes Example ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Actions - Handling Events ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Handling Events Bind all interactions on events. $(document).ready(function(){   $(“#message”). click ( function(){ $(this).hide(); }); });   <span id=“message” on click =“…”> blah blah </span>
jQuery Events ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Actions - Handling Events ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
jQuery Effects ,[object Object],[object Object],[object Object],$(&quot;#showdown&quot;).click(function(){  $(&quot;#my-div&quot;). animate ({  width: &quot;70%&quot;,  opacity: 0.4 },  1200  );  }); You can make Animation! But there are helpers too..
Actions - Ajax ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Let's Do Some Practice We'll write some <html> $(document). ready( function(){ // And then the JavaScript/jQuery here } ) ; Format selective elements if required
Facebook Hidden Optionbar
Facebook Hidden Optionbar <textarea id=&quot;status&quot;></textarea> <div id=&quot;status-options&quot;> <a href=&quot;#&quot;>a link</a> <a href=&quot;#&quot;>another link</a> </div> $(&quot;#status&quot;) . focus( function(){ $(&quot;#status-options&quot;) . slideDown( &quot;slow&quot; ) ; } ) ; #status-options { display:  none ; ... }
Twitter Character Count
Twitter Character Count $(&quot;#status&quot;) . keyup ( function(e){ var  statusLength  =  $(&quot;#status&quot;) . val() .length ; $(&quot;#char-count&quot;) . text( 140 -  statusLength ) ; }); <textarea id=&quot;status&quot;></textarea> <span id=&quot;char-count&quot;></span>
Twitter Character Count $(&quot;#status&quot;) . keyup ( function(e){ var  statusLength  =  $(&quot;#status&quot;) . val() .length ; $(&quot;#char-count&quot;) . text( 140 –  statusLength ) ;   if( statusLength  >  120) { $(&quot;#char-count&quot;). css( 'color', 'red' ) ; } else { $(&quot;#char-count&quot;) . css( 'color', 'black' ) ; } }); <textarea id=&quot;status&quot;></textarea> <span id=&quot;char-count&quot;></span>
Working Behind... http://ajaxload.info/
Working Behind... <a href=&quot;#&quot; id=&quot;load-details&quot;>Show Details</a> <div id=&quot;target&quot;></div> $(&quot;#load-details&quot;) .click ( function(){ $(&quot;#target&quot;) .show() . html( &quot; <img src='i/loading.gif'&quot; />&quot; ) ; $(&quot;#target&quot;) . get( 'server/url?id=3' , function( data ){ $(&quot;#target&quot;) . html(data) ;  } ) ;  } ) ; #target { display:  none ; }
Gmail Content Filtering
Gmail Content Filtering $(&quot;ul#side-menu li a&quot;). click( function(e){ e. preventDefault() ; $(&quot;#&quot;+  $(this). attr(&quot;rel&quot;) ).load( $(this). attr(&quot;href&quot;) ); } ) ; <ul id=&quot;side-menu&quot;> <li><a href=&quot; path?param=1 &quot; rel=&quot; main &quot;>inbox</a></li> <li><a href=&quot;path?param=2&quot; rel=&quot;main&quot;>draft</a></li> </ul> <div id=&quot;main&quot;></div>
Facebook See More
Facebook See More $(&quot;p.long-p&quot;). each( function() { if( $(this) .text().length  > 200 ){ var  content  =  $(this) .text(); //@todo: Move extra content to a span //@todo: Add a link to show hidden span } } ) ; //@todo: Hide extra spans //@todo: Activate the link to show hidden span <p class=&quot;long-p&quot;> Lot of texts... </p>
Facebook See More $(this). html( content .substr(0, 199) ) .append( &quot;<span class='extra'>&quot;  +  content .substr(199) + &quot;</span>&quot; )   .append( &quot; <a href='#' class='more'>See More</a>&quot; ) ; <p class=&quot;long-p&quot;> First 200 chars are here <span class=”extra”> Rest of the content </span> <a href='#' class='more'> See More </a> </p> Move extra content to a span and add link: The HTML will become:
Facebook See More $(&quot;p span.extra&quot;) .hide() ; $(&quot;p a.more&quot;) .click( function(){ $(this) .prev().show() ; $(this) .remove() ; } ) ; Hide spans and activate link: <p class=&quot;long-p&quot;> First 200 chars are here <span class=”extra”> Rest of the content </span> <a href='#' class='more'> See More </a> </p>
$(&quot;p.long-p&quot;). each( function() { if($(this).text().length > 200){ var  content  = $(this).text(); $(this). html( content .substr(0, 199) ) .append( &quot;<span class='extra'>&quot;  +  content .substr(199) + &quot;</span>&quot; )   .append( &quot; <a href='#' class='more'>See More</a>&quot; ) ; } } ) ; $(&quot;p span.extra&quot;) .hide() ; $(&quot;p a.more&quot;) . click( function(){ $(this) .prev().show() ; $(this) .remove() ; } ) ; <p class=&quot;long-p&quot;> Lot of texts... </p>
Why Mobile Development? ,[object Object],[object Object],[object Object],[object Object],[object Object]
Why jQuery Mobile? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
What if not supported?
Features ,[object Object],[object Object],[object Object],[object Object],[object Object]
Lightweight jQuery Core – 31KB  jQuery Mobile CSS – 7KB jQuery Mobile Javascript – 21KB  Framework Images – 80KB
Example!
Anatomy of a page ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Including library files ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Single page <div  data-role=“page”  id=“home”> Content goes here </div>
Header & Footer <div data-role=&quot;page&quot; id=&quot;home&quot;> <div data-role=&quot;header&quot;> <h1>Header</h1> </div> <div data-role=&quot;content&quot;> <p>Inside contents</p> </div> <div data-role=&quot;footer&quot;> <p>Footer</p> </div> </div>
Single page <div data-role=&quot;page&quot; id=&quot;home&quot;> <div data-role=&quot;header”>   <a data-icon=&quot;home” href=“”>Home</a>   <h1>Header</h1>   <a data-icon=&quot;back&quot; data-rel=&quot;back”>Back</a> </div> .…. …… </div>
Page Content - Lists ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Local Pages? Goes source order  ID for navigation Can be used a dialog box too
Local Pages <div  data-role=“page”  id=“home”> <p>Home Page</p> </div> <div data-role=“page” id=“ secondpage ” > <p>second page</p> </div>
Local Pages
Navigation <div data-role=“page” id=“home”> <a  href=“#secondpage” >Go to 2 nd  Page</a> </div> <div data-role=“page”  id=“ secondpage ” > <a  href=“ about.html ” >About Us</a> </div>
Dialog box <a  href=&quot;#pagedialog&quot;  data-rel=&quot;dialog” data-transition=&quot;pop&quot;>Open Dialog</a> <div data-role=&quot;page&quot; id=&quot;dialog&quot;> This is a modal dialog box </div>
Theming ,[object Object],[object Object],[object Object],[object Object],[object Object]
Mobile Events ready() pagecreate()
Mobile Events ,[object Object],[object Object],[object Object],[object Object],[object Object]
Mobile Events ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Binding Events ,[object Object],[object Object],[object Object],[object Object],[object Object]
Responsive Layout ,[object Object],[object Object],[object Object]
Responsive Layout ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Testing ,[object Object],[object Object],[object Object]
Move Faster... ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],http://plugins.jquery.com/
Beautification is easy http://jqueryui.com/ Coming for  mobile  soon...
Talk With Others http://forum.jquery.com/ http://forum.jquery.com/jquery-mobile
Dig more… ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
We are.. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
QUESTIONS? ,[object Object]

More Related Content

What's hot

Allow remote conne
Allow remote conneAllow remote conne
Allow remote conneSiraj Ahmed
 
Javascript技巧参考大全
Javascript技巧参考大全Javascript技巧参考大全
Javascript技巧参考大全fgghyyfk
 
Javascript and jQuery for Mobile
Javascript and jQuery for MobileJavascript and jQuery for Mobile
Javascript and jQuery for MobileIvano Malavolta
 
jQuery Loves Developers - SWDC2009
jQuery Loves Developers - SWDC2009jQuery Loves Developers - SWDC2009
jQuery Loves Developers - SWDC2009Remy Sharp
 
Peek inside the fantastical Ukrainian Village home and studio of artists Jare...
Peek inside the fantastical Ukrainian Village home and studio of artists Jare...Peek inside the fantastical Ukrainian Village home and studio of artists Jare...
Peek inside the fantastical Ukrainian Village home and studio of artists Jare...irwinvifxcfesre
 
WordPressのテンプレートをカスタマイズするために必要なphpを初歩から解説
WordPressのテンプレートをカスタマイズするために必要なphpを初歩から解説WordPressのテンプレートをカスタマイズするために必要なphpを初歩から解説
WordPressのテンプレートをカスタマイズするために必要なphpを初歩から解説Takashi Uemura
 
Pianist and composer Jeff Kowalkowski releases strong new trio album
Pianist and composer Jeff Kowalkowski releases strong new trio albumPianist and composer Jeff Kowalkowski releases strong new trio album
Pianist and composer Jeff Kowalkowski releases strong new trio albumirwinvifxcfesre
 

What's hot (19)

Alaindavila
AlaindavilaAlaindavila
Alaindavila
 
Advanced JQuery
 Advanced JQuery Advanced JQuery
Advanced JQuery
 
Allow remote conne
Allow remote conneAllow remote conne
Allow remote conne
 
Admin login oes
Admin login oesAdmin login oes
Admin login oes
 
Best gourmet market
Best gourmet marketBest gourmet market
Best gourmet market
 
Get more votes!
Get more votes!Get more votes!
Get more votes!
 
jQuery入門
jQuery入門jQuery入門
jQuery入門
 
Best hotel
Best hotelBest hotel
Best hotel
 
Prototype UI
Prototype UIPrototype UI
Prototype UI
 
Poetry in the age of hip-hop
Poetry in the age of hip-hopPoetry in the age of hip-hop
Poetry in the age of hip-hop
 
Javascript技巧参考大全
Javascript技巧参考大全Javascript技巧参考大全
Javascript技巧参考大全
 
Javascript and jQuery for Mobile
Javascript and jQuery for MobileJavascript and jQuery for Mobile
Javascript and jQuery for Mobile
 
jQuery Loves Developers - SWDC2009
jQuery Loves Developers - SWDC2009jQuery Loves Developers - SWDC2009
jQuery Loves Developers - SWDC2009
 
Základy jQuery
Základy jQueryZáklady jQuery
Základy jQuery
 
Peek inside the fantastical Ukrainian Village home and studio of artists Jare...
Peek inside the fantastical Ukrainian Village home and studio of artists Jare...Peek inside the fantastical Ukrainian Village home and studio of artists Jare...
Peek inside the fantastical Ukrainian Village home and studio of artists Jare...
 
DOCUMENTACION PAGINA WEB PHP
DOCUMENTACION PAGINA WEB PHPDOCUMENTACION PAGINA WEB PHP
DOCUMENTACION PAGINA WEB PHP
 
Best Fried Chicken
Best Fried ChickenBest Fried Chicken
Best Fried Chicken
 
WordPressのテンプレートをカスタマイズするために必要なphpを初歩から解説
WordPressのテンプレートをカスタマイズするために必要なphpを初歩から解説WordPressのテンプレートをカスタマイズするために必要なphpを初歩から解説
WordPressのテンプレートをカスタマイズするために必要なphpを初歩から解説
 
Pianist and composer Jeff Kowalkowski releases strong new trio album
Pianist and composer Jeff Kowalkowski releases strong new trio albumPianist and composer Jeff Kowalkowski releases strong new trio album
Pianist and composer Jeff Kowalkowski releases strong new trio album
 

Viewers also liked

Building Large Scale Javascript Application
Building Large Scale Javascript ApplicationBuilding Large Scale Javascript Application
Building Large Scale Javascript ApplicationAnis Ahmad
 
Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap Rakesh Jha
 
jQuery Mobile: Progressive Enhancement with HTML5
jQuery Mobile: Progressive Enhancement with HTML5jQuery Mobile: Progressive Enhancement with HTML5
jQuery Mobile: Progressive Enhancement with HTML5Todd Anderson
 
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapBuilding Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapNick Landry
 
Introduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for AllIntroduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for AllMarc Grabanski
 
LinkedIn SlideShare: Knowledge, Well-Presented
LinkedIn SlideShare: Knowledge, Well-PresentedLinkedIn SlideShare: Knowledge, Well-Presented
LinkedIn SlideShare: Knowledge, Well-PresentedSlideShare
 

Viewers also liked (6)

Building Large Scale Javascript Application
Building Large Scale Javascript ApplicationBuilding Large Scale Javascript Application
Building Large Scale Javascript Application
 
Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap
 
jQuery Mobile: Progressive Enhancement with HTML5
jQuery Mobile: Progressive Enhancement with HTML5jQuery Mobile: Progressive Enhancement with HTML5
jQuery Mobile: Progressive Enhancement with HTML5
 
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapBuilding Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
 
Introduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for AllIntroduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for All
 
LinkedIn SlideShare: Knowledge, Well-Presented
LinkedIn SlideShare: Knowledge, Well-PresentedLinkedIn SlideShare: Knowledge, Well-Presented
LinkedIn SlideShare: Knowledge, Well-Presented
 

jQuery & jQuery Mobile

  • 1. JavaScript Conference 2011 By Take your JS skills to the next level with jQuery and jQuery Mobile Anis uddin Ahmad Mohammad Zakir Hossain Raju
  • 2.
  • 3.
  • 5.
  • 7. Embed In Your Page <html> <head> <script src=“path/to/jquery-x.x.js&quot;></script> [Or <script src=“http://cdn/url.js&quot;></script>] </head> <body> … </body> </html>
  • 8. How It Works? $(“div”). addClass(“xyz”); Find Some Elements Do something with them { } jQuery Object
  • 9. Start Coding jQuery <html> <head> <script src=“path/to/jquery-x.x.js&quot;></script> <script> $(document).ready( function(){ // Start here } ) ; </script> </head> <body> … </body> </html>
  • 10.
  • 11.
  • 12. Selecting Example $(“ #std tr :even ” ).css( “ background-color ” , “ #dde ” ); $(“ #std td .comment :empty ” ).text( “ No Comment ” ); $(“ #std td [align= ‘ center'] &quot;).addClass( “ ocean ” ); Example for tag, id, class and filter Name Class Roll No. Comment Raju XII 2 Good Masud IX 1 Good Apu XII 3 No Comment Mizan XII 5 No Comment Karim VI 2 Satisfactory
  • 13.
  • 14.
  • 15.
  • 16.
  • 17. Handling Events Bind all interactions on events. $(document).ready(function(){ $(“#message”). click ( function(){ $(this).hide(); }); }); <span id=“message” on click =“…”> blah blah </span>
  • 18.
  • 19.
  • 20.
  • 21.
  • 22. Let's Do Some Practice We'll write some <html> $(document). ready( function(){ // And then the JavaScript/jQuery here } ) ; Format selective elements if required
  • 24. Facebook Hidden Optionbar <textarea id=&quot;status&quot;></textarea> <div id=&quot;status-options&quot;> <a href=&quot;#&quot;>a link</a> <a href=&quot;#&quot;>another link</a> </div> $(&quot;#status&quot;) . focus( function(){ $(&quot;#status-options&quot;) . slideDown( &quot;slow&quot; ) ; } ) ; #status-options { display: none ; ... }
  • 26. Twitter Character Count $(&quot;#status&quot;) . keyup ( function(e){ var statusLength = $(&quot;#status&quot;) . val() .length ; $(&quot;#char-count&quot;) . text( 140 - statusLength ) ; }); <textarea id=&quot;status&quot;></textarea> <span id=&quot;char-count&quot;></span>
  • 27. Twitter Character Count $(&quot;#status&quot;) . keyup ( function(e){ var statusLength = $(&quot;#status&quot;) . val() .length ; $(&quot;#char-count&quot;) . text( 140 – statusLength ) ; if( statusLength > 120) { $(&quot;#char-count&quot;). css( 'color', 'red' ) ; } else { $(&quot;#char-count&quot;) . css( 'color', 'black' ) ; } }); <textarea id=&quot;status&quot;></textarea> <span id=&quot;char-count&quot;></span>
  • 29. Working Behind... <a href=&quot;#&quot; id=&quot;load-details&quot;>Show Details</a> <div id=&quot;target&quot;></div> $(&quot;#load-details&quot;) .click ( function(){ $(&quot;#target&quot;) .show() . html( &quot; <img src='i/loading.gif'&quot; />&quot; ) ; $(&quot;#target&quot;) . get( 'server/url?id=3' , function( data ){ $(&quot;#target&quot;) . html(data) ; } ) ; } ) ; #target { display: none ; }
  • 31. Gmail Content Filtering $(&quot;ul#side-menu li a&quot;). click( function(e){ e. preventDefault() ; $(&quot;#&quot;+ $(this). attr(&quot;rel&quot;) ).load( $(this). attr(&quot;href&quot;) ); } ) ; <ul id=&quot;side-menu&quot;> <li><a href=&quot; path?param=1 &quot; rel=&quot; main &quot;>inbox</a></li> <li><a href=&quot;path?param=2&quot; rel=&quot;main&quot;>draft</a></li> </ul> <div id=&quot;main&quot;></div>
  • 33. Facebook See More $(&quot;p.long-p&quot;). each( function() { if( $(this) .text().length > 200 ){ var content = $(this) .text(); //@todo: Move extra content to a span //@todo: Add a link to show hidden span } } ) ; //@todo: Hide extra spans //@todo: Activate the link to show hidden span <p class=&quot;long-p&quot;> Lot of texts... </p>
  • 34. Facebook See More $(this). html( content .substr(0, 199) ) .append( &quot;<span class='extra'>&quot; + content .substr(199) + &quot;</span>&quot; ) .append( &quot; <a href='#' class='more'>See More</a>&quot; ) ; <p class=&quot;long-p&quot;> First 200 chars are here <span class=”extra”> Rest of the content </span> <a href='#' class='more'> See More </a> </p> Move extra content to a span and add link: The HTML will become:
  • 35. Facebook See More $(&quot;p span.extra&quot;) .hide() ; $(&quot;p a.more&quot;) .click( function(){ $(this) .prev().show() ; $(this) .remove() ; } ) ; Hide spans and activate link: <p class=&quot;long-p&quot;> First 200 chars are here <span class=”extra”> Rest of the content </span> <a href='#' class='more'> See More </a> </p>
  • 36. $(&quot;p.long-p&quot;). each( function() { if($(this).text().length > 200){ var content = $(this).text(); $(this). html( content .substr(0, 199) ) .append( &quot;<span class='extra'>&quot; + content .substr(199) + &quot;</span>&quot; ) .append( &quot; <a href='#' class='more'>See More</a>&quot; ) ; } } ) ; $(&quot;p span.extra&quot;) .hide() ; $(&quot;p a.more&quot;) . click( function(){ $(this) .prev().show() ; $(this) .remove() ; } ) ; <p class=&quot;long-p&quot;> Lot of texts... </p>
  • 37.
  • 38.
  • 39. What if not supported?
  • 40.
  • 41. Lightweight jQuery Core – 31KB jQuery Mobile CSS – 7KB jQuery Mobile Javascript – 21KB Framework Images – 80KB
  • 43.
  • 44.
  • 45. Single page <div data-role=“page” id=“home”> Content goes here </div>
  • 46. Header & Footer <div data-role=&quot;page&quot; id=&quot;home&quot;> <div data-role=&quot;header&quot;> <h1>Header</h1> </div> <div data-role=&quot;content&quot;> <p>Inside contents</p> </div> <div data-role=&quot;footer&quot;> <p>Footer</p> </div> </div>
  • 47. Single page <div data-role=&quot;page&quot; id=&quot;home&quot;> <div data-role=&quot;header”> <a data-icon=&quot;home” href=“”>Home</a> <h1>Header</h1> <a data-icon=&quot;back&quot; data-rel=&quot;back”>Back</a> </div> .…. …… </div>
  • 48.
  • 49. Local Pages? Goes source order ID for navigation Can be used a dialog box too
  • 50. Local Pages <div data-role=“page” id=“home”> <p>Home Page</p> </div> <div data-role=“page” id=“ secondpage ” > <p>second page</p> </div>
  • 52. Navigation <div data-role=“page” id=“home”> <a href=“#secondpage” >Go to 2 nd Page</a> </div> <div data-role=“page” id=“ secondpage ” > <a href=“ about.html ” >About Us</a> </div>
  • 53. Dialog box <a href=&quot;#pagedialog&quot; data-rel=&quot;dialog” data-transition=&quot;pop&quot;>Open Dialog</a> <div data-role=&quot;page&quot; id=&quot;dialog&quot;> This is a modal dialog box </div>
  • 54.
  • 55. Mobile Events ready() pagecreate()
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63. Beautification is easy http://jqueryui.com/ Coming for mobile soon...
  • 64. Talk With Others http://forum.jquery.com/ http://forum.jquery.com/jquery-mobile
  • 65.
  • 66.
  • 67.