Your SlideShare is downloading. ×
0
JavaScript Conference 2011 By Take your JS skills to the next level with  jQuery   and   jQuery Mobile Anis uddin Ahmad Mo...
jQuery? <ul><li>Javascript Library </li></ul><ul><li>Simplifies Interaction with DOM  </li></ul><ul><ul><li>Traversing </l...
Why jQuery? <ul><li>Cross Browser Support </li></ul><ul><ul><li>IE 6.0+, FF 2.0+, Safari 3.0+, Opera 9.0+, Chrome </li></u...
So... What's Special?
Still there's something <ul><li>Fastest learning curve </li></ul><ul><ul><li>Just 30 mins for basics! </li></ul></ul><ul><...
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...
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( funct...
Basic Selectors <ul><li>Selecting By Id </li></ul><ul><ul><li>$(“#header”) </li></ul></ul><ul><li>Selecting By Class </li>...
Using Filters <ul><li>Basic Filters </li></ul><ul><ul><li>:first, :last, :even, :odd, … </li></ul></ul><ul><li>Content Fil...
Selecting Example $(“ #std  tr :even ” ).css( “ background-color ” ,  “ #dde ” ); $(“ #std  td .comment :empty ” ).text( “...
Actions - DOM Manipulating <ul><li>DOM Manipulation </li></ul><ul><ul><li>before(), after(), append(), appendTo(), … </li>...
Attributes and Contents <ul><li>DOM Manipulation </li></ul><ul><ul><li>before(), after(), append(), appendTo(), … </li></u...
Attributes Example <ul><li>Getting </li></ul><ul><li>var allignment =  $(“img.logo”) . attr (“align”); </li></ul><ul><li>v...
Actions - Handling Events <ul><li>DOM Manipulation </li></ul><ul><ul><li>before(), after(), append(), appendTo(), … </li><...
Handling Events Bind all interactions on events. $(document).ready(function(){   $(“#message”). click ( function(){ $(this...
jQuery Events <ul><li>Events Helpers </li></ul><ul><ul><li>click() </li></ul></ul><ul><ul><li>dblclick() </li></ul></ul><u...
Actions - Handling Events <ul><li>DOM Manipulation </li></ul><ul><ul><li>before(), after(), append(), appendTo(), … </li><...
jQuery Effects <ul><li>show(), hide(), toggle() </li></ul><ul><li>slideUp(), slideDown(), slideToggle() </li></ul><ul><li>...
Actions - Ajax <ul><li>DOM Manipulation </li></ul><ul><ul><li>before(), after(), append(), appendTo(), … </li></ul></ul><u...
Let's Do Some Practice We'll write some <html> $(document). ready( function(){ // And then the JavaScript/jQuery here } ) ...
Facebook Hidden Optionbar
Facebook Hidden Optionbar <textarea id=&quot;status&quot;></textarea> <div id=&quot;status-options&quot;> <a href=&quot;#&...
Twitter Character Count
Twitter Character Count $(&quot;#status&quot;) . keyup ( function(e){ var  statusLength  =  $(&quot;#status&quot;) . val()...
Twitter Character Count $(&quot;#status&quot;) . keyup ( function(e){ var  statusLength  =  $(&quot;#status&quot;) . val()...
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> $(&...
Gmail Content Filtering
Gmail Content Filtering $(&quot;ul#side-menu li a&quot;). click( function(e){ e. preventDefault() ; $(&quot;#&quot;+  $(th...
Facebook See More
Facebook See More $(&quot;p.long-p&quot;). each( function() { if( $(this) .text().length  > 200 ){ var  content  =  $(this...
Facebook See More $(this). html( content .substr(0, 199) ) .append( &quot;<span class='extra'>&quot;  +  content .substr(1...
Facebook See More $(&quot;p span.extra&quot;) .hide() ; $(&quot;p a.more&quot;) .click( function(){ $(this) .prev().show()...
$(&quot;p.long-p&quot;). each( function() { if($(this).text().length > 200){ var  content  = $(this).text(); $(this). html...
Why Mobile Development? <ul><li>Accessible </li></ul><ul><li>Number of devices </li></ul><ul><li>Reach </li></ul><ul><li>E...
Why jQuery Mobile? <ul><li>Cross Device </li></ul><ul><li>Built on top of old friend jQuery </li></ul><ul><li>Low learning...
What if not supported?
Features <ul><li>Touch Optimized  </li></ul><ul><li>HTML5 & CSS3 </li></ul><ul><li>Theming </li></ul><ul><li>UI components...
Lightweight jQuery Core – 31KB  jQuery Mobile CSS – 7KB jQuery Mobile Javascript – 21KB  Framework Images – 80KB
Example!
Anatomy of a page <ul><li><!DOCTYPE html>  </li></ul><ul><li><html> </li></ul><ul><ul><li><head>  </li></ul></ul><ul><ul><...
Including library files <ul><li><head> </li></ul><ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;jquery.mobile.min...
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> </...
Single page <div data-role=&quot;page&quot; id=&quot;home&quot;> <div data-role=&quot;header”>   <a data-icon=&quot;home” ...
Page Content - Lists <ul><li><div data-role=&quot;content&quot;> </li></ul><ul><li>  <ul data-role=&quot;listview&quot; da...
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...
Local Pages
Navigation <div data-role=“page” id=“home”> <a  href=“#secondpage” >Go to 2 nd  Page</a> </div> <div data-role=“page”  id=...
Dialog box <a  href=&quot;#pagedialog&quot;  data-rel=&quot;dialog” data-transition=&quot;pop&quot;>Open Dialog</a> <div d...
Theming <ul><li>data-theme attribute  </li></ul><ul><li>CSS3 rounded corners, gradient etc. </li></ul><ul><li>Multiple col...
Mobile Events ready() pagecreate()
Mobile Events <ul><li>Swipe Override </li></ul><ul><li>scrollSupressionThreshold </li></ul><ul><li>durationThreshold </li>...
Mobile Events <ul><li>Page Events </li></ul><ul><li>pagebeforeshow </li></ul><ul><li>pagebeforehide </li></ul><ul><li>page...
Binding Events <ul><li>Bind() </li></ul><ul><li>Live() </li></ul><ul><li>$(‘#page2).bind(‘ pageshow ’ , function(e){ </li>...
Responsive Layout <ul><li>Orientation </li></ul><ul><ul><li>.portrait { //css here} </li></ul></ul><ul><ul><li>.landscape ...
Responsive Layout <ul><li><style type=“text/css”> </li></ul><ul><ul><li>.portrait  #ortest { </li></ul></ul><ul><ul><li>di...
Testing <ul><li>Desktop Browsers </li></ul><ul><li>Simulators </li></ul><ul><li>Devices </li></ul>
Move Faster... <ul><li>Ajax </li></ul><ul><li>Animation and Effects </li></ul><ul><li>Browser Tweaks </li></ul><ul><li>Dat...
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… <ul><li>Jquery.com </li></ul><ul><li>jquerymobile.com </li></ul><ul><li>Visual jQuery (www.visualjquery.com) </l...
We are.. <ul><li>Anis uddin Ahmad </li></ul><ul><li>Co-Founder </li></ul><ul><li>WNeeds Ltd. </li></ul><ul><li>http://ajax...
QUESTIONS? <ul><li>? </li></ul>
Upcoming SlideShare
Loading in...5
×

jQuery & jQuery Mobile

24,288

Published on

Published in: Technology
0 Comments
21 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
24,288
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
543
Comments
0
Likes
21
Embeds 0
No embeds

No notes for slide

Transcript of "jQuery & jQuery Mobile"

  1. 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. 2. jQuery? <ul><li>Javascript Library </li></ul><ul><li>Simplifies Interaction with DOM </li></ul><ul><ul><li>Traversing </li></ul></ul><ul><ul><li>Event Handling </li></ul></ul><ul><ul><li>Animating </li></ul></ul><ul><ul><li>Ajax Interactions </li></ul></ul>Absolute beginner? Please check: http://www.slideshare.net/anisniit/jquery-from-the-very-beginning Change the way that you write JavaScript
  3. 3. Why jQuery? <ul><li>Cross Browser Support </li></ul><ul><ul><li>IE 6.0+, FF 2.0+, Safari 3.0+, Opera 9.0+, Chrome </li></ul></ul><ul><li>Lightweight </li></ul><ul><ul><li>About 31KB </li></ul></ul><ul><li>CSS3 Complaint </li></ul><ul><ul><li>Supports CSS 1-3 </li></ul></ul>
  4. 4. So... What's Special?
  5. 5. Still there's something <ul><li>Fastest learning curve </li></ul><ul><ul><li>Just 30 mins for basics! </li></ul></ul><ul><li>Plugins </li></ul><ul><li>Community </li></ul>We're using jQuery!
  6. 6. Let's Start http://docs.jquery.com/Downloading_jQuery
  7. 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. 8. How It Works? $(“div”). addClass(“xyz”); Find Some Elements Do something with them { } jQuery Object
  9. 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. 10. Basic Selectors <ul><li>Selecting By Id </li></ul><ul><ul><li>$(“#header”) </li></ul></ul><ul><li>Selecting By Class </li></ul><ul><ul><li>$(“.updated”) </li></ul></ul><ul><li>Selecting by tag name </li></ul><ul><ul><li>$(“table”) </li></ul></ul><ul><li>Combine them </li></ul><ul><ul><li>$(“table.user-list”) </li></ul></ul><ul><ul><li>$(“#footer ul.menu li”) </li></ul></ul>
  11. 11. Using Filters <ul><li>Basic Filters </li></ul><ul><ul><li>:first, :last, :even, :odd, … </li></ul></ul><ul><li>Content Filters: </li></ul><ul><ul><li>:empty , :contains(text), :has(selector), … </li></ul></ul><ul><li>Attribute Filters: </li></ul><ul><ul><li>[attribute], [attribute=value], [attribute!=value], ... </li></ul></ul><ul><li>Forms </li></ul><ul><ul><li>:input, :text, :submit, :password, … </li></ul></ul><ul><ul><li>:enabled, :disabled, :checked, ….. </li></ul></ul>
  12. 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. 13. Actions - DOM Manipulating <ul><li>DOM Manipulation </li></ul><ul><ul><li>before(), after(), append(), appendTo(), … </li></ul></ul>
  14. 14. Attributes and Contents <ul><li>DOM Manipulation </li></ul><ul><ul><li>before(), after(), append(), appendTo(), … </li></ul></ul><ul><li>Attributes </li></ul><ul><ul><li>css(), addClass(), attr(), html(), val(), text()… </li></ul></ul>
  15. 15. Attributes Example <ul><li>Getting </li></ul><ul><li>var allignment = $(“img.logo”) . attr (“align”); </li></ul><ul><li>var copyright = $(“p.copyright”) . html (); </li></ul><ul><li>var username = $(“input#name”) . val (); </li></ul><ul><li>Setting </li></ul><ul><li>$(“img.logo”) . attr (“align”, “left”); </li></ul><ul><li>$(“p.copyright”) . html (“&copy; 2009 ajaxray”); </li></ul><ul><li>$(“input#name”) . val (“Spiderman”); </li></ul>
  16. 16. Actions - Handling Events <ul><li>DOM Manipulation </li></ul><ul><ul><li>before(), after(), append(), appendTo(), … </li></ul></ul><ul><li>Attributes </li></ul><ul><ul><li>css(), addClass(), attr(), html(), val(), text()… </li></ul></ul><ul><li>Events </li></ul><ul><ul><li>click(), bind(), unbind(), live(), … </li></ul></ul>
  17. 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. 18. jQuery Events <ul><li>Events Helpers </li></ul><ul><ul><li>click() </li></ul></ul><ul><ul><li>dblclick() </li></ul></ul><ul><ul><li>focus() </li></ul></ul><ul><ul><li>blur() </li></ul></ul><ul><ul><li>keydown() </li></ul></ul><ul><ul><li>keyup() </li></ul></ul><ul><ul><li>mouseover() </li></ul></ul><ul><ul><li>mouseout() </li></ul></ul><ul><ul><li>All on xyz events + more </li></ul></ul><ul><li>Special functions </li></ul><ul><ul><li>bind(type, data, fn) </li></ul></ul><ul><ul><li>unbind(type, data) </li></ul></ul><ul><ul><li>hover(over, out) </li></ul></ul><ul><ul><li>toggle(fn, fn1) </li></ul></ul><ul><ul><li>one(type, data, fn) </li></ul></ul><ul><ul><li>ready(fn) </li></ul></ul><ul><ul><li>live() </li></ul></ul><ul><ul><li>die() </li></ul></ul><ul><ul><li>More... </li></ul></ul>
  19. 19. Actions - Handling Events <ul><li>DOM Manipulation </li></ul><ul><ul><li>before(), after(), append(), appendTo(), … </li></ul></ul><ul><li>Attributes </li></ul><ul><ul><li>css(), addClass(), attr(), html(), val(), text(), … </li></ul></ul><ul><li>Events </li></ul><ul><ul><li>click(), bind(), unbind(), live(), … </li></ul></ul><ul><li>Effects </li></ul><ul><ul><li>hide(), fadeOut(), toggle(), slideUp, animate(), ... </li></ul></ul>
  20. 20. jQuery Effects <ul><li>show(), hide(), toggle() </li></ul><ul><li>slideUp(), slideDown(), slideToggle() </li></ul><ul><li>fadeIn(), fadeOut(), fadeTo() </li></ul>$(&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..
  21. 21. Actions - Ajax <ul><li>DOM Manipulation </li></ul><ul><ul><li>before(), after(), append(), appendTo(), … </li></ul></ul><ul><li>Attributes </li></ul><ul><ul><li>css(), addClass(), attr(), html(), val(), text(), … </li></ul></ul><ul><li>Events </li></ul><ul><ul><li>click(), bind(), unbind(), live(), … </li></ul></ul><ul><li>Effects </li></ul><ul><ul><li>hide(), fadeOut(), toggle(), slideUp, animate(), … </li></ul></ul><ul><li>Ajax </li></ul><ul><ul><li>load(), get(), post(), getJSON(), serialize(), ... </li></ul></ul>
  22. 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
  23. 23. Facebook Hidden Optionbar
  24. 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 ; ... }
  25. 25. Twitter Character Count
  26. 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. 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>
  28. 28. Working Behind... http://ajaxload.info/
  29. 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 ; }
  30. 30. Gmail Content Filtering
  31. 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>
  32. 32. Facebook See More
  33. 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. 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. 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. 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. 37. Why Mobile Development? <ul><li>Accessible </li></ul><ul><li>Number of devices </li></ul><ul><li>Reach </li></ul><ul><li>Easier Development </li></ul><ul><li>Money </li></ul>
  38. 38. Why jQuery Mobile? <ul><li>Cross Device </li></ul><ul><li>Built on top of old friend jQuery </li></ul><ul><li>Low learning </li></ul><ul><li>A full mobile UI framework </li></ul><ul><li>Progressive Enhancement </li></ul><ul><li>& Graceful Degradation </li></ul>
  39. 39. What if not supported?
  40. 40. Features <ul><li>Touch Optimized </li></ul><ul><li>HTML5 & CSS3 </li></ul><ul><li>Theming </li></ul><ul><li>UI components </li></ul><ul><li>Accessibilities </li></ul>
  41. 41. Lightweight jQuery Core – 31KB jQuery Mobile CSS – 7KB jQuery Mobile Javascript – 21KB Framework Images – 80KB
  42. 42. Example!
  43. 43. Anatomy of a page <ul><li><!DOCTYPE html> </li></ul><ul><li><html> </li></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li><meta name=&quot;viewport” content=&quot;width=device-width, initial-scale=1”> </li></ul></ul><ul><ul><li></head> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><li></body> </li></ul></ul><ul><li></html> </li></ul>
  44. 44. Including library files <ul><li><head> </li></ul><ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;jquery.mobile.min.css&quot; /> </li></ul></ul><ul><ul><li><script src=&quot;jquery.min.js&quot;></script> </li></ul></ul><ul><ul><li><script type=“text/javascript”> </li></ul></ul><ul><ul><li>//override here </li></ul></ul><ul><ul><li></script> </li></ul></ul><ul><ul><li><script src=&quot;jquery.mobile.min.js&quot;></script> </li></ul></ul><ul><li></head> </li></ul>
  45. 45. Single page <div data-role=“page” id=“home”> Content goes here </div>
  46. 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. 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. 48. Page Content - Lists <ul><li><div data-role=&quot;content&quot;> </li></ul><ul><li> <ul data-role=&quot;listview&quot; data-inset=&quot;true&quot;> </li></ul><ul><ul><li><li>Item one</li> </li></ul></ul><ul><ul><li><li>Item two</li> </li></ul></ul><ul><ul><li><li>Item three</li> </li></ul></ul><ul><li></ul> </li></ul><ul><li></div> </li></ul>
  49. 49. Local Pages? Goes source order ID for navigation Can be used a dialog box too
  50. 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>
  51. 51. Local Pages
  52. 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. 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. 54. Theming <ul><li>data-theme attribute </li></ul><ul><li>CSS3 rounded corners, gradient etc. </li></ul><ul><li>Multiple color swatches </li></ul><ul><li>Sprite icon sets </li></ul><ul><li>Themeroller coming </li></ul>
  55. 55. Mobile Events ready() pagecreate()
  56. 56. Mobile Events <ul><li>Swipe Override </li></ul><ul><li>scrollSupressionThreshold </li></ul><ul><li>durationThreshold </li></ul><ul><li>horizontalDistanceThreshold </li></ul><ul><li>verticalDistanceThreshold </li></ul>
  57. 57. Mobile Events <ul><li>Page Events </li></ul><ul><li>pagebeforeshow </li></ul><ul><li>pagebeforehide </li></ul><ul><li>pageshow </li></ul><ul><li>pagehide </li></ul><ul><li>pagecreate </li></ul>
  58. 58. Binding Events <ul><li>Bind() </li></ul><ul><li>Live() </li></ul><ul><li>$(‘#page2).bind(‘ pageshow ’ , function(e){ </li></ul><ul><li>//do something </li></ul><ul><li>}); </li></ul>
  59. 59. Responsive Layout <ul><li>Orientation </li></ul><ul><ul><li>.portrait { //css here} </li></ul></ul><ul><ul><li>.landscape { //css here } </li></ul></ul>
  60. 60. Responsive Layout <ul><li><style type=“text/css”> </li></ul><ul><ul><li>.portrait #ortest { </li></ul></ul><ul><ul><li>display: none; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>.landscape #ortest { </li></ul></ul><ul><ul><li>display: block; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li></style> </li></ul><ul><li><p id=&quot; ortest ”>Landscape View</p> </li></ul>
  61. 61. Testing <ul><li>Desktop Browsers </li></ul><ul><li>Simulators </li></ul><ul><li>Devices </li></ul>
  62. 62. Move Faster... <ul><li>Ajax </li></ul><ul><li>Animation and Effects </li></ul><ul><li>Browser Tweaks </li></ul><ul><li>Data </li></ul><ul><li>DOM </li></ul><ul><li>Drag-and-Drop </li></ul><ul><li>Events </li></ul><ul><li>Forms </li></ul><ul><li>Integration </li></ul><ul><li>JavaScript </li></ul><ul><li>jQuery Extensions </li></ul><ul><li>Layout </li></ul><ul><li>Media </li></ul><ul><li>Menus </li></ul><ul><li>Metaplugin </li></ul><ul><li>Navigation </li></ul><ul><li>Tables </li></ul><ul><li>User Interface </li></ul><ul><li>Utilities </li></ul><ul><li>Widgets </li></ul><ul><li>Windows and Overlays </li></ul>http://plugins.jquery.com/
  63. 63. Beautification is easy http://jqueryui.com/ Coming for mobile soon...
  64. 64. Talk With Others http://forum.jquery.com/ http://forum.jquery.com/jquery-mobile
  65. 65. Dig more… <ul><li>Jquery.com </li></ul><ul><li>jquerymobile.com </li></ul><ul><li>Visual jQuery (www.visualjquery.com) </li></ul><ul><li>Jqapi ( www.jqapi.com ) </li></ul><ul><li>Book: jQuery Mobile First Look by Giulio Bai </li></ul><ul><li>Book: Master Mobile Web Apps with jQuery Book: Mobile by Matt Doyle </li></ul>
  66. 66. We are.. <ul><li>Anis uddin Ahmad </li></ul><ul><li>Co-Founder </li></ul><ul><li>WNeeds Ltd. </li></ul><ul><li>http://ajaxray.com </li></ul><ul><li>Md. Zakir Hossain Raju </li></ul><ul><li>Web Application Developer </li></ul><ul><li>somewherein.com </li></ul><ul><li>http://hungrycoder.xenexbd.com </li></ul>
  67. 67. QUESTIONS? <ul><li>? </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×