jQuery & jQuery Mobile

24,814
-1

Published on

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

No Downloads
Views
Total Views
24,814
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
550
Comments
0
Likes
22
Embeds 0
No embeds

No notes for slide

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. 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. 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. So... What's Special?
  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. Let's Start http://docs.jquery.com/Downloading_jQuery
  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. 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. 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. 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. Actions - DOM Manipulating <ul><li>DOM Manipulation </li></ul><ul><ul><li>before(), after(), append(), appendTo(), … </li></ul></ul>
  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. 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. 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. Handling Events Bind all interactions on events. $(document).ready(function(){ $(“#message”). click ( function(){ $(this).hide(); }); }); <span id=“message” on click =“…”> blah blah </span>
  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. 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. 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. 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. 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. Facebook Hidden Optionbar
  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. Twitter Character Count
  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>
  28. Working Behind... http://ajaxload.info/
  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. Gmail Content Filtering
  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. Facebook See More
  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. 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. 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. What if not supported?
  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. Lightweight jQuery Core – 31KB jQuery Mobile CSS – 7KB jQuery Mobile Javascript – 21KB Framework Images – 80KB
  42. Example!
  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. 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. 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. 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. 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>
  51. Local Pages
  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. 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. Mobile Events ready() pagecreate()
  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. 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. 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. 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. 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. Testing <ul><li>Desktop Browsers </li></ul><ul><li>Simulators </li></ul><ul><li>Devices </li></ul>
  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. 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. 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. 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. 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.

×