Your SlideShare is downloading. ×
0
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
jQuery & jQuery Mobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery & jQuery Mobile

24,246

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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&apos;s Special?
  • 5. Still there&apos;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&apos;re using jQuery!
  • 6. Let&apos;s Start http://docs.jquery.com/Downloading_jQuery
  • 7. Embed In Your Page &lt;html&gt; &lt;head&gt; &lt;script src=“path/to/jquery-x.x.js&amp;quot;&gt;&lt;/script&gt; [Or &lt;script src=“http://cdn/url.js&amp;quot;&gt;&lt;/script&gt;] &lt;/head&gt; &lt;body&gt; … &lt;/body&gt; &lt;/html&gt;
  • 8. How It Works? $(“div”). addClass(“xyz”); Find Some Elements Do something with them { } jQuery Object
  • 9. Start Coding jQuery &lt;html&gt; &lt;head&gt; &lt;script src=“path/to/jquery-x.x.js&amp;quot;&gt;&lt;/script&gt; &lt;script&gt; $(document).ready( function(){ // Start here } ) ; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; … &lt;/body&gt; &lt;/html&gt;
  • 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&apos;] &amp;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 (“&amp;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(); }); }); &lt;span id=“message” on click =“…”&gt; blah blah &lt;/span&gt;
  • 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>$(&amp;quot;#showdown&amp;quot;).click(function(){ $(&amp;quot;#my-div&amp;quot;). animate ({ width: &amp;quot;70%&amp;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&apos;s Do Some Practice We&apos;ll write some &lt;html&gt; $(document). ready( function(){ // And then the JavaScript/jQuery here } ) ; Format selective elements if required
  • 23. Facebook Hidden Optionbar
  • 24. Facebook Hidden Optionbar &lt;textarea id=&amp;quot;status&amp;quot;&gt;&lt;/textarea&gt; &lt;div id=&amp;quot;status-options&amp;quot;&gt; &lt;a href=&amp;quot;#&amp;quot;&gt;a link&lt;/a&gt; &lt;a href=&amp;quot;#&amp;quot;&gt;another link&lt;/a&gt; &lt;/div&gt; $(&amp;quot;#status&amp;quot;) . focus( function(){ $(&amp;quot;#status-options&amp;quot;) . slideDown( &amp;quot;slow&amp;quot; ) ; } ) ; #status-options { display: none ; ... }
  • 25. Twitter Character Count
  • 26. Twitter Character Count $(&amp;quot;#status&amp;quot;) . keyup ( function(e){ var statusLength = $(&amp;quot;#status&amp;quot;) . val() .length ; $(&amp;quot;#char-count&amp;quot;) . text( 140 - statusLength ) ; }); &lt;textarea id=&amp;quot;status&amp;quot;&gt;&lt;/textarea&gt; &lt;span id=&amp;quot;char-count&amp;quot;&gt;&lt;/span&gt;
  • 27. Twitter Character Count $(&amp;quot;#status&amp;quot;) . keyup ( function(e){ var statusLength = $(&amp;quot;#status&amp;quot;) . val() .length ; $(&amp;quot;#char-count&amp;quot;) . text( 140 – statusLength ) ; if( statusLength &gt; 120) { $(&amp;quot;#char-count&amp;quot;). css( &apos;color&apos;, &apos;red&apos; ) ; } else { $(&amp;quot;#char-count&amp;quot;) . css( &apos;color&apos;, &apos;black&apos; ) ; } }); &lt;textarea id=&amp;quot;status&amp;quot;&gt;&lt;/textarea&gt; &lt;span id=&amp;quot;char-count&amp;quot;&gt;&lt;/span&gt;
  • 28. Working Behind... http://ajaxload.info/
  • 29. Working Behind... &lt;a href=&amp;quot;#&amp;quot; id=&amp;quot;load-details&amp;quot;&gt;Show Details&lt;/a&gt; &lt;div id=&amp;quot;target&amp;quot;&gt;&lt;/div&gt; $(&amp;quot;#load-details&amp;quot;) .click ( function(){ $(&amp;quot;#target&amp;quot;) .show() . html( &amp;quot; &lt;img src=&apos;i/loading.gif&apos;&amp;quot; /&gt;&amp;quot; ) ; $(&amp;quot;#target&amp;quot;) . get( &apos;server/url?id=3&apos; , function( data ){ $(&amp;quot;#target&amp;quot;) . html(data) ; } ) ; } ) ; #target { display: none ; }
  • 30. Gmail Content Filtering
  • 31. Gmail Content Filtering $(&amp;quot;ul#side-menu li a&amp;quot;). click( function(e){ e. preventDefault() ; $(&amp;quot;#&amp;quot;+ $(this). attr(&amp;quot;rel&amp;quot;) ).load( $(this). attr(&amp;quot;href&amp;quot;) ); } ) ; &lt;ul id=&amp;quot;side-menu&amp;quot;&gt; &lt;li&gt;&lt;a href=&amp;quot; path?param=1 &amp;quot; rel=&amp;quot; main &amp;quot;&gt;inbox&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&amp;quot;path?param=2&amp;quot; rel=&amp;quot;main&amp;quot;&gt;draft&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id=&amp;quot;main&amp;quot;&gt;&lt;/div&gt;
  • 32. Facebook See More
  • 33. Facebook See More $(&amp;quot;p.long-p&amp;quot;). each( function() { if( $(this) .text().length &gt; 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 &lt;p class=&amp;quot;long-p&amp;quot;&gt; Lot of texts... &lt;/p&gt;
  • 34. Facebook See More $(this). html( content .substr(0, 199) ) .append( &amp;quot;&lt;span class=&apos;extra&apos;&gt;&amp;quot; + content .substr(199) + &amp;quot;&lt;/span&gt;&amp;quot; ) .append( &amp;quot; &lt;a href=&apos;#&apos; class=&apos;more&apos;&gt;See More&lt;/a&gt;&amp;quot; ) ; &lt;p class=&amp;quot;long-p&amp;quot;&gt; First 200 chars are here &lt;span class=”extra”&gt; Rest of the content &lt;/span&gt; &lt;a href=&apos;#&apos; class=&apos;more&apos;&gt; See More &lt;/a&gt; &lt;/p&gt; Move extra content to a span and add link: The HTML will become:
  • 35. Facebook See More $(&amp;quot;p span.extra&amp;quot;) .hide() ; $(&amp;quot;p a.more&amp;quot;) .click( function(){ $(this) .prev().show() ; $(this) .remove() ; } ) ; Hide spans and activate link: &lt;p class=&amp;quot;long-p&amp;quot;&gt; First 200 chars are here &lt;span class=”extra”&gt; Rest of the content &lt;/span&gt; &lt;a href=&apos;#&apos; class=&apos;more&apos;&gt; See More &lt;/a&gt; &lt;/p&gt;
  • 36. $(&amp;quot;p.long-p&amp;quot;). each( function() { if($(this).text().length &gt; 200){ var content = $(this).text(); $(this). html( content .substr(0, 199) ) .append( &amp;quot;&lt;span class=&apos;extra&apos;&gt;&amp;quot; + content .substr(199) + &amp;quot;&lt;/span&gt;&amp;quot; ) .append( &amp;quot; &lt;a href=&apos;#&apos; class=&apos;more&apos;&gt;See More&lt;/a&gt;&amp;quot; ) ; } } ) ; $(&amp;quot;p span.extra&amp;quot;) .hide() ; $(&amp;quot;p a.more&amp;quot;) . click( function(){ $(this) .prev().show() ; $(this) .remove() ; } ) ; &lt;p class=&amp;quot;long-p&amp;quot;&gt; Lot of texts... &lt;/p&gt;
  • 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>&amp; Graceful Degradation </li></ul>
  • 39. What if not supported?
  • 40. Features <ul><li>Touch Optimized </li></ul><ul><li>HTML5 &amp; 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>&lt;!DOCTYPE html&gt; </li></ul><ul><li>&lt;html&gt; </li></ul><ul><ul><li>&lt;head&gt; </li></ul></ul><ul><ul><li>&lt;meta name=&amp;quot;viewport” content=&amp;quot;width=device-width, initial-scale=1”&gt; </li></ul></ul><ul><ul><li>&lt;/head&gt; </li></ul></ul><ul><ul><li>&lt;body&gt; </li></ul></ul><ul><ul><li>&lt;/body&gt; </li></ul></ul><ul><li>&lt;/html&gt; </li></ul>
  • 44. Including library files <ul><li>&lt;head&gt; </li></ul><ul><ul><li>&lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;jquery.mobile.min.css&amp;quot; /&gt; </li></ul></ul><ul><ul><li>&lt;script src=&amp;quot;jquery.min.js&amp;quot;&gt;&lt;/script&gt; </li></ul></ul><ul><ul><li>&lt;script type=“text/javascript”&gt; </li></ul></ul><ul><ul><li>//override here </li></ul></ul><ul><ul><li>&lt;/script&gt; </li></ul></ul><ul><ul><li>&lt;script src=&amp;quot;jquery.mobile.min.js&amp;quot;&gt;&lt;/script&gt; </li></ul></ul><ul><li>&lt;/head&gt; </li></ul>
  • 45. Single page &lt;div data-role=“page” id=“home”&gt; Content goes here &lt;/div&gt;
  • 46. Header &amp; Footer &lt;div data-role=&amp;quot;page&amp;quot; id=&amp;quot;home&amp;quot;&gt; &lt;div data-role=&amp;quot;header&amp;quot;&gt; &lt;h1&gt;Header&lt;/h1&gt; &lt;/div&gt; &lt;div data-role=&amp;quot;content&amp;quot;&gt; &lt;p&gt;Inside contents&lt;/p&gt; &lt;/div&gt; &lt;div data-role=&amp;quot;footer&amp;quot;&gt; &lt;p&gt;Footer&lt;/p&gt; &lt;/div&gt; &lt;/div&gt;
  • 47. Single page &lt;div data-role=&amp;quot;page&amp;quot; id=&amp;quot;home&amp;quot;&gt; &lt;div data-role=&amp;quot;header”&gt; &lt;a data-icon=&amp;quot;home” href=“”&gt;Home&lt;/a&gt; &lt;h1&gt;Header&lt;/h1&gt; &lt;a data-icon=&amp;quot;back&amp;quot; data-rel=&amp;quot;back”&gt;Back&lt;/a&gt; &lt;/div&gt; .…. …… &lt;/div&gt;
  • 48. Page Content - Lists <ul><li>&lt;div data-role=&amp;quot;content&amp;quot;&gt; </li></ul><ul><li> &lt;ul data-role=&amp;quot;listview&amp;quot; data-inset=&amp;quot;true&amp;quot;&gt; </li></ul><ul><ul><li>&lt;li&gt;Item one&lt;/li&gt; </li></ul></ul><ul><ul><li>&lt;li&gt;Item two&lt;/li&gt; </li></ul></ul><ul><ul><li>&lt;li&gt;Item three&lt;/li&gt; </li></ul></ul><ul><li>&lt;/ul&gt; </li></ul><ul><li>&lt;/div&gt; </li></ul>
  • 49. Local Pages? Goes source order ID for navigation Can be used a dialog box too
  • 50. Local Pages &lt;div data-role=“page” id=“home”&gt; &lt;p&gt;Home Page&lt;/p&gt; &lt;/div&gt; &lt;div data-role=“page” id=“ secondpage ” &gt; &lt;p&gt;second page&lt;/p&gt; &lt;/div&gt;
  • 51. Local Pages
  • 52. Navigation &lt;div data-role=“page” id=“home”&gt; &lt;a href=“#secondpage” &gt;Go to 2 nd Page&lt;/a&gt; &lt;/div&gt; &lt;div data-role=“page” id=“ secondpage ” &gt; &lt;a href=“ about.html ” &gt;About Us&lt;/a&gt; &lt;/div&gt;
  • 53. Dialog box &lt;a href=&amp;quot;#pagedialog&amp;quot; data-rel=&amp;quot;dialog” data-transition=&amp;quot;pop&amp;quot;&gt;Open Dialog&lt;/a&gt; &lt;div data-role=&amp;quot;page&amp;quot; id=&amp;quot;dialog&amp;quot;&gt; This is a modal dialog box &lt;/div&gt;
  • 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>&lt;style type=“text/css”&gt; </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>&lt;/style&gt; </li></ul><ul><li>&lt;p id=&amp;quot; ortest ”&gt;Landscape View&lt;/p&gt; </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>

×