jQuery & jQuery Mobile

  • 23,135 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
23,135
On Slideshare
0
From Embeds
0
Number of Embeds
9

Actions

Shares
Downloads
317
Comments
0
Likes
18

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